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());
+};

shlink-web-component/mercure/reducers/mercureInfo.ts

@@ -0,0 +1,44 @@
+import { createSlice } from '@reduxjs/toolkit';
+import { createAsyncThunk } from '../../../src/utils/helpers/redux';
+import type { ShlinkApiClient, ShlinkMercureInfo } from '../../api-contract';
+
+const REDUCER_PREFIX = 'shlink/mercure';
+
+export interface MercureInfo extends Partial<ShlinkMercureInfo> {
+  interval?: number;
+  loading: boolean;
+  error: boolean;
+}
+
+const initialState: MercureInfo = {
+  loading: true,
+  error: false,
+};
+
+export const mercureInfoReducerCreator = (apiClient: ShlinkApiClient) => {
+  const loadMercureInfo = createAsyncThunk(
+    `${REDUCER_PREFIX}/loadMercureInfo`,
+    (): Promise<ShlinkMercureInfo> =>
+    // FIXME Get settings here somehow, as they are only available via hook
+    // const { settings } = getState();
+    // if (!settings.realTimeUpdates.enabled) {
+    //   throw new Error('Real time updates not enabled');
+    // }
+
+      apiClient.mercureInfo()
+    ,
+  );
+
+  const { reducer } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+      builder.addCase(loadMercureInfo.pending, (state) => ({ ...state, loading: true, error: false }));
+      builder.addCase(loadMercureInfo.rejected, (state) => ({ ...state, loading: false, error: true }));
+      builder.addCase(loadMercureInfo.fulfilled, (_, { payload }) => ({ ...payload, loading: false, error: false }));
+    },
+  });
+
+  return { loadMercureInfo, reducer };
+};

shlink-web-component/mercure/services/provideServices.ts

@@ -0,0 +1,12 @@
+import type Bottle from 'bottlejs';
+import { prop } from 'ramda';
+import { mercureInfoReducerCreator } from '../reducers/mercureInfo';
+
+export const provideServices = (bottle: Bottle) => {
+  // Reducer
+  bottle.serviceFactory('mercureInfoReducerCreator', mercureInfoReducerCreator, 'apiClient');
+  bottle.serviceFactory('mercureInfoReducer', prop('reducer'), 'mercureInfoReducerCreator');
+
+  // Actions
+  bottle.serviceFactory('loadMercureInfo', prop('loadMercureInfo'), 'mercureInfoReducerCreator');
+};