Added support to dispatch all UI actions based on mercure bindings on a specific schedule instead of real time

src/mercure/helpers/boundToMercureHub.tsx

@@ -13,13 +13,22 @@ export function boundToMercureHub<T = {}>(
   WrappedComponent: FC<MercureBoundProps & T>,
   getTopicForProps: (props: T) => string,
 ) {
+  const pendingUpdates = new Set<CreateVisit>();
+
   return (props: MercureBoundProps & T) => {
     const { createNewVisit, loadMercureInfo, mercureInfo } = props;
+    const { interval } = mercureInfo;
 
-    useEffect(
-      bindToMercureTopic(mercureInfo, getTopicForProps(props), createNewVisit, loadMercureInfo),
-      [ mercureInfo ],
-    );
+    useEffect(() => {
+      const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisit(visit);
+
+      interval && setInterval(() => {
+        pendingUpdates.forEach(createNewVisit);
+        pendingUpdates.clear();
+      }, interval * 1000 * 60);
+
+      bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo);
+    }, [ mercureInfo ]);
 
     return <WrappedComponent {...props} />;
   };

src/mercure/helpers/index.ts

@@ -1,7 +1,7 @@
 import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
 import { MercureInfo } from '../reducers/mercureInfo';
 
-export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topic: string, onMessage: (message: T) => void, onTokenExpired: Function) => () => { // eslint-disable-line max-len
+export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topic: string, onMessage: (message: T) => void, onTokenExpired: Function) => { // eslint-disable-line max-len
   const { mercureHubUrl, token, loading, error } = mercureInfo;
 
   if (loading || error || !mercureHubUrl) {

src/mercure/reducers/mercureInfo.ts

@@ -13,11 +13,12 @@ export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
 export interface MercureInfo {
   token?: string;
   mercureHubUrl?: string;
+  interval?: number;
   loading: boolean;
   error: boolean;
 }
 
-export type GetMercureInfoAction = Action<string> & ShlinkMercureInfo;
+export type GetMercureInfoAction = Action<string> & ShlinkMercureInfo & { interval?: number };
 
 const initialState: MercureInfo = {
   loading: true,
@@ -27,7 +28,7 @@ const initialState: MercureInfo = {
 export default buildReducer<MercureInfo, GetMercureInfoAction>({
   [GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
   [GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
-  [GET_MERCURE_INFO]: (_, { token, mercureHubUrl }) => ({ token, mercureHubUrl, loading: false, error: false }),
+  [GET_MERCURE_INFO]: (_, action) => ({ ...action, loading: false, error: false }),
 }, initialState);
 
 export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
@@ -44,9 +45,9 @@ export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
     }
 
     try {
-      const result = await mercureInfo();
+      const info = await mercureInfo();
 
-      dispatch<GetMercureInfoAction>({ type: GET_MERCURE_INFO, ...result });
+      dispatch<GetMercureInfoAction>({ type: GET_MERCURE_INFO, interval: settings.realTimeUpdates.interval, ...info });
     } catch (e) {
       dispatch({ type: GET_MERCURE_INFO_ERROR });
     }

src/settings/RealTimeUpdates.tsx

@@ -30,7 +30,7 @@ const RealTimeUpdates = (
         <Input
           type="number"
           min={0}
-          placeholder={realTimeUpdates.enabled ? 'Immediate' : ''}
+          placeholder="Immediate"
           disabled={!realTimeUpdates.enabled}
           value={intervalValue(realTimeUpdates.interval)}
           onChange={(e) => setRealTimeUpdatesInterval(Number(e.target.value))}

src/settings/services/provideServices.ts

@@ -13,7 +13,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   // Services
   bottle.serviceFactory('RealTimeUpdates', () => RealTimeUpdates);
-  bottle.decorator('RealTimeUpdates', connect([ 'settings' ], [ 'setRealTimeUpdatesInterval' ]));
+  bottle.decorator(
+    'RealTimeUpdates',
+    connect([ 'settings' ], [ 'toggleRealTimeUpdates', 'setRealTimeUpdatesInterval' ]),
+  );
 
   // Actions
   bottle.serviceFactory('toggleRealTimeUpdates', () => toggleRealTimeUpdates);