Merge pull request #734 from acelaya-forks/feature/more-rtk

Feature/more rtk

src/container/store.ts

@@ -18,7 +18,8 @@ export const setUpStore = (container: IContainer) => configureStore({
   devTools: !isProduction,
   reducer: reducer(container),
   preloadedState,
-  middleware: (defaultMiddlewaresIncludingReduxThunk) => defaultMiddlewaresIncludingReduxThunk(
+  middleware: (defaultMiddlewaresIncludingReduxThunk) =>
-    { immutableCheck: false, serializableCheck: false }, // State is too big for these
+    defaultMiddlewaresIncludingReduxThunk({ immutableCheck: false, serializableCheck: false })// State is too big for these
-  ).concat(save(localStorageConfig)),
+      .prepend(container.selectServerListener.middleware)
+      .concat(save(localStorageConfig)),
 });

src/reducers/index.ts

@@ -1,21 +1,19 @@
 import { IContainer } from 'bottlejs';
-import { combineReducers } from 'redux';
+import { combineReducers } from '@reduxjs/toolkit';
 import { serversReducer } from '../servers/reducers/servers';
-import selectedServerReducer from '../servers/reducers/selectedServer';
 import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
 import tagVisitsReducer from '../visits/reducers/tagVisits';
 import domainVisitsReducer from '../visits/reducers/domainVisits';
 import orphanVisitsReducer from '../visits/reducers/orphanVisits';
 import nonOrphanVisitsReducer from '../visits/reducers/nonOrphanVisits';
 import { settingsReducer } from '../settings/reducers/settings';
-import visitsOverviewReducer from '../visits/reducers/visitsOverview';
 import { appUpdatesReducer } from '../app/reducers/appUpdates';
 import { sidebarReducer } from '../common/reducers/sidebar';
 import { ShlinkState } from '../container/types';
 
 export default (container: IContainer) => combineReducers<ShlinkState>({
   servers: serversReducer,
-  selectedServer: selectedServerReducer,
+  selectedServer: container.selectedServerReducer,
   shortUrlsList: container.shortUrlsListReducer,
   shortUrlCreation: container.shortUrlCreationReducer,
   shortUrlDeletion: container.shortUrlDeletionReducer,
@@ -32,7 +30,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   mercureInfo: container.mercureInfoReducer,
   settings: settingsReducer,
   domainsList: container.domainsListReducer,
-  visitsOverview: visitsOverviewReducer,
+  visitsOverview: container.visitsOverviewReducer,
   appUpdated: appUpdatesReducer,
   sidebar: sidebarReducer,
 });

src/servers/reducers/remoteServers.ts

@@ -1,18 +1,21 @@
 import { pipe, prop } from 'ramda';
 import { AxiosInstance } from 'axios';
-import { Dispatch } from 'redux';
 import pack from '../../../package.json';
 import { hasServerData, ServerData } from '../data';
 import { createServers } from './servers';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 
 const responseToServersList = pipe(
   prop<any, any>('data'),
   (data: any): ServerData[] => (Array.isArray(data) ? data.filter(hasServerData) : []),
 );
 
-export const fetchServers = ({ get }: AxiosInstance) => () => async (dispatch: Dispatch) => {
+export const fetchServers = ({ get }: AxiosInstance) => createAsyncThunk(
-  const resp = await get(`${pack.homepage}/servers.json`);
+  'shlink/remoteServers/fetchServers',
-  const remoteList = responseToServersList(resp);
+  async (_: void, { dispatch }): Promise<void> => {
+    const resp = await get(`${pack.homepage}/servers.json`);
+    const result = responseToServersList(resp);
 
-  dispatch(createServers(remoteList));
+    dispatch(createServers(result));
-};
+  },
+);

src/servers/reducers/selectedServer.ts

@@ -1,22 +1,17 @@
-import { PayloadAction } from '@reduxjs/toolkit';
+import { createAction, createListenerMiddleware, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { identity, memoizeWith, pipe } from 'ramda';
-import { Action, Dispatch } from 'redux';
 import { versionToPrintable, versionToSemVer as toSemVer } from '../../utils/helpers/version';
-import { SelectedServer } from '../data';
+import { isReachableServer, SelectedServer } from '../data';
-import { GetState } from '../../container/types';
 import { ShlinkHealth } from '../../api/types';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
+import { createAsyncThunk } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
-export const SELECT_SERVER = 'shlink/selectedServer/SELECT_SERVER';
+const REDUCER_PREFIX = 'shlink/selectedServer';
-export const RESET_SELECTED_SERVER = 'shlink/selectedServer/RESET_SELECTED_SERVER';
 
 export const MIN_FALLBACK_VERSION = '1.0.0';
 export const MAX_FALLBACK_VERSION = '999.999.999';
 export const LATEST_VERSION_CONSTRAINT = 'latest';
 
-export type SelectServerAction = PayloadAction<SelectedServer>;
-
 const versionToSemVer = pipe(
   (version: string) => (version === LATEST_VERSION_CONSTRAINT ? MAX_FALLBACK_VERSION : version),
   toSemVer(MIN_FALLBACK_VERSION),
@@ -32,53 +27,59 @@ const getServerVersion = memoizeWith(
 
 const initialState: SelectedServer = null;
 
-export default buildReducer<SelectedServer, SelectServerAction>({
+export const resetSelectedServer = createAction<void>(`${REDUCER_PREFIX}/resetSelectedServer`);
-  [RESET_SELECTED_SERVER]: () => initialState,
-  [SELECT_SERVER]: (_, { payload }) => payload,
-}, initialState);
 
-export const resetSelectedServer = buildActionCreator(RESET_SELECTED_SERVER);
+export const selectServer = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
+  `${REDUCER_PREFIX}/selectServer`,
+  async (serverId: string, { dispatch, getState }): Promise<SelectedServer> => {
+    dispatch(resetSelectedServer());
 
-export const selectServer = (
+    const { servers } = getState();
-  buildShlinkApiClient: ShlinkApiClientBuilder,
+    const selectedServer = servers[serverId];
-  loadMercureInfo: () => Action,
-) => (
-  serverId: string,
-) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  dispatch(resetSelectedServer());
 
-  const { servers } = getState();
+    if (!selectedServer) {
-  const selectedServer = servers[serverId];
+      return { serverNotFound: true };
+    }
 
-  if (!selectedServer) {
+    try {
-    dispatch<SelectServerAction>({
+      const { health } = buildShlinkApiClient(selectedServer);
-      type: SELECT_SERVER,
+      const { version, printableVersion } = await getServerVersion(serverId, health);
-      payload: { serverNotFound: true },
-    });
 
-    return;
+      return {
-  }
-
-  try {
-    const { health } = buildShlinkApiClient(selectedServer);
-    const { version, printableVersion } = await getServerVersion(serverId, health);
-
-    dispatch<SelectServerAction>({
-      type: SELECT_SERVER,
-      payload: {
         ...selectedServer,
         version,
         printableVersion,
-      },
+      };
-    });
+    } catch (e) {
-    dispatch(loadMercureInfo());
+      return { ...selectedServer, serverNotReachable: true };
-  } catch (e) {
+    }
-    dispatch<SelectServerAction>({
+  },
-      type: SELECT_SERVER,
+);
-      payload: { ...selectedServer, serverNotReachable: true },
+
-    });
+type SelectServerThunk = ReturnType<typeof selectServer>;
-  }
+
+export const selectServerListener = (
+  selectServerThunk: SelectServerThunk,
+  loadMercureInfo: () => PayloadAction<any>, // TODO Consider setting actual type, if relevant
+) => {
+  const listener = createListenerMiddleware();
+
+  listener.startListening({
+    actionCreator: selectServerThunk.fulfilled,
+    effect: ({ payload }, { dispatch }) => {
+      isReachableServer(payload) && dispatch(loadMercureInfo());
+    },
+  });
+
+  return listener;
 };
+
+export const selectedServerReducerCreator = (selectServerThunk: SelectServerThunk) => createSlice({
+  name: REDUCER_PREFIX,
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(resetSelectedServer, () => initialState);
+    builder.addCase(selectServerThunk.fulfilled, (_, { payload }) => payload as any);
+  },
+});

src/servers/services/provideServices.ts

@@ -1,3 +1,4 @@
+import { prop } from 'ramda';
 import Bottle from 'bottlejs';
 import { CreateServer } from '../CreateServer';
 import { ServersDropdown } from '../ServersDropdown';
@@ -5,7 +6,12 @@ import { DeleteServerModal } from '../DeleteServerModal';
 import { DeleteServerButton } from '../DeleteServerButton';
 import { EditServer } from '../EditServer';
 import { ImportServersBtn } from '../helpers/ImportServersBtn';
-import { resetSelectedServer, selectServer } from '../reducers/selectedServer';
+import {
+  resetSelectedServer,
+  selectedServerReducerCreator,
+  selectServer,
+  selectServerListener,
+} from '../reducers/selectedServer';
 import { createServers, deleteServer, editServer, setAutoConnect } from '../reducers/servers';
 import { fetchServers } from '../reducers/remoteServers';
 import { ServerError } from '../helpers/ServerError';
@@ -77,6 +83,11 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('fetchServers', fetchServers, 'axios');
 
   bottle.serviceFactory('resetSelectedServer', () => resetSelectedServer);
+
+  // Reducers
+  bottle.serviceFactory('selectServerListener', selectServerListener, 'selectServer', 'loadMercureInfo');
+  bottle.serviceFactory('selectedServerReducerCreator', selectedServerReducerCreator, 'selectServer');
+  bottle.serviceFactory('selectedServerReducer', prop('reducer'), 'selectedServerReducerCreator');
 };
 
 export default provideServices;

src/visits/reducers/visitCreation.ts

@@ -1,13 +1,11 @@
 import { createAction, PayloadAction } from '@reduxjs/toolkit';
 import { CreateVisit } from '../types';
 
-const CREATE_VISITS = 'shlink/visitCreation/CREATE_VISITS';
-
 export type CreateVisitsAction = PayloadAction<{
   createdVisits: CreateVisit[];
 }>;
 
 export const createNewVisits = createAction(
-  CREATE_VISITS,
+  'shlink/visitCreation/createNewVisits',
   (createdVisits: CreateVisit[]) => ({ payload: { createdVisits } }),
 );

src/visits/reducers/visitsOverview.ts

@@ -1,14 +1,11 @@
-import { Action, Dispatch } from 'redux';
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ShlinkVisitsOverview } from '../../api/types';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
+import { createAsyncThunk } from '../../utils/helpers/redux';
-import { buildReducer } from '../../utils/helpers/redux';
 import { groupNewVisitsByType } from '../types/helpers';
-import { createNewVisits, CreateVisitsAction } from './visitCreation';
+import { createNewVisits } from './visitCreation';
 
-export const GET_OVERVIEW_START = 'shlink/visitsOverview/GET_OVERVIEW_START';
+const REDUCER_PREFIX = 'shlink/visitsOverview';
-export const GET_OVERVIEW_ERROR = 'shlink/visitsOverview/GET_OVERVIEW_ERROR';
-export const GET_OVERVIEW = 'shlink/visitsOverview/GET_OVERVIEW';
 
 export interface VisitsOverview {
   visitsCount: number;
@@ -17,7 +14,7 @@ export interface VisitsOverview {
   error: boolean;
 }
 
-export type GetVisitsOverviewAction = ShlinkVisitsOverview & Action<string>;
+export type GetVisitsOverviewAction = PayloadAction<ShlinkVisitsOverview>;
 
 const initialState: VisitsOverview = {
   visitsCount: 0,
@@ -26,33 +23,30 @@ const initialState: VisitsOverview = {
   error: false,
 };
 
-export default buildReducer<VisitsOverview, GetVisitsOverviewAction & CreateVisitsAction>({
+export const loadVisitsOverview = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
-  [GET_OVERVIEW_START]: () => ({ ...initialState, loading: true }),
+  `${REDUCER_PREFIX}/loadVisitsOverview`,
-  [GET_OVERVIEW_ERROR]: () => ({ ...initialState, error: true }),
+  (_: void, { getState }): Promise<ShlinkVisitsOverview> => buildShlinkApiClient(getState).getVisitsOverview(),
-  [GET_OVERVIEW]: (_, { visitsCount, orphanVisitsCount }) => ({ ...initialState, visitsCount, orphanVisitsCount }),
+);
-  [createNewVisits.toString()]: ({ visitsCount, orphanVisitsCount = 0, ...rest }, { payload }) => {
-    const { regularVisits, orphanVisits } = groupNewVisitsByType(payload.createdVisits);
 
-    return {
+export const visitsOverviewReducerCreator = (
-      ...rest,
+  loadVisitsOverviewThunk: ReturnType<typeof loadVisitsOverview>,
-      visitsCount: visitsCount + regularVisits.length,
+) => createSlice({
-      orphanVisitsCount: orphanVisitsCount + orphanVisits.length,
+  name: REDUCER_PREFIX,
-    };
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(loadVisitsOverviewThunk.pending, () => ({ ...initialState, loading: true }));
+    builder.addCase(loadVisitsOverviewThunk.rejected, () => ({ ...initialState, error: true }));
+    builder.addCase(loadVisitsOverviewThunk.fulfilled, (_, { payload }) => ({ ...initialState, ...payload }));
+
+    builder.addCase(createNewVisits, ({ visitsCount, orphanVisitsCount = 0, ...rest }, { payload }) => {
+      const { createdVisits } = payload;
+      const { regularVisits, orphanVisits } = groupNewVisitsByType(createdVisits);
+      return {
+        ...rest,
+        visitsCount: visitsCount + regularVisits.length,
+        orphanVisitsCount: orphanVisitsCount + orphanVisits.length,
+      };
+    });
   },
-}, initialState);
+});
-
-export const loadVisitsOverview = (buildShlinkApiClient: ShlinkApiClientBuilder) => () => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
-  dispatch({ type: GET_OVERVIEW_START });
-
-  try {
-    const { getVisitsOverview } = buildShlinkApiClient(getState);
-    const result = await getVisitsOverview();
-
-    dispatch({ type: GET_OVERVIEW, ...result });
-  } catch (e) {
-    dispatch({ type: GET_OVERVIEW_ERROR });
-  }
-};

src/visits/services/provideServices.ts

@@ -1,4 +1,5 @@
 import Bottle from 'bottlejs';
+import { prop } from 'ramda';
 import { MapModal } from '../helpers/MapModal';
 import { createNewVisits } from '../reducers/visitCreation';
 import { ShortUrlVisits } from '../ShortUrlVisits';
@@ -11,7 +12,7 @@ import { cancelGetDomainVisits, getDomainVisits } from '../reducers/domainVisits
 import { cancelGetOrphanVisits, getOrphanVisits } from '../reducers/orphanVisits';
 import { cancelGetNonOrphanVisits, getNonOrphanVisits } from '../reducers/nonOrphanVisits';
 import { ConnectDecorator } from '../../container/types';
-import { loadVisitsOverview } from '../reducers/visitsOverview';
+import { loadVisitsOverview, visitsOverviewReducerCreator } from '../reducers/visitsOverview';
 import * as visitsParser from './VisitsParser';
 import { DomainVisits } from '../DomainVisits';
 
@@ -70,6 +71,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('createNewVisits', () => createNewVisits);
   bottle.serviceFactory('loadVisitsOverview', loadVisitsOverview, 'buildShlinkApiClient');
+
+  // Reducers
+  bottle.serviceFactory('visitsOverviewReducerCreator', visitsOverviewReducerCreator, 'loadVisitsOverview');
+  bottle.serviceFactory('visitsOverviewReducer', prop('reducer'), 'visitsOverviewReducerCreator');
 };
 
 export default provideServices;

test/servers/reducers/remoteServers.test.ts

@@ -7,9 +7,9 @@ describe('remoteServersReducer', () => {
   afterEach(jest.clearAllMocks);
 
   describe('fetchServers', () => {
+    const dispatch = jest.fn();
     const get = jest.fn();
     const axios = Mock.of<AxiosInstance>({ get });
-    const dispatch = jest.fn();
 
     it.each([
       [
@@ -84,10 +84,17 @@ describe('remoteServersReducer', () => {
       [{}, {}],
     ])('tries to fetch servers from remote', async (mockedValue, expectedNewServers) => {
       get.mockResolvedValue(mockedValue);
+      const doFetchServers = fetchServers(axios);
 
-      await fetchServers(axios)()(dispatch);
+      await doFetchServers()(dispatch, jest.fn(), {});
 
-      expect(dispatch).toHaveBeenCalledWith({ type: createServers.toString(), payload: expectedNewServers });
+      expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
+        type: doFetchServers.pending.toString(),
+      }));
+      expect(dispatch).toHaveBeenNthCalledWith(2, { type: createServers.toString(), payload: expectedNewServers });
+      expect(dispatch).toHaveBeenNthCalledWith(3, expect.objectContaining({
+        type: doFetchServers.fulfilled.toString(),
+      }));
       expect(get).toHaveBeenCalledTimes(1);
     });
   });

test/servers/reducers/selectedServer.test.ts

@@ -1,31 +1,40 @@
 import { v4 as uuid } from 'uuid';
 import { Mock } from 'ts-mockery';
-import reducer, {
+import {
-  selectServer,
+  selectServer as selectServerCreator,
   resetSelectedServer,
-  RESET_SELECTED_SERVER,
+  selectedServerReducerCreator,
-  SELECT_SERVER,
+  selectServerListener,
   MAX_FALLBACK_VERSION,
   MIN_FALLBACK_VERSION,
 } from '../../../src/servers/reducers/selectedServer';
 import { ShlinkState } from '../../../src/container/types';
-import { NonReachableServer, NotFoundServer, RegularServer } from '../../../src/servers/data';
+import { NonReachableServer, NotFoundServer, ReachableServer, RegularServer } from '../../../src/servers/data';
+import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 
 describe('selectedServerReducer', () => {
+  const dispatch = jest.fn();
+  const health = jest.fn();
+  const buildApiClient = jest.fn().mockReturnValue(Mock.of<ShlinkApiClient>({ health }));
+  const selectServer = selectServerCreator(buildApiClient);
+  const { reducer } = selectedServerReducerCreator(selectServer);
+
+  afterEach(jest.clearAllMocks);
+
   describe('reducer', () => {
     it('returns default when action is RESET_SELECTED_SERVER', () =>
-      expect(reducer(null, { type: RESET_SELECTED_SERVER, payload: null })).toBeNull());
+      expect(reducer(null, { type: resetSelectedServer.toString(), payload: null })).toBeNull());
 
     it('returns selected server when action is SELECT_SERVER', () => {
       const payload = Mock.of<RegularServer>({ id: 'abc123' });
 
-      expect(reducer(null, { type: SELECT_SERVER, payload })).toEqual(payload);
+      expect(reducer(null, { type: selectServer.fulfilled.toString(), payload })).toEqual(payload);
     });
   });
 
   describe('resetSelectedServer', () => {
     it('returns proper action', () => {
-      expect(resetSelectedServer()).toEqual({ type: RESET_SELECTED_SERVER });
+      expect(resetSelectedServer()).toEqual({ type: resetSelectedServer.toString() });
     });
   });
 
@@ -35,14 +44,6 @@ describe('selectedServerReducer', () => {
     };
     const version = '1.19.0';
     const createGetStateMock = (id: string) => jest.fn().mockReturnValue({ servers: { [id]: selectedServer } });
-    const apiClientMock = {
-      health: jest.fn(),
-    };
-    const buildApiClient = jest.fn().mockReturnValue(apiClientMock);
-    const dispatch = jest.fn();
-    const loadMercureInfo = jest.fn();
-
-    afterEach(jest.clearAllMocks);
 
     it.each([
       [version, version, `v${version}`],
@@ -57,21 +58,24 @@ describe('selectedServerReducer', () => {
         printableVersion: expectedPrintableVersion,
       };
 
-      apiClientMock.health.mockResolvedValue({ version: serverVersion });
+      health.mockResolvedValue({ version: serverVersion });
 
-      await selectServer(buildApiClient, loadMercureInfo)(id)(dispatch, getState);
+      await selectServer(id)(dispatch, getState, {});
 
       expect(dispatch).toHaveBeenCalledTimes(3);
-      expect(dispatch).toHaveBeenNthCalledWith(1, { type: RESET_SELECTED_SERVER });
+      expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({ type: selectServer.pending.toString() }));
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, payload: expectedSelectedServer });
+      expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({ type: resetSelectedServer.toString() }));
-      expect(loadMercureInfo).toHaveBeenCalledTimes(1);
+      expect(dispatch).toHaveBeenNthCalledWith(3, expect.objectContaining({
+        type: selectServer.fulfilled.toString(),
+        payload: expectedSelectedServer,
+      }));
     });
 
     it('invokes dependencies', async () => {
       const id = uuid();
       const getState = createGetStateMock(id);
 
-      await selectServer(buildApiClient, loadMercureInfo)(id)(jest.fn(), getState);
+      await selectServer(id)(jest.fn(), getState, {});
 
       expect(getState).toHaveBeenCalledTimes(1);
       expect(buildApiClient).toHaveBeenCalledTimes(1);
@@ -82,13 +86,15 @@ describe('selectedServerReducer', () => {
       const getState = createGetStateMock(id);
       const expectedSelectedServer = Mock.of<NonReachableServer>({ ...selectedServer, serverNotReachable: true });
 
-      apiClientMock.health.mockRejectedValue({});
+      health.mockRejectedValue({});
 
-      await selectServer(buildApiClient, loadMercureInfo)(id)(dispatch, getState);
+      await selectServer(id)(dispatch, getState, {});
 
-      expect(apiClientMock.health).toHaveBeenCalled();
+      expect(health).toHaveBeenCalled();
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, payload: expectedSelectedServer });
+      expect(dispatch).toHaveBeenNthCalledWith(3, expect.objectContaining({
-      expect(loadMercureInfo).not.toHaveBeenCalled();
+        type: selectServer.fulfilled.toString(),
+        payload: expectedSelectedServer,
+      }));
     });
 
     it('dispatches error when server is not found', async () => {
@@ -96,11 +102,43 @@ describe('selectedServerReducer', () => {
       const getState = jest.fn(() => Mock.of<ShlinkState>({ servers: {} }));
       const expectedSelectedServer: NotFoundServer = { serverNotFound: true };
 
-      await selectServer(buildApiClient, loadMercureInfo)(id)(dispatch, getState);
+      await selectServer(id)(dispatch, getState, {});
 
       expect(getState).toHaveBeenCalled();
-      expect(apiClientMock.health).not.toHaveBeenCalled();
+      expect(health).not.toHaveBeenCalled();
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: SELECT_SERVER, payload: expectedSelectedServer });
+      expect(dispatch).toHaveBeenNthCalledWith(3, expect.objectContaining({
+        type: selectServer.fulfilled.toString(),
+        payload: expectedSelectedServer,
+      }));
+    });
+  });
+
+  describe('selectServerListener', () => {
+    const getState = jest.fn(() => ({}));
+    const loadMercureInfo = jest.fn();
+    const { middleware } = selectServerListener(selectServer, loadMercureInfo);
+
+    it.each([
+      [Mock.of<ReachableServer>({ version: '1.2.3' }), 1],
+      [Mock.of<NotFoundServer>({ serverNotFound: true }), 0],
+      [Mock.of<NonReachableServer>({ serverNotReachable: true }), 0],
+    ])('dispatches loadMercureInfo when provided server is reachable', (payload, expectedCalls) => {
+      middleware({ dispatch, getState })(jest.fn())({
+        payload,
+        type: selectServer.fulfilled.toString(),
+      });
+
+      expect(dispatch).toHaveBeenCalledTimes(expectedCalls);
+      expect(loadMercureInfo).toHaveBeenCalledTimes(expectedCalls);
+    });
+
+    it('does not dispatch loadMercureInfo when action is not of the proper type', () => {
+      middleware({ dispatch, getState })(jest.fn())({
+        payload: Mock.of<ReachableServer>({ version: '1.2.3' }),
+        type: 'something_else',
+      });
+
+      expect(dispatch).not.toHaveBeenCalled();
       expect(loadMercureInfo).not.toHaveBeenCalled();
     });
   });

test/visits/reducers/visitsOverview.test.ts

@@ -1,11 +1,9 @@
 import { Mock } from 'ts-mockery';
-import reducer, {
+import {
-  GET_OVERVIEW_START,
-  GET_OVERVIEW_ERROR,
-  GET_OVERVIEW,
   GetVisitsOverviewAction,
   VisitsOverview,
-  loadVisitsOverview,
+  loadVisitsOverview as loadVisitsOverviewCreator,
+  visitsOverviewReducerCreator,
 } from '../../../src/visits/reducers/visitsOverview';
 import { createNewVisits, CreateVisitsAction } from '../../../src/visits/reducers/visitCreation';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
@@ -14,29 +12,42 @@ import { ShlinkState } from '../../../src/container/types';
 import { CreateVisit, OrphanVisit, Visit } from '../../../src/visits/types';
 
 describe('visitsOverviewReducer', () => {
+  const getVisitsOverview = jest.fn();
+  const buildApiClientMock = () => Mock.of<ShlinkApiClient>({ getVisitsOverview });
+  const loadVisitsOverview = loadVisitsOverviewCreator(buildApiClientMock);
+  const { reducer } = visitsOverviewReducerCreator(loadVisitsOverview);
+
+  beforeEach(jest.clearAllMocks);
+
   describe('reducer', () => {
     const action = (type: string) =>
       Mock.of<GetVisitsOverviewAction>({ type }) as GetVisitsOverviewAction & CreateVisitsAction;
     const state = (payload: Partial<VisitsOverview> = {}) => Mock.of<VisitsOverview>(payload);
 
     it('returns loading on GET_OVERVIEW_START', () => {
-      const { loading } = reducer(state({ loading: false, error: false }), action(GET_OVERVIEW_START));
+      const { loading } = reducer(
+        state({ loading: false, error: false }),
+        action(loadVisitsOverview.pending.toString()),
+      );
 
       expect(loading).toEqual(true);
     });
 
     it('stops loading and returns error on GET_OVERVIEW_ERROR', () => {
-      const { loading, error } = reducer(state({ loading: true, error: false }), action(GET_OVERVIEW_ERROR));
+      const { loading, error } = reducer(
+        state({ loading: true, error: false }),
+        action(loadVisitsOverview.rejected.toString()),
+      );
 
       expect(loading).toEqual(false);
       expect(error).toEqual(true);
     });
 
     it('return visits overview on GET_OVERVIEW', () => {
-      const { loading, error, visitsCount } = reducer(
+      const { loading, error, visitsCount } = reducer(state({ loading: true, error: false }), {
-        state({ loading: true, error: false }),
+        type: loadVisitsOverview.fulfilled.toString(),
-        { type: GET_OVERVIEW, visitsCount: 100 } as unknown as GetVisitsOverviewAction & CreateVisitsAction,
+        payload: { visitsCount: 100 },
-      );
+      });
 
       expect(loading).toEqual(false);
       expect(error).toEqual(false);
@@ -76,35 +87,41 @@ describe('visitsOverviewReducer', () => {
   });
 
   describe('loadVisitsOverview', () => {
-    const buildApiClientMock = (returned: Promise<ShlinkVisitsOverview>) => Mock.of<ShlinkApiClient>({
-      getVisitsOverview: jest.fn(async () => returned),
-    });
     const dispatchMock = jest.fn();
     const getState = () => Mock.of<ShlinkState>();
 
     beforeEach(() => dispatchMock.mockReset());
 
     it('dispatches start and error when promise is rejected', async () => {
-      const ShlinkApiClient = buildApiClientMock(Promise.reject());
+      getVisitsOverview.mockRejectedValue(undefined);
 
-      await loadVisitsOverview(() => ShlinkApiClient)()(dispatchMock, getState);
+      await loadVisitsOverview()(dispatchMock, getState, {});
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
-      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_OVERVIEW_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_OVERVIEW_ERROR });
+        type: loadVisitsOverview.pending.toString(),
-      expect(ShlinkApiClient.getVisitsOverview).toHaveBeenCalledTimes(1);
+      }));
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: loadVisitsOverview.rejected.toString(),
+      }));
+      expect(getVisitsOverview).toHaveBeenCalledTimes(1);
     });
 
     it('dispatches start and success when promise is resolved', async () => {
       const resolvedOverview = Mock.of<ShlinkVisitsOverview>({ visitsCount: 50 });
-      const shlinkApiClient = buildApiClientMock(Promise.resolve(resolvedOverview));
+      getVisitsOverview.mockResolvedValue(resolvedOverview);
 
-      await loadVisitsOverview(() => shlinkApiClient)()(dispatchMock, getState);
+      await loadVisitsOverview()(dispatchMock, getState, {});
 
       expect(dispatchMock).toHaveBeenCalledTimes(2);
-      expect(dispatchMock).toHaveBeenNthCalledWith(1, { type: GET_OVERVIEW_START });
+      expect(dispatchMock).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, { type: GET_OVERVIEW, visitsCount: 50 });
+        type: loadVisitsOverview.pending.toString(),
-      expect(shlinkApiClient.getVisitsOverview).toHaveBeenCalledTimes(1);
+      }));
+      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: loadVisitsOverview.fulfilled.toString(),
+        payload: { visitsCount: 50 },
+      }));
+      expect(getVisitsOverview).toHaveBeenCalledTimes(1);
     });
   });
 });