Updated mercure integration so that the hook accepts a list of topics to subscribe

src/mercure/helpers/Topics.ts

@@ -0,0 +1,7 @@
+export class Topics {
+  public static visits = () => 'https://shlink.io/new-visit';
+
+  public static shortUrlVisits = (shortCode: string) => `https://shlink.io/new-visit/${shortCode}`;
+
+  public static orphanVisits = () => 'https://shlink.io/new-orphan-visit';
+}

src/mercure/helpers/boundToMercureHub.tsx

@@ -12,7 +12,7 @@ export interface MercureBoundProps {
 
 export function boundToMercureHub<T = {}>(
   WrappedComponent: FC<MercureBoundProps & T>,
-  getTopicForProps: (props: T) => string,
+  getTopicsForProps: (props: T) => string[],
 ) {
   const pendingUpdates = new Set<CreateVisit>();
 
@@ -22,7 +22,7 @@ export function boundToMercureHub<T = {}>(
 
     useEffect(() => {
       const onMessage = (visit: CreateVisit) => interval ? pendingUpdates.add(visit) : createNewVisits([ visit ]);
-      const closeEventSource = bindToMercureTopic(mercureInfo, getTopicForProps(props), onMessage, loadMercureInfo);
+      const closeEventSource = bindToMercureTopic(mercureInfo, getTopicsForProps(props), onMessage, loadMercureInfo);
 
       if (!interval) {
         return closeEventSource;

src/mercure/helpers/index.ts

@@ -1,24 +1,31 @@
 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, topics: string[], onMessage: (message: T) => void, onTokenExpired: Function) => { // eslint-disable-line max-len
   const { mercureHubUrl, token, loading, error } = mercureInfo;
 
   if (loading || error || !mercureHubUrl) {
     return undefined;
   }
 
-  const hubUrl = new URL(mercureHubUrl);
+  const onEventSourceMessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
+  const onEventSourceError = ({ status }: { status: number }) => status === 401 && onTokenExpired();
 
-  hubUrl.searchParams.append('topic', topic);
-  const es = new EventSource(hubUrl, {
-    headers: {
-      Authorization: `Bearer ${token}`,
-    },
+  const subscriptions: EventSource[] = topics.map((topic) => {
+    const hubUrl = new URL(mercureHubUrl);
+
+    hubUrl.searchParams.append('topic', topic);
+    const es = new EventSource(hubUrl, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    es.onmessage = onEventSourceMessage;
+    es.onerror = onEventSourceError;
+
+    return es;
   });
 
-  es.onmessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
-  es.onerror = ({ status }: { status: number }) => status === 401 && onTokenExpired();
-
-  return () => es.close();
+  return () => subscriptions.forEach((es) => es.close());
 };