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

Feature/more rtk

src/api/services/ShlinkApiClientBuilder.ts

@@ -1,6 +1,5 @@
 import { AxiosInstance } from 'axios';
-import { prop } from 'ramda';
+import { hasServerData, ServerWithId } from '../../servers/data';
-import { hasServerData, SelectedServer, ServerWithId } from '../../servers/data';
 import { GetState } from '../../container/types';
 import { ShlinkApiClient } from './ShlinkApiClient';
 
@@ -8,22 +7,19 @@ const apiClients: Record<string, ShlinkApiClient> = {};
 
 const isGetState = (getStateOrSelectedServer: GetState | ServerWithId): getStateOrSelectedServer is GetState =>
   typeof getStateOrSelectedServer === 'function';
-const getSelectedServerFromState = (getState: GetState): SelectedServer => prop('selectedServer', getState());
+const getSelectedServerFromState = (getState: GetState): ServerWithId => {
-
+  const { selectedServer } = getState();
-export type ShlinkApiClientBuilder = (getStateOrSelectedServer: GetState | ServerWithId) => ShlinkApiClient;
+  if (!hasServerData(selectedServer)) {
-
-export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuilder => (
-  getStateOrSelectedServer: GetState | ServerWithId,
-) => {
-  const server = isGetState(getStateOrSelectedServer)
-    ? getSelectedServerFromState(getStateOrSelectedServer)
-    : getStateOrSelectedServer;
-
-  if (!hasServerData(server)) {
     throw new Error('There\'s no selected server or it is not found');
   }
 
-  const { url, apiKey } = server;
+  return selectedServer;
+};
+
+export const buildShlinkApiClient = (axios: AxiosInstance) => (getStateOrSelectedServer: GetState | ServerWithId) => {
+  const { url, apiKey } = isGetState(getStateOrSelectedServer)
+    ? getSelectedServerFromState(getStateOrSelectedServer)
+    : getStateOrSelectedServer;
   const clientKey = `${url}_${apiKey}`;
 
   if (!apiClients[clientKey]) {
@@ -32,3 +28,5 @@ export const buildShlinkApiClient = (axios: AxiosInstance): ShlinkApiClientBuild
 
   return apiClients[clientKey];
 };
+
+export type ShlinkApiClientBuilder = ReturnType<typeof buildShlinkApiClient>;

src/app/reducers/appUpdates.ts

@@ -1,16 +1,14 @@
-import { Action } from 'redux';
+import { createSlice } from '@reduxjs/toolkit';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 
-export const APP_UPDATE_AVAILABLE = 'shlink/appUpdates/APP_UPDATE_AVAILABLE';
+const { actions, reducer } = createSlice({
-export const RESET_APP_UPDATE = 'shlink/appUpdates/RESET_APP_UPDATE';
+  name: 'appUpdatesReducer',
+  initialState: false,
+  reducers: {
+    appUpdateAvailable: () => true,
+    resetAppUpdate: () => false,
+  },
+});
 
-const initialState = false;
+export const { appUpdateAvailable, resetAppUpdate } = actions;
 
-export default buildReducer<boolean, Action<string>>({
+export const appUpdatesReducer = reducer;
-  [APP_UPDATE_AVAILABLE]: () => true,
-  [RESET_APP_UPDATE]: () => false,
-}, initialState);
-
-export const appUpdateAvailable = buildActionCreator(APP_UPDATE_AVAILABLE);
-
-export const resetAppUpdate = buildActionCreator(RESET_APP_UPDATE);

src/common/reducers/sidebar.ts

@@ -1,25 +1,22 @@
-import { Action } from 'redux';
+import { createSlice } from '@reduxjs/toolkit';
-import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-
-export const SIDEBAR_PRESENT = 'shlink/common/SIDEBAR_PRESENT';
-export const SIDEBAR_NOT_PRESENT = 'shlink/common/SIDEBAR_NOT_PRESENT';
 
 export interface Sidebar {
   sidebarPresent: boolean;
 }
 
-type SidebarRenderedAction = Action<string>;
-type SidebarNotRenderedAction = Action<string>;
-
 const initialState: Sidebar = {
   sidebarPresent: false,
 };
 
-export default buildReducer<Sidebar, SidebarRenderedAction & SidebarNotRenderedAction>({
+const { actions, reducer } = createSlice({
-  [SIDEBAR_PRESENT]: () => ({ sidebarPresent: true }),
+  name: 'sidebarReducer',
-  [SIDEBAR_NOT_PRESENT]: () => ({ sidebarPresent: false }),
+  initialState,
-}, initialState);
+  reducers: {
+    sidebarPresent: () => ({ sidebarPresent: true }),
+    sidebarNotPresent: () => ({ sidebarPresent: false }),
+  },
+});
 
-export const sidebarPresent = buildActionCreator(SIDEBAR_PRESENT);
+export const { sidebarPresent, sidebarNotPresent } = actions;
 
-export const sidebarNotPresent = buildActionCreator(SIDEBAR_NOT_PRESENT);
+export const sidebarReducer = reducer;

src/mercure/reducers/mercureInfo.ts

@@ -1,52 +1,44 @@
-import { Action, Dispatch } from 'redux';
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { ShlinkMercureInfo } from '../../api/types';
-import { GetState } from '../../container/types';
+import { ShlinkState } from '../../container/types';
-import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 
-export const GET_MERCURE_INFO_START = 'shlink/mercure/GET_MERCURE_INFO_START';
+const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
-export const GET_MERCURE_INFO_ERROR = 'shlink/mercure/GET_MERCURE_INFO_ERROR';
-export const GET_MERCURE_INFO = 'shlink/mercure/GET_MERCURE_INFO';
 
-export interface MercureInfo {
+export interface MercureInfo extends Partial<ShlinkMercureInfo> {
-  token?: string;
-  mercureHubUrl?: string;
   interval?: number;
   loading: boolean;
   error: boolean;
 }
 
-export type GetMercureInfoAction = Action<string> & ShlinkMercureInfo & { interval?: number };
-
 const initialState: MercureInfo = {
   loading: true,
   error: false,
 };
 
-export default buildReducer<MercureInfo, GetMercureInfoAction>({
+export const mercureInfoReducerCreator = (buildShlinkApiClient: ShlinkApiClientBuilder) => {
-  [GET_MERCURE_INFO_START]: (state) => ({ ...state, loading: true, error: false }),
+  const loadMercureInfo = createAsyncThunk<ShlinkMercureInfo, void, { state: ShlinkState }>(
-  [GET_MERCURE_INFO_ERROR]: (state) => ({ ...state, loading: false, error: true }),
+    GET_MERCURE_INFO,
-  [GET_MERCURE_INFO]: (_, action) => ({ ...action, loading: false, error: false }),
+    async (_, { getState }) => {
-}, initialState);
+      const { settings } = getState();
+      if (!settings.realTimeUpdates.enabled) {
+        throw new Error('Real time updates not enabled');
+      }
 
-export const loadMercureInfo = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
+      return buildShlinkApiClient(getState).mercureInfo();
-  () => async (dispatch: Dispatch, getState: GetState) => {
+    },
-    dispatch({ type: GET_MERCURE_INFO_START });
+  );
 
-    const { settings } = getState();
+  const { reducer } = createSlice({
-    const { mercureInfo } = buildShlinkApiClient(getState);
+    name: 'mercureInfoReducer',
+    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 }));
+    },
+  });
 
-    if (!settings.realTimeUpdates.enabled) {
+  return { loadMercureInfo, reducer };
-      dispatch({ type: GET_MERCURE_INFO_ERROR });
+};
-
-      return;
-    }
-
-    try {
-      const info = await mercureInfo();
-
-      dispatch<GetMercureInfoAction>({ type: GET_MERCURE_INFO, interval: settings.realTimeUpdates.interval, ...info });
-    } catch (e) {
-      dispatch({ type: GET_MERCURE_INFO_ERROR });
-    }
-  };

src/mercure/services/provideServices.ts

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

src/reducers/index.ts

@@ -15,11 +15,10 @@ import shortUrlDetailReducer from '../short-urls/reducers/shortUrlDetail';
 import tagsListReducer from '../tags/reducers/tagsList';
 import tagDeleteReducer from '../tags/reducers/tagDelete';
 import tagEditReducer from '../tags/reducers/tagEdit';
-import mercureInfoReducer from '../mercure/reducers/mercureInfo';
 import settingsReducer from '../settings/reducers/settings';
 import visitsOverviewReducer from '../visits/reducers/visitsOverview';
-import appUpdatesReducer from '../app/reducers/appUpdates';
+import { appUpdatesReducer } from '../app/reducers/appUpdates';
-import sidebarReducer from '../common/reducers/sidebar';
+import { sidebarReducer } from '../common/reducers/sidebar';
 import { ShlinkState } from '../container/types';
 
 export default (container: IContainer) => combineReducers<ShlinkState>({
@@ -38,7 +37,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   tagsList: tagsListReducer,
   tagDelete: tagDeleteReducer,
   tagEdit: tagEditReducer,
-  mercureInfo: mercureInfoReducer,
+  mercureInfo: container.mercureInfoReducer,
   settings: settingsReducer,
   domainsList: container.domainsListReducer,
   visitsOverview: visitsOverviewReducer,

test/app/reducers/appUpdates.test.ts

@@ -1,30 +1,25 @@
-import reducer, {
+import { appUpdatesReducer, appUpdateAvailable, resetAppUpdate } from '../../../src/app/reducers/appUpdates';
-  APP_UPDATE_AVAILABLE,
-  RESET_APP_UPDATE,
-  appUpdateAvailable,
-  resetAppUpdate,
-} from '../../../src/app/reducers/appUpdates';
 
 describe('appUpdatesReducer', () => {
   describe('reducer', () => {
     it('returns true on APP_UPDATE_AVAILABLE', () => {
-      expect(reducer(undefined, { type: APP_UPDATE_AVAILABLE })).toEqual(true);
+      expect(appUpdatesReducer(undefined, { type: appUpdateAvailable.toString() })).toEqual(true);
     });
 
     it('returns false on RESET_APP_UPDATE', () => {
-      expect(reducer(undefined, { type: RESET_APP_UPDATE })).toEqual(false);
+      expect(appUpdatesReducer(undefined, { type: resetAppUpdate.toString() })).toEqual(false);
     });
   });
 
   describe('appUpdateAvailable', () => {
     it('creates expected action', () => {
-      expect(appUpdateAvailable()).toEqual({ type: APP_UPDATE_AVAILABLE });
+      expect(appUpdateAvailable()).toEqual({ type: appUpdateAvailable.toString() });
     });
   });
 
   describe('resetAppUpdate', () => {
     it('creates expected action', () => {
-      expect(resetAppUpdate()).toEqual({ type: RESET_APP_UPDATE });
+      expect(resetAppUpdate()).toEqual({ type: resetAppUpdate.toString() });
     });
   });
 });

test/common/reducer/sidebar.test.ts

@@ -1,31 +1,24 @@
-import { Mock } from 'ts-mockery';
+import { sidebarReducer, sidebarNotPresent, sidebarPresent } from '../../../src/common/reducers/sidebar';
-import reducer, {
-  Sidebar,
-  SIDEBAR_NOT_PRESENT,
-  SIDEBAR_PRESENT,
-  sidebarNotPresent,
-  sidebarPresent,
-} from '../../../src/common/reducers/sidebar';
 
 describe('sidebarReducer', () => {
   describe('reducer', () => {
     it.each([
-      [SIDEBAR_PRESENT, { sidebarPresent: true }],
+      [sidebarPresent.toString(), { sidebarPresent: true }],
-      [SIDEBAR_NOT_PRESENT, { sidebarPresent: false }],
+      [sidebarNotPresent.toString(), { sidebarPresent: false }],
     ])('returns expected on %s', (type, expected) => {
-      expect(reducer(Mock.all<Sidebar>(), { type })).toEqual(expected);
+      expect(sidebarReducer(undefined, { type })).toEqual(expected);
     });
   });
 
   describe('sidebarPresent', () => {
     it('returns expected action', () => {
-      expect(sidebarPresent()).toEqual({ type: SIDEBAR_PRESENT });
+      expect(sidebarPresent()).toEqual({ type: sidebarPresent.toString() });
     });
   });
 
   describe('sidebarNotPresent', () => {
     it('returns expected action', () => {
-      expect(sidebarNotPresent()).toEqual({ type: SIDEBAR_NOT_PRESENT });
+      expect(sidebarNotPresent()).toEqual({ type: sidebarNotPresent.toString() });
     });
   });
 });

test/mercure/reducers/mercureInfo.test.ts

@@ -1,12 +1,5 @@
 import { Mock } from 'ts-mockery';
-import reducer, {
+import { mercureInfoReducerCreator } from '../../../src/mercure/reducers/mercureInfo';
-  GET_MERCURE_INFO_START,
-  GET_MERCURE_INFO_ERROR,
-  GET_MERCURE_INFO,
-  loadMercureInfo,
-  GetMercureInfoAction,
-} from '../../../src/mercure/reducers/mercureInfo';
-import { ShlinkMercureInfo } from '../../../src/api/types';
 import { ShlinkApiClient } from '../../../src/api/services/ShlinkApiClient';
 import { GetState } from '../../../src/container/types';
 
@@ -15,39 +8,35 @@ describe('mercureInfoReducer', () => {
     mercureHubUrl: 'http://example.com/.well-known/mercure',
     token: 'abc.123.def',
   };
+  const getMercureInfo = jest.fn();
+  const buildShlinkApiClient = () => Mock.of<ShlinkApiClient>({ mercureInfo: getMercureInfo });
+  const { loadMercureInfo, reducer } = mercureInfoReducerCreator(buildShlinkApiClient);
+
+  beforeEach(jest.resetAllMocks);
 
   describe('reducer', () => {
-    const action = (type: string, args: Partial<ShlinkMercureInfo> = {}) => Mock.of<GetMercureInfoAction>(
-      { type, ...args },
-    );
-
     it('returns loading on GET_MERCURE_INFO_START', () => {
-      expect(reducer(undefined, action(GET_MERCURE_INFO_START))).toEqual({
+      expect(reducer(undefined, { type: loadMercureInfo.pending.toString() })).toEqual({
         loading: true,
         error: false,
       });
     });
 
     it('returns error on GET_MERCURE_INFO_ERROR', () => {
-      expect(reducer(undefined, action(GET_MERCURE_INFO_ERROR))).toEqual({
+      expect(reducer(undefined, { type: loadMercureInfo.rejected.toString() })).toEqual({
         loading: false,
         error: true,
       });
     });
 
     it('returns mercure info on GET_MERCURE_INFO', () => {
-      expect(reducer(undefined, { type: GET_MERCURE_INFO, ...mercureInfo })).toEqual(expect.objectContaining({
+      expect(reducer(undefined, { type: loadMercureInfo.fulfilled.toString(), payload: mercureInfo })).toEqual(
-        ...mercureInfo,
+        expect.objectContaining({ ...mercureInfo, loading: false, error: false }),
-        loading: false,
+      );
-        error: false,
-      }));
     });
   });
 
   describe('loadMercureInfo', () => {
-    const createApiClientMock = (result: Promise<ShlinkMercureInfo>) => Mock.of<ShlinkApiClient>({
-      mercureInfo: jest.fn().mockReturnValue(result),
-    });
     const dispatch = jest.fn();
     const createGetStateMock = (enabled: boolean): GetState => jest.fn().mockReturnValue({
       settings: {
@@ -55,43 +44,55 @@ describe('mercureInfoReducer', () => {
       },
     });
 
-    afterEach(jest.resetAllMocks);
-
     it('dispatches error when real time updates are disabled', async () => {
-      const apiClientMock = createApiClientMock(Promise.resolve(mercureInfo));
+      getMercureInfo.mockResolvedValue(mercureInfo);
       const getState = createGetStateMock(false);
 
-      await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
+      await loadMercureInfo()(dispatch, getState, {});
 
-      expect(apiClientMock.mercureInfo).not.toHaveBeenCalled();
+      expect(getMercureInfo).not.toHaveBeenCalled();
       expect(dispatch).toHaveBeenCalledTimes(2);
-      expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
+      expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO_ERROR });
+        type: loadMercureInfo.pending.toString(),
+      }));
+      expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: loadMercureInfo.rejected.toString(),
+      }));
     });
 
     it('calls API on success', async () => {
-      const apiClientMock = createApiClientMock(Promise.resolve(mercureInfo));
+      getMercureInfo.mockResolvedValue(mercureInfo);
       const getState = createGetStateMock(true);
 
-      await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
+      await loadMercureInfo()(dispatch, getState, {});
 
-      expect(apiClientMock.mercureInfo).toHaveBeenCalledTimes(1);
+      expect(getMercureInfo).toHaveBeenCalledTimes(1);
       expect(dispatch).toHaveBeenCalledTimes(2);
-      expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
+      expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO, ...mercureInfo });
+        type: loadMercureInfo.pending.toString(),
+      }));
+      expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: loadMercureInfo.fulfilled.toString(),
+        payload: mercureInfo,
+      }));
     });
 
     it('throws error on failure', async () => {
       const error = 'Error';
-      const apiClientMock = createApiClientMock(Promise.reject(error));
       const getState = createGetStateMock(true);
 
-      await loadMercureInfo(() => apiClientMock)()(dispatch, getState);
+      getMercureInfo.mockRejectedValue(error);
 
-      expect(apiClientMock.mercureInfo).toHaveBeenCalledTimes(1);
+      await loadMercureInfo()(dispatch, getState, {});
+
+      expect(getMercureInfo).toHaveBeenCalledTimes(1);
       expect(dispatch).toHaveBeenCalledTimes(2);
-      expect(dispatch).toHaveBeenNthCalledWith(1, { type: GET_MERCURE_INFO_START });
+      expect(dispatch).toHaveBeenNthCalledWith(1, expect.objectContaining({
-      expect(dispatch).toHaveBeenNthCalledWith(2, { type: GET_MERCURE_INFO_ERROR });
+        type: loadMercureInfo.pending.toString(),
+      }));
+      expect(dispatch).toHaveBeenNthCalledWith(2, expect.objectContaining({
+        type: loadMercureInfo.rejected.toString(),
+      }));
     });
   });
 });