From cfb165d24056255cdc12839c0696c67b5a33ca5b Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 12 Sep 2020 11:55:49 +0200
Subject: [PATCH] Fixed boundToMercureHub HOC so that it clears updates
 intervals when unmounted

---
 src/mercure/helpers/boundToMercureHub.tsx | 10 ++++++++--
 src/settings/RealTimeUpdates.tsx          |  8 +++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

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<T = {}>(
     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 <WrappedComponent {...props} />;
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 && (
           <small className="form-text text-muted">
-            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 &&
-              <span>Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minutes.</span>
-            }
+            {realTimeUpdates.interval !== undefined && realTimeUpdates.interval > 0 && (
+              <span>
+                Updates will be reflected in the UI every <b>{realTimeUpdates.interval}</b> minute{realTimeUpdates.interval > 1 && 's'}.
+              </span>
+            )}
             {!realTimeUpdates.interval && 'Updates will be reflected in the UI as soon as they happen.'}
           </small>
         )}