diff --git a/src/mercure/helpers/boundToMercureHub.tsx b/src/mercure/helpers/boundToMercureHub.tsx index 1960aec3..b910404c 100644 --- a/src/mercure/helpers/boundToMercureHub.tsx +++ b/src/mercure/helpers/boundToMercureHub.tsx @@ -22,12 +22,18 @@ export function boundToMercureHub( useEffect(() => { const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisits([ visit ]); - interval && setInterval(() => { + bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo); + + if (!interval) { + return undefined; + } + + const timer = setInterval(() => { createNewVisits([ ...pendingUpdates ]); pendingUpdates.clear(); }, interval * 1000 * 60); - bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo); + return () => clearInterval(timer); }, [ mercureInfo ]); return ; diff --git a/src/settings/RealTimeUpdates.tsx b/src/settings/RealTimeUpdates.tsx index 2e8b18b9..58195138 100644 --- a/src/settings/RealTimeUpdates.tsx +++ b/src/settings/RealTimeUpdates.tsx @@ -37,9 +37,11 @@ const RealTimeUpdates = ( /> {realTimeUpdates.enabled && ( - {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && - Updates will be reflected in the UI every {realTimeUpdates.interval} minutes. - } + {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && ( + + Updates will be reflected in the UI every {realTimeUpdates.interval} minute{realTimeUpdates.interval > 1 && 's'}. + + )} {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'} )}