Fix mercure info loading in shlink-web-component

shlink-web-component/Main.tsx

@@ -10,10 +10,6 @@ import { useSwipeable, useToggle } from '../src/utils/helpers/hooks';
 import { useFeature } from './utils/features';
 import { useRoutesPrefix } from './utils/routesPrefix';
 
-type MainProps = {
-  loadMercureInfo: () => void;
-};
-
 export const Main = (
   TagsList: FC,
   ShortUrlsList: FC,
@@ -26,22 +22,17 @@ export const Main = (
   Overview: FC,
   EditShortUrl: FC,
   ManageDomains: FC,
-): FC<MainProps> => ({ loadMercureInfo }) => {
+): FC => () => {
   const location = useLocation();
   const routesPrefix = useRoutesPrefix();
   const [sidebarVisible, toggleSidebar, showSidebar, hideSidebar] = useToggle();
   useEffect(() => hideSidebar(), [location]);
 
-  // FIXME Re-load mercure info every time server changes
-  // useEffect(() => {
-  //   loadMercureInfo();
-  // }, []);
-
   const addDomainVisitsRoute = useFeature('domainVisits');
   const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
-  // TODO Check if this is already wrapped by a router, and wrap otherwise
+  // FIXME Check if this is already wrapped by a router, and wrap otherwise
 
   return (
     <>

shlink-web-component/ShlinkWebComponent.tsx

@@ -24,15 +24,13 @@ let apiClientRef: ShlinkApiClient;
 
 export const createShlinkWebComponent = (
   bottle: Bottle,
-): FC<ShlinkWebComponentProps> => ({ routesPrefix = '', serverVersion, settings, apiClient }) => {
+): FC<ShlinkWebComponentProps> => ({ serverVersion, apiClient, settings, routesPrefix = '' }) => {
   const features = useFeatures(serverVersion);
   const mainContent = useRef<ReactNode>();
   const [theStore, setStore] = useState<Store | undefined>();
 
-  // Set client on every re-render
-  apiClientRef = apiClient;
-
   useEffect(() => {
+    apiClientRef = apiClient;
     bottle.value('apiClientFactory', () => apiClientRef);
 
     // It's important to not try to resolve services before the API client has been registered, as many other services
@@ -43,8 +41,8 @@ export const createShlinkWebComponent = (
     setStore(store);
 
     // Load mercure info
-    store.dispatch(loadMercureInfo());
-  }, []);
+    store.dispatch(loadMercureInfo(settings));
+  }, [apiClient]);
 
   return !theStore ? <></> : (
     <Provider store={theStore}>

shlink-web-component/container/provideServices.ts

@@ -1,9 +1,8 @@
 import type Bottle from 'bottlejs';
 import { Main } from '../Main';
-import type { ConnectDecorator } from './index';
 import { setUpStore } from './store';
 
-export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
+export const provideServices = (bottle: Bottle) => {
   bottle.serviceFactory(
     'Main',
     Main,
@@ -19,7 +18,6 @@ export const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
     'EditShortUrl',
     'ManageDomains',
   );
-  bottle.decorator('Main', connect(null, ['loadMercureInfo']));
 
   bottle.factory('store', setUpStore);
 };

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

@@ -1,6 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { ShlinkApiClient, ShlinkMercureInfo } from '../../api-contract';
 import { createAsyncThunk } from '../../utils/redux';
+import type { Settings } from '../../utils/settings';
 
 const REDUCER_PREFIX = 'shlink/mercure';
 
@@ -18,15 +19,13 @@ const initialState: MercureInfo = {
 export const mercureInfoReducerCreator = (apiClientFactory: () => 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');
-    // }
+    ({ realTimeUpdates }: Settings): Promise<ShlinkMercureInfo> => {
+      if (realTimeUpdates && !realTimeUpdates.enabled) {
+        throw new Error('Real time updates not enabled');
+      }
 
-      apiClientFactory().mercureInfo()
-    ,
+      return apiClientFactory().mercureInfo();
+    },
   );
 
   const { reducer } = createSlice({