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);

test/mercure/helpers/index.test.tsx

@@ -20,7 +20,7 @@ describe('helpers', () => {
       [ Mock.of<MercureInfo>({ loading: false, error: false, mercureHubUrl: undefined }) ],
       [ Mock.of<MercureInfo>({ loading: true, error: true, mercureHubUrl: undefined }) ],
     ])('does not bind an EventSource when loading, error or no hub URL', (mercureInfo) => {
-      bindToMercureTopic(mercureInfo, '', identity, identity)();
+      bindToMercureTopic(mercureInfo, '', identity, identity);
 
       expect(EventSource).not.toHaveBeenCalled();
       expect(onMessage).not.toHaveBeenCalled();
@@ -40,7 +40,7 @@ describe('helpers', () => {
         error: false,
         mercureHubUrl,
         token,
-      }, topic, onMessage, onTokenExpired)();
+      }, topic, onMessage, onTokenExpired);
 
       expect(EventSource).toHaveBeenCalledWith(hubUrl, {
         headers: {

test/mercure/reducers/mercureInfo.test.ts

@@ -36,11 +36,11 @@ describe('mercureInfoReducer', () => {
     });
 
     it('returns mercure info on GET_MERCURE_INFO', () => {
-      expect(reducer(undefined, { type: GET_MERCURE_INFO, ...mercureInfo })).toEqual({
+      expect(reducer(undefined, { type: GET_MERCURE_INFO, ...mercureInfo })).toEqual(expect.objectContaining({
         ...mercureInfo,
         loading: false,
         error: false,
-      });
+      }));
     });
   });
 

test/tags/TagsList.test.tsx

@@ -19,7 +19,7 @@ describe('<TagsList />', () => {
     wrapper = shallow(
       <TagsListComp
         {...Mock.all<TagsListProps>()}
-        {...Mock.all<MercureBoundProps>()}
+        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
         forceListTags={identity}
         filterTags={filterTags}
         tagsList={Mock.of<TagsList>(tagsList)}

test/visits/ShortUrlVisits.test.tsx

@@ -26,7 +26,7 @@ describe('<ShortUrlVisits />', () => {
     wrapper = shallow(
       <ShortUrlVisits
         {...Mock.all<ShortUrlVisitsProps>()}
-        {...Mock.all<MercureBoundProps>()}
+        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
         getShortUrlDetail={identity}
         getShortUrlVisits={getShortUrlVisitsMock}
         match={match}

test/visits/TagVisits.test.tsx

@@ -26,7 +26,7 @@ describe('<TagVisits />', () => {
     wrapper = shallow(
       <TagVisits
         {...Mock.all<TagVisitsProps>()}
-        {...Mock.all<MercureBoundProps>()}
+        {...Mock.of<MercureBoundProps>({ mercureInfo: {} })}
         getTagVisits={getTagVisitsMock}
         match={match}
         history={history}