Refactored createVisitsReducer so that it expects an object param

src/visits/reducers/common.ts

@@ -20,20 +20,20 @@ type VisitsLoader = (page: number, itemsPerPage: number) => Promise<ShlinkVisits
 type LastVisitLoader = () => Promise<Visit | undefined>;
 
 interface VisitsAsyncThunkOptions<T extends LoadVisits = LoadVisits, R extends VisitsLoaded = VisitsLoaded> {
-  name: string;
+  typePrefix: string;
   createLoaders: (params: T, getState: () => ShlinkState) => [VisitsLoader, LastVisitLoader];
   getExtraFulfilledPayload: (params: T) => Partial<R>;
   shouldCancel: (getState: () => ShlinkState) => boolean;
 }
 
 export const createVisitsAsyncThunk = <T extends LoadVisits = LoadVisits, R extends VisitsLoaded = VisitsLoaded>(
-  { name, createLoaders, getExtraFulfilledPayload, shouldCancel }: VisitsAsyncThunkOptions<T, R>,
+  { typePrefix, createLoaders, getExtraFulfilledPayload, shouldCancel }: VisitsAsyncThunkOptions<T, R>,
 ) => {
-  const progressChangedAction = createAction<number>(`${name}/progressChanged`);
-  const largeAction = createAction<void>(`${name}/large`);
-  const fallbackToIntervalAction = createAction<DateInterval>(`${name}/fallbackToInterval`);
+  const progressChangedAction = createAction<number>(`${typePrefix}/progressChanged`);
+  const largeAction = createAction<void>(`${typePrefix}/large`);
+  const fallbackToIntervalAction = createAction<DateInterval>(`${typePrefix}/fallbackToInterval`);
 
-  const asyncThunk = createAsyncThunk(name, async (params: T, { getState, dispatch }): Promise<R> => {
+  const asyncThunk = createAsyncThunk(typePrefix, async (params: T, { getState, dispatch }): Promise<R> => {
     const [visitsLoader, lastVisitLoader] = createLoaders(params, getState);
 
     const loadVisitsInParallel = async (pages: number[]): Promise<Visit[]> =>
@@ -97,11 +97,15 @@ export const lastVisitLoaderForLoader = (
   return async () => loader({ page: 1, itemsPerPage: 1 }).then(({ data }) => data[0]);
 };
 
+interface VisitsReducerOptions<State extends VisitsInfo, AT extends ReturnType<typeof createVisitsAsyncThunk>> {
+  name: string;
+  asyncThunkCreator: AT;
+  initialState: State;
+  filterCreatedVisits: (state: State, createdVisits: CreateVisit[]) => CreateVisit[];
+}
+
 export const createVisitsReducer = <State extends VisitsInfo, AT extends ReturnType<typeof createVisitsAsyncThunk>>(
-  name: string,
-  asyncThunkCreator: AT,
-  initialState: State,
-  filterCreatedVisits: (state: State, createdVisits: CreateVisit[]) => CreateVisit[],
+  { name, asyncThunkCreator, initialState, filterCreatedVisits }: VisitsReducerOptions<State, AT>,
 ) => {
   const { asyncThunk, largeAction, fallbackToIntervalAction, progressChangedAction } = asyncThunkCreator;
   const { reducer, actions } = createSlice({
@@ -127,10 +131,10 @@ export const createVisitsReducer = <State extends VisitsInfo, AT extends ReturnT
 
       builder.addCase(createNewVisits, (state, { payload }) => {
         const { visits } = state;
-        // @ts-expect-error TODO Fix the state inferred type
+        // @ts-expect-error TODO Fix type inference
         const newVisits = filterCreatedVisits(state, payload.createdVisits).map(({ visit }) => visit);
 
-        return { ...state, visits: [...newVisits, ...visits] };
+        return !newVisits.length ? state : { ...state, visits: [...newVisits, ...visits] };
       });
     },
   });

src/visits/reducers/domainVisits.ts

@@ -27,7 +27,7 @@ const initialState: DomainVisits = {
 };
 
 export const getDomainVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
-  name: `${REDUCER_PREFIX}/getDomainVisits`,
+  typePrefix: `${REDUCER_PREFIX}/getDomainVisits`,
   createLoaders: ({ domain, query = {}, doIntervalFallback = false }: LoadDomainVisits, getState) => {
     const { getDomainVisits: getVisits } = buildShlinkApiClient(getState);
     const visitsLoader = async (page: number, itemsPerPage: number) => getVisits(
@@ -43,17 +43,17 @@ export const getDomainVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
 });
 
 export const domainVisitsReducerCreator = (
-  getVisitsCreator: ReturnType<typeof getDomainVisits>,
-) => createVisitsReducer(
-  REDUCER_PREFIX,
-  // @ts-expect-error TODO Fix type inference
-  getVisitsCreator,
+  asyncThunkCreator: ReturnType<typeof getDomainVisits>,
+) => createVisitsReducer({
+  name: REDUCER_PREFIX,
   initialState,
-  ({ domain, query = {} }, createdVisits) => {
+  // @ts-expect-error TODO Fix type inference
+  asyncThunkCreator,
+  filterCreatedVisits: ({ domain, query = {} }, createdVisits) => {
     const { startDate, endDate } = query;
     return createdVisits.filter(
       ({ shortUrl, visit }) =>
         shortUrl && domainMatches(shortUrl, domain) && isBetween(visit.date, startDate, endDate),
     );
   },
-);
+});

src/visits/reducers/nonOrphanVisits.ts

@@ -15,7 +15,7 @@ const initialState: VisitsInfo = {
 };
 
 export const getNonOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
-  name: `${REDUCER_PREFIX}/getNonOrphanVisits`,
+  typePrefix: `${REDUCER_PREFIX}/getNonOrphanVisits`,
   createLoaders: ({ query = {}, doIntervalFallback = false }, getState) => {
     const { getNonOrphanVisits: shlinkGetNonOrphanVisits } = buildShlinkApiClient(getState);
     const visitsLoader = async (page: number, itemsPerPage: number) =>
@@ -29,13 +29,13 @@ export const getNonOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder)
 });
 
 export const nonOrphanVisitsReducerCreator = (
-  getVisitsCreator: ReturnType<typeof getNonOrphanVisits>,
-) => createVisitsReducer(
-  REDUCER_PREFIX,
-  getVisitsCreator,
+  asyncThunkCreator: ReturnType<typeof getNonOrphanVisits>,
+) => createVisitsReducer({
+  name: REDUCER_PREFIX,
   initialState,
-  ({ query = {} }, createdVisits) => {
+  asyncThunkCreator,
+  filterCreatedVisits: ({ query = {} }, createdVisits) => {
     const { startDate, endDate } = query;
     return createdVisits.filter(({ visit }) => isBetween(visit.date, startDate, endDate));
   },
-);
+});

src/visits/reducers/orphanVisits.ts

@@ -24,13 +24,12 @@ const matchesType = (visit: OrphanVisit, orphanVisitsType?: OrphanVisitType) =>
   !orphanVisitsType || orphanVisitsType === visit.type;
 
 export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
-  name: `${REDUCER_PREFIX}/getOrphanVisits`,
+  typePrefix: `${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);
@@ -42,13 +41,13 @@ export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) =>
 });
 
 export const orphanVisitsReducerCreator = (
-  getVisitsCreator: ReturnType<typeof getOrphanVisits>,
-) => createVisitsReducer(
-  REDUCER_PREFIX,
-  getVisitsCreator,
+  asyncThunkCreator: ReturnType<typeof getOrphanVisits>,
+) => createVisitsReducer({
+  name: REDUCER_PREFIX,
   initialState,
-  ({ query = {} }, createdVisits) => {
+  asyncThunkCreator,
+  filterCreatedVisits: ({ query = {} }, createdVisits) => {
     const { startDate, endDate } = query;
     return createdVisits.filter(({ visit, shortUrl }) => !shortUrl && isBetween(visit.date, startDate, endDate));
   },
-);
+});

src/visits/reducers/shortUrlVisits.ts

@@ -25,7 +25,7 @@ const initialState: ShortUrlVisits = {
 };
 
 export const getShortUrlVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
-  name: `${REDUCER_PREFIX}/getShortUrlVisits`,
+  typePrefix: `${REDUCER_PREFIX}/getShortUrlVisits`,
   createLoaders: ({ shortCode, query = {}, doIntervalFallback = false }: LoadShortUrlVisits, getState) => {
     const { getShortUrlVisits: shlinkGetShortUrlVisits } = buildShlinkApiClient(getState);
     const visitsLoader = async (page: number, itemsPerPage: number) => shlinkGetShortUrlVisits(
@@ -46,17 +46,17 @@ export const getShortUrlVisits = (buildShlinkApiClient: ShlinkApiClientBuilder)
 });
 
 export const shortUrlVisitsReducerCreator = (
-  getVisitsCreator: ReturnType<typeof getShortUrlVisits>,
-) => createVisitsReducer(
-  REDUCER_PREFIX,
-  // @ts-expect-error TODO Fix type inference
-  getVisitsCreator,
+  asyncThunkCreator: ReturnType<typeof getShortUrlVisits>,
+) => createVisitsReducer({
+  name: REDUCER_PREFIX,
   initialState,
-  ({ shortCode, domain, query = {} }, createdVisits) => {
+  // @ts-expect-error TODO Fix type inference
+  asyncThunkCreator,
+  filterCreatedVisits: ({ shortCode, domain, query = {} }: ShortUrlVisits, createdVisits) => {
     const { startDate, endDate } = query;
     return createdVisits.filter(
       ({ shortUrl, visit }) =>
         shortUrl && shortUrlMatches(shortUrl, shortCode, domain) && isBetween(visit.date, startDate, endDate),
     );
   },
-);
+});

src/visits/reducers/tagVisits.ts

@@ -24,7 +24,7 @@ const initialState: TagVisits = {
 };
 
 export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => createVisitsAsyncThunk({
-  name: `${REDUCER_PREFIX}/getTagVisits`,
+  typePrefix: `${REDUCER_PREFIX}/getTagVisits`,
   createLoaders: ({ tag, query = {}, doIntervalFallback = false }: LoadTagVisits, getState) => {
     const { getTagVisits: getVisits } = buildShlinkApiClient(getState);
     const visitsLoader = async (page: number, itemsPerPage: number) => getVisits(
@@ -39,15 +39,15 @@ export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => cr
   shouldCancel: (getState) => getState().tagVisits.cancelLoad,
 });
 
-export const tagVisitsReducerCreator = (getTagVisitsCreator: ReturnType<typeof getTagVisits>) => createVisitsReducer(
-  REDUCER_PREFIX,
-  // @ts-expect-error TODO Fix type inference
-  getTagVisitsCreator,
+export const tagVisitsReducerCreator = (asyncThunkCreator: ReturnType<typeof getTagVisits>) => createVisitsReducer({
+  name: REDUCER_PREFIX,
   initialState,
-  ({ tag, query = {} }, createdVisits) => {
+  // @ts-expect-error TODO Fix type inference
+  asyncThunkCreator,
+  filterCreatedVisits: ({ tag, query = {} }: TagVisits, createdVisits) => {
     const { startDate, endDate } = query;
     return createdVisits.filter(
       ({ shortUrl, visit }) => shortUrl?.tags.includes(tag) && isBetween(visit.date, startDate, endDate),
     );
   },
-);
+});