Extract shlink-web-component outside of src folder

shlink-web-component/mercure/helpers/Topics.ts

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

shlink-web-component/mercure/helpers/boundToMercureHub.tsx

@@ -0,0 +1,46 @@
+import { pipe } from 'ramda';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import type { CreateVisit } from '../../visits/types';
+import type { MercureInfo } from '../reducers/mercureInfo';
+import { bindToMercureTopic } from './index';
+
+export interface MercureBoundProps {
+  createNewVisits: (createdVisits: CreateVisit[]) => void;
+  loadMercureInfo: () => void;
+  mercureInfo: MercureInfo;
+}
+
+export function boundToMercureHub<T = {}>(
+  WrappedComponent: FC<MercureBoundProps & T>,
+  getTopicsForProps: (props: T, routeParams: any) => string[],
+) {
+  const pendingUpdates = new Set<CreateVisit>();
+
+  return (props: MercureBoundProps & T) => {
+    const { createNewVisits, loadMercureInfo, mercureInfo } = props;
+    const { interval } = mercureInfo;
+    const params = useParams();
+
+    // Every time mercure info changes, re-bind
+    useEffect(() => {
+      const onMessage = (visit: CreateVisit) => (interval ? pendingUpdates.add(visit) : createNewVisits([visit]));
+      const topics = getTopicsForProps(props, params);
+      const closeEventSource = bindToMercureTopic(mercureInfo, topics, onMessage, loadMercureInfo);
+
+      if (!interval) {
+        return closeEventSource;
+      }
+
+      const timer = setInterval(() => {
+        createNewVisits([...pendingUpdates]);
+        pendingUpdates.clear();
+      }, interval * 1000 * 60);
+
+      return pipe(() => clearInterval(timer), () => closeEventSource?.());
+    }, [mercureInfo]);
+
+    return <WrappedComponent {...props} />;
+  };
+}

shlink-web-component/mercure/helpers/index.ts

@@ -0,0 +1,31 @@
+import { EventSourcePolyfill as EventSource } from 'event-source-polyfill';
+import type { MercureInfo } from '../reducers/mercureInfo';
+
+export const bindToMercureTopic = <T>(mercureInfo: MercureInfo, topics: string[], onMessage: (message: T) => void, onTokenExpired: () => void) => { // eslint-disable-line max-len
+  const { mercureHubUrl, token, loading, error } = mercureInfo;
+
+  if (loading || error || !mercureHubUrl) {
+    return undefined;
+  }
+
+  const onEventSourceMessage = ({ data }: { data: string }) => onMessage(JSON.parse(data) as T);
+  const onEventSourceError = ({ status }: { status: number }) => status === 401 && onTokenExpired();
+
+  const subscriptions = 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;
+  });
+
+  return () => subscriptions.forEach((es) => es.close());
+};