Migrated visitsOverview reducer to RTK

src/reducers/index.ts

@@ -7,7 +7,6 @@ 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';
@@ -31,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/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 { buildReducer } from '../../utils/helpers/redux';
+import { createAsyncThunk } 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';
-export const GET_OVERVIEW_ERROR = 'shlink/visitsOverview/GET_OVERVIEW_ERROR';
-export const GET_OVERVIEW = 'shlink/visitsOverview/GET_OVERVIEW';
+const REDUCER_PREFIX = 'shlink/visitsOverview';
 
 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>({
-  [GET_OVERVIEW_START]: () => ({ ...initialState, loading: true }),
-  [GET_OVERVIEW_ERROR]: () => ({ ...initialState, error: true }),
-  [GET_OVERVIEW]: (_, { visitsCount, orphanVisitsCount }) => ({ ...initialState, visitsCount, orphanVisitsCount }),
-  [createNewVisits.toString()]: ({ visitsCount, orphanVisitsCount = 0, ...rest }, { payload }) => {
-    const { regularVisits, orphanVisits } = groupNewVisitsByType(payload.createdVisits);
+export const loadVisitsOverview = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
+  `${REDUCER_PREFIX}/loadVisitsOverview`,
+  (_: void, { getState }): Promise<ShlinkVisitsOverview> => buildShlinkApiClient(getState).getVisitsOverview(),
+);
 
-    return {
-      ...rest,
-      visitsCount: visitsCount + regularVisits.length,
-      orphanVisitsCount: orphanVisitsCount + orphanVisits.length,
-    };
+export const visitsOverviewReducerCreator = (
+  loadVisitsOverviewThunk: ReturnType<typeof loadVisitsOverview>,
+) => createSlice({
+  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;