Ensured mercure updates are not set even if supported, when they have been disabled

src/mercure/helpers/index.js

@@ -1,9 +1,10 @@
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 
-export const bindToMercureTopic = (mercureInfo, topic, onMessage, onTokenExpired) => () => {
+export const bindToMercureTopic = (mercureInfo, realTimeUpdates, topic, onMessage, onTokenExpired) => () => {
+  const { enabled } = realTimeUpdates;
   const { mercureHubUrl, token, loading, error } = mercureInfo;
 
-  if (loading || error) {
+  if (!enabled || loading || error) {
     return undefined;
   }
 

src/short-urls/ShortUrlsList.js

@@ -9,6 +9,7 @@ import SortingDropdown from '../utils/SortingDropdown';
 import { determineOrderDir } from '../utils/utils';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
 import { bindToMercureTopic } from '../mercure/helpers';
+import { RealTimeUpdatesType } from '../settings/reducers/realTimeUpdates';
 import { shortUrlType } from './reducers/shortUrlsList';
 import { shortUrlsListParamsType } from './reducers/shortUrlsListParams';
 import './ShortUrlsList.scss';
@@ -33,6 +34,7 @@ const propTypes = {
   createNewVisit: PropTypes.func,
   loadMercureInfo: PropTypes.func,
   mercureInfo: MercureInfoType,
+  realTimeUpdates: RealTimeUpdatesType,
 };
 
 // FIXME Replace with typescript: (ShortUrlsRow component)
@@ -50,6 +52,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
     createNewVisit,
     loadMercureInfo,
     mercureInfo,
+    realTimeUpdates,
   }) => {
     const { orderBy } = shortUrlsListParams;
     const [ order, setOrder ] = useState({
@@ -117,7 +120,7 @@ const ShortUrlsList = (ShortUrlsRow) => {
       return resetShortUrlParams;
     }, []);
     useEffect(
-      bindToMercureTopic(mercureInfo, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
+      bindToMercureTopic(mercureInfo, realTimeUpdates, 'https://shlink.io/new-visit', createNewVisit, loadMercureInfo),
       [ mercureInfo ]
     );
 

src/short-urls/services/provideServices.js

@@ -31,7 +31,7 @@ const provideServices = (bottle, connect) => {
 
   bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsRow');
   bottle.decorator('ShortUrlsList', connect(
-    [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo' ],
+    [ 'selectedServer', 'shortUrlsListParams', 'mercureInfo', 'realTimeUpdates' ],
     [ 'listShortUrls', 'resetShortUrlParams', 'createNewVisit', 'loadMercureInfo' ]
   ));
 

src/visits/ShortUrlVisits.js

@@ -12,6 +12,7 @@ import { formatDate } from '../utils/helpers/date';
 import { useToggle } from '../utils/helpers/hooks';
 import { MercureInfoType } from '../mercure/reducers/mercureInfo';
 import { bindToMercureTopic } from '../mercure/helpers';
+import { RealTimeUpdatesType } from '../settings/reducers/realTimeUpdates';
 import SortableBarGraph from './SortableBarGraph';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import VisitsHeader from './VisitsHeader';
@@ -35,6 +36,7 @@ const propTypes = {
   createNewVisit: PropTypes.func,
   loadMercureInfo: PropTypes.func,
   mercureInfo: MercureInfoType,
+  realTimeUpdates: RealTimeUpdatesType,
 };
 
 const highlightedVisitsToStats = (highlightedVisits, prop) => highlightedVisits.reduce((acc, highlightedVisit) => {
@@ -62,6 +64,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
     createNewVisit,
     loadMercureInfo,
     mercureInfo,
+    realTimeUpdates,
   }) => {
     const [ startDate, setStartDate ] = useState(undefined);
     const [ endDate, setEndDate ] = useState(undefined);
@@ -117,7 +120,13 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
       loadVisits();
     }, [ startDate, endDate ]);
     useEffect(
-      bindToMercureTopic(mercureInfo, `https://shlink.io/new-visit/${shortCode}`, createNewVisit, loadMercureInfo),
+      bindToMercureTopic(
+        mercureInfo,
+        realTimeUpdates,
+        `https://shlink.io/new-visit/${shortCode}`,
+        createNewVisit,
+        loadMercureInfo
+      ),
       [ mercureInfo ],
     );
 

src/visits/services/provideServices.js

@@ -11,7 +11,7 @@ const provideServices = (bottle, connect) => {
   bottle.serviceFactory('MapModal', () => MapModal);
   bottle.serviceFactory('ShortUrlVisits', ShortUrlVisits, 'VisitsParser', 'OpenMapModalBtn');
   bottle.decorator('ShortUrlVisits', connect(
-    [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo' ],
+    [ 'shortUrlVisits', 'shortUrlDetail', 'mercureInfo', 'realTimeUpdates' ],
     [ 'getShortUrlVisits', 'getShortUrlDetail', 'cancelGetShortUrlVisits', 'createNewVisit', 'loadMercureInfo' ]
   ));
 

test/mercure/helpers/index.test.js

@@ -11,11 +11,12 @@ describe('helpers', () => {
     const onTokenExpired = jest.fn();
 
     it.each([
-      [{ loading: true, error: false }],
+      [{ loading: true, error: false }, { enabled: true }],
-      [{ loading: false, error: true }],
+      [{ loading: false, error: true }, { enabled: true }],
-      [{ loading: true, error: true }],
+      [{ loading: true, error: true }, { enabled: true }],
-    ])('does not bind an EventSource when loading or error', (mercureInfo) => {
+      [{ loading: false, error: false }, { enabled: false }],
-      bindToMercureTopic(mercureInfo)();
+    ])('does not bind an EventSource when disabled, loading or error', (mercureInfo, realTimeUpdates) => {
+      bindToMercureTopic(mercureInfo, realTimeUpdates)();
 
       expect(EventSource).not.toHaveBeenCalled();
       expect(onMessage).not.toHaveBeenCalled();
@@ -35,7 +36,7 @@ describe('helpers', () => {
         error: false,
         mercureHubUrl,
         token,
-      }, topic, onMessage, onTokenExpired)();
+      }, { enabled: true }, topic, onMessage, onTokenExpired)();
 
       expect(EventSource).toHaveBeenCalledWith(hubUrl, {
         headers: {