Migrated orphanVisits reducer to RTK

src/reducers/index.ts

@@ -3,7 +3,6 @@ import { combineReducers } from '@reduxjs/toolkit';
 import { serversReducer } from '../servers/reducers/servers';
 import shortUrlVisitsReducer from '../visits/reducers/shortUrlVisits';
 import tagVisitsReducer from '../visits/reducers/tagVisits';
-import orphanVisitsReducer from '../visits/reducers/orphanVisits';
 import { settingsReducer } from '../settings/reducers/settings';
 import { appUpdatesReducer } from '../app/reducers/appUpdates';
 import { sidebarReducer } from '../common/reducers/sidebar';
@@ -20,7 +19,7 @@ export default (container: IContainer) => combineReducers<ShlinkState>({
   shortUrlVisits: shortUrlVisitsReducer,
   tagVisits: tagVisitsReducer,
   domainVisits: container.domainVisitsReducer,
-  orphanVisits: orphanVisitsReducer,
+  orphanVisits: container.orphanVisitsReducer,
   nonOrphanVisits: container.nonOrphanVisitsReducer,
   tagsList: container.tagsListReducer,
   tagDelete: container.tagDeleteReducer,

src/visits/reducers/orphanVisits.ts

@@ -1,42 +1,19 @@
-import { createAction } from '@reduxjs/toolkit';
-import { Dispatch } from 'redux';
+import { createSlice } from '@reduxjs/toolkit';
 import { OrphanVisit, OrphanVisitType } from '../types';
-import { buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
-import { GetState } from '../../container/types';
 import { isOrphanVisit } from '../types/helpers';
-import { ApiErrorAction } from '../../api/types/actions';
 import { isBetween } from '../../utils/helpers/date';
-import { getVisitsWithLoader, lastVisitLoaderForLoader } from './common';
+import { createVisitsAsyncThunk, lastVisitLoaderForLoader } from './common';
 import { createNewVisits, CreateVisitsAction } from './visitCreation';
-import {
-  LoadVisits,
-  VisitsFallbackIntervalAction,
-  VisitsInfo,
-  VisitsLoaded,
-  VisitsLoadedAction,
-  VisitsLoadProgressChangedAction,
-} from './types';
+import { LoadVisits, VisitsInfo } from './types';
+import { parseApiError } from '../../api/utils';
 
 const REDUCER_PREFIX = 'shlink/orphanVisits';
-export const GET_ORPHAN_VISITS_START = `${REDUCER_PREFIX}/getOrphanVisits/pending`;
-export const GET_ORPHAN_VISITS_ERROR = `${REDUCER_PREFIX}/getOrphanVisits/rejected`;
-export const GET_ORPHAN_VISITS = `${REDUCER_PREFIX}/getOrphanVisits/fulfilled`;
-export const GET_ORPHAN_VISITS_LARGE = `${REDUCER_PREFIX}/getOrphanVisits/large`;
-export const GET_ORPHAN_VISITS_CANCEL = `${REDUCER_PREFIX}/getOrphanVisits/cancel`;
-export const GET_ORPHAN_VISITS_PROGRESS_CHANGED = `${REDUCER_PREFIX}/getOrphanVisits/progressChanged`;
-export const GET_ORPHAN_VISITS_FALLBACK_TO_INTERVAL = `${REDUCER_PREFIX}/getOrphanVisits/fallbackToInterval`;
 
 export interface LoadOrphanVisits extends LoadVisits {
   orphanVisitsType?: OrphanVisitType;
 }
 
-type OrphanVisitsCombinedAction = VisitsLoadedAction
-& VisitsLoadProgressChangedAction
-& VisitsFallbackIntervalAction
-& CreateVisitsAction
-& ApiErrorAction;
-
 const initialState: VisitsInfo = {
   visits: [],
   loading: false,
@@ -46,48 +23,63 @@ const initialState: VisitsInfo = {
   progress: 0,
 };
 
-export default buildReducer<VisitsInfo, OrphanVisitsCombinedAction>({
-  [`${REDUCER_PREFIX}/getOrphanVisits/pending`]: () => ({ ...initialState, loading: true }),
-  [`${REDUCER_PREFIX}/getOrphanVisits/rejected`]: (_, { errorData }) => ({ ...initialState, error: true, errorData }),
-  [`${REDUCER_PREFIX}/getOrphanVisits/fulfilled`]: (state, { payload }: VisitsLoadedAction) => (
-    { ...state, ...payload, loading: false, loadingLarge: false, error: false }
-  ),
-  [`${REDUCER_PREFIX}/getOrphanVisits/large`]: (state) => ({ ...state, loadingLarge: true }),
-  [`${REDUCER_PREFIX}/getOrphanVisits/cancel`]: (state) => ({ ...state, cancelLoad: true }),
-  [`${REDUCER_PREFIX}/getOrphanVisits/progressChanged`]: (state, { payload: progress }) => ({ ...state, progress }),
-  [`${REDUCER_PREFIX}/getOrphanVisits/fallbackToInterval`]: (state, { payload: fallbackInterval }) => (
-    { ...state, fallbackInterval }
-  ),
-  [createNewVisits.toString()]: (state, { payload }: CreateVisitsAction) => {
-    const { visits, query = {} } = state;
-    const { startDate, endDate } = query;
-    const newVisits = payload.createdVisits
-      .filter(({ visit, shortUrl }) => !shortUrl && isBetween(visit.date, startDate, endDate))
-      .map(({ visit }) => visit);
-
-    return { ...state, visits: [...newVisits, ...visits] };
-  },
-}, initialState);
-
 const matchesType = (visit: OrphanVisit, orphanVisitsType?: OrphanVisitType) =>
   !orphanVisitsType || orphanVisitsType === visit.type;
 
-export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
-  { orphanVisitsType, query = {}, doIntervalFallback = false }: LoadOrphanVisits,
-) => async (dispatch: Dispatch, getState: GetState) => {
-  const { getOrphanVisits: getVisits } = buildShlinkApiClient(getState);
-  const visitsLoader = async (page: number, itemsPerPage: number) => getVisits({ ...query, page, itemsPerPage })
-    .then((result) => {
-      const visits = result.data.filter((visit) => isOrphanVisit(visit) && matchesType(visit, orphanVisitsType));
+export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
+  actionsPrefix: `${REDUCER_PREFIX}/getOrphanVisits`,
+  createLoaders: ({ orphanVisitsType, query = {}, doIntervalFallback = false }: LoadOrphanVisits, getState) => {
+    const { getOrphanVisits: getVisits } = buildShlinkApiClient(getState);
+    const visitsLoader = async (page: number, itemsPerPage: number) => getVisits({ ...query, page, itemsPerPage })
+      .then((result) => {
+        const visits = result.data.filter((visit) => isOrphanVisit(visit) && matchesType(visit, orphanVisitsType));
 
-      return { ...result, data: visits };
-    });
-  const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, getVisits);
-  const shouldCancel = () => getState().orphanVisits.cancelLoad;
-  const extraFinishActionData: Partial<VisitsLoaded> = { query };
-  const prefix = `${REDUCER_PREFIX}/getOrphanVisits`;
+        return { ...result, data: visits };
+      });
+    const lastVisitLoader = lastVisitLoaderForLoader(doIntervalFallback, getVisits);
 
-  return getVisitsWithLoader(visitsLoader, lastVisitLoader, extraFinishActionData, prefix, dispatch, shouldCancel);
+    return [visitsLoader, lastVisitLoader];
+  },
+  getExtraFulfilledPayload: ({ query = {} }: LoadOrphanVisits) => ({ query }),
+  shouldCancel: (getState) => getState().orphanVisits.cancelLoad,
+});
+
+export const orphanVisitsReducerCreator = (
+  { asyncThunk, largeAction, progressChangedAction, fallbackToIntervalAction }: ReturnType<typeof getOrphanVisits>,
+) => {
+  const { reducer, actions } = createSlice({
+    name: REDUCER_PREFIX,
+    initialState,
+    reducers: {
+      cancelGetOrphanVisits: (state) => ({ ...state, cancelLoad: true }),
+    },
+    extraReducers: (builder) => {
+      builder.addCase(asyncThunk.pending, () => ({ ...initialState, loading: true }));
+      builder.addCase(asyncThunk.rejected, (_, { error }) => (
+        { ...initialState, error: true, errorData: parseApiError(error) }
+      ));
+      builder.addCase(asyncThunk.fulfilled, (state, { payload }) => (
+        { ...state, ...payload, loading: false, loadingLarge: false, error: false }
+      ));
+
+      builder.addCase(largeAction, (state) => ({ ...state, loadingLarge: true }));
+      builder.addCase(progressChangedAction, (state, { payload: progress }) => ({ ...state, progress }));
+      builder.addCase(fallbackToIntervalAction, (state, { payload: fallbackInterval }) => (
+        { ...state, fallbackInterval }
+      ));
+
+      builder.addCase(createNewVisits, (state, { payload }: CreateVisitsAction) => {
+        const { visits, query = {} } = state;
+        const { startDate, endDate } = query;
+        const newVisits = payload.createdVisits
+          .filter(({ visit, shortUrl }) => !shortUrl && isBetween(visit.date, startDate, endDate))
+          .map(({ visit }) => visit);
+
+        return { ...state, visits: [...newVisits, ...visits] };
+      });
+    },
+  });
+  const { cancelGetOrphanVisits } = actions;
+
+  return { reducer, cancelGetOrphanVisits };
 };
-
-export const cancelGetOrphanVisits = createAction<void>(`${REDUCER_PREFIX}/getOrphanVisits/cancel`);

src/visits/services/provideServices.ts

@@ -9,7 +9,7 @@ import { NonOrphanVisits } from '../NonOrphanVisits';
 import { cancelGetShortUrlVisits, getShortUrlVisits } from '../reducers/shortUrlVisits';
 import { cancelGetTagVisits, getTagVisits } from '../reducers/tagVisits';
 import { getDomainVisits, domainVisitsReducerCreator } from '../reducers/domainVisits';
-import { cancelGetOrphanVisits, getOrphanVisits } from '../reducers/orphanVisits';
+import { getOrphanVisits, orphanVisitsReducerCreator } from '../reducers/orphanVisits';
 import { getNonOrphanVisits, nonOrphanVisitsReducerCreator } from '../reducers/nonOrphanVisits';
 import { ConnectDecorator } from '../../container/types';
 import { loadVisitsOverview, visitsOverviewReducerCreator } from '../reducers/visitsOverview';
@@ -64,8 +64,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.serviceFactory('getDomainVisits', prop('asyncThunk'), 'getDomainVisitsCreator');
   bottle.serviceFactory('cancelGetDomainVisits', prop('cancelGetDomainVisits'), 'domainVisitsReducerCreator');
 
-  bottle.serviceFactory('getOrphanVisits', getOrphanVisits, 'buildShlinkApiClient');
-  bottle.serviceFactory('cancelGetOrphanVisits', () => cancelGetOrphanVisits);
+  bottle.serviceFactory('getOrphanVisitsCreator', getOrphanVisits, 'buildShlinkApiClient');
+  bottle.serviceFactory('getOrphanVisits', prop('asyncThunk'), 'getOrphanVisitsCreator');
+  bottle.serviceFactory('cancelGetOrphanVisits', prop('cancelGetOrphanVisits'), 'orphanVisitsReducerCreator');
 
   bottle.serviceFactory('getNonOrphanVisitsCreator', getNonOrphanVisits, 'buildShlinkApiClient');
   bottle.serviceFactory('getNonOrphanVisits', prop('asyncThunk'), 'getNonOrphanVisitsCreator');
@@ -83,6 +84,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
 
   bottle.serviceFactory('nonOrphanVisitsReducerCreator', nonOrphanVisitsReducerCreator, 'getNonOrphanVisitsCreator');
   bottle.serviceFactory('nonOrphanVisitsReducer', prop('reducer'), 'nonOrphanVisitsReducerCreator');
+
+  bottle.serviceFactory('orphanVisitsReducerCreator', orphanVisitsReducerCreator, 'getOrphanVisitsCreator');
+  bottle.serviceFactory('orphanVisitsReducer', prop('reducer'), 'orphanVisitsReducerCreator');
 };
 
 export default provideServices;