Enhance visits overview reducer to handle bot and non-bots visits amounts

src/visits/reducers/visitsOverview.ts

@@ -3,14 +3,24 @@ import { createSlice } from '@reduxjs/toolkit';
 import type { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import type { ShlinkVisitsOverview } from '../../api/types';
 import { createAsyncThunk } from '../../utils/helpers/redux';
+import type { CreateVisit } from '../types';
 import { groupNewVisitsByType } from '../types/helpers';
 import { createNewVisits } from './visitCreation';
 
 const REDUCER_PREFIX = 'shlink/visitsOverview';
 
-export interface VisitsOverview {
-  visitsCount: number;
-  orphanVisitsCount: number;
+export type PartialVisitsSummary = {
+  total: number;
+  nonBots?: number;
+  bots?: number;
+};
+
+export type ParsedVisitsOverview = {
+  nonOrphanVisits: PartialVisitsSummary;
+  orphanVisits: PartialVisitsSummary;
+};
+
+export interface VisitsOverview extends ParsedVisitsOverview {
   loading: boolean;
   error: boolean;
 }
@@ -18,15 +28,34 @@ export interface VisitsOverview {
 export type GetVisitsOverviewAction = PayloadAction<ShlinkVisitsOverview>;
 
 const initialState: VisitsOverview = {
-  visitsCount: 0,
-  orphanVisitsCount: 0,
+  nonOrphanVisits: {
+    total: 0,
+  },
+  orphanVisits: {
+    total: 0,
+  },
   loading: false,
   error: false,
 };
 
+const countBots = (visits: CreateVisit[]) => visits.filter(({ visit }) => visit.potentialBot).length;
+
 export const loadVisitsOverview = (buildShlinkApiClient: ShlinkApiClientBuilder) => createAsyncThunk(
   `${REDUCER_PREFIX}/loadVisitsOverview`,
-  (_: void, { getState }): Promise<ShlinkVisitsOverview> => buildShlinkApiClient(getState).getVisitsOverview(),
+  (_: void, { getState }): Promise<ParsedVisitsOverview> => buildShlinkApiClient(getState).getVisitsOverview().then(
+    (resp) => ({
+      nonOrphanVisits: {
+        total: resp.nonOrphanVisits?.total ?? resp.visitsCount,
+        nonBots: resp.nonOrphanVisits?.nonBots,
+        bots: resp.nonOrphanVisits?.bots,
+      },
+      orphanVisits: {
+        total: resp.orphanVisits?.total ?? resp.orphanVisitsCount,
+        nonBots: resp.orphanVisits?.nonBots,
+        bots: resp.orphanVisits?.bots,
+      },
+    }),
+  ),
 );
 
 export const visitsOverviewReducerCreator = (
@@ -40,13 +69,31 @@ export const visitsOverviewReducerCreator = (
     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);
+    builder.addCase(createNewVisits, ({ nonOrphanVisits, orphanVisits, ...rest }, { payload }) => {
+      const { nonOrphanVisits: newNonOrphanVisits, orphanVisits: newOrphanVisits } = groupNewVisitsByType(
+        payload.createdVisits,
+      );
+
+      const newNonOrphanTotalVisits = newNonOrphanVisits.length;
+      const newNonOrphanBotVisits = countBots(newNonOrphanVisits);
+      const newNonOrphanNonBotVisits = newNonOrphanTotalVisits - newNonOrphanBotVisits;
+
+      const newOrphanTotalVisits = newOrphanVisits.length;
+      const newOrphanBotVisits = countBots(newOrphanVisits);
+      const newOrphanNonBotVisits = newOrphanTotalVisits - newOrphanBotVisits;
+
       return {
         ...rest,
-        visitsCount: visitsCount + regularVisits.length,
-        orphanVisitsCount: orphanVisitsCount + orphanVisits.length,
+        nonOrphanVisits: {
+          total: nonOrphanVisits.total + newNonOrphanTotalVisits,
+          bots: nonOrphanVisits.bots && nonOrphanVisits.bots + newNonOrphanBotVisits,
+          nonBots: nonOrphanVisits.nonBots && nonOrphanVisits.nonBots + newNonOrphanNonBotVisits,
+        },
+        orphanVisits: {
+          total: orphanVisits.total + newOrphanTotalVisits,
+          bots: orphanVisits.bots && orphanVisits.bots + newOrphanBotVisits,
+          nonBots: orphanVisits.nonBots && orphanVisits.nonBots + newOrphanNonBotVisits,
+        },
       };
     });
   },

src/visits/types/helpers.ts

@@ -10,13 +10,13 @@ export const isNormalizedOrphanVisit = (visit: NormalizedVisit): visit is Normal
 
 export interface GroupedNewVisits {
   orphanVisits: CreateVisit[];
-  regularVisits: CreateVisit[];
+  nonOrphanVisits: CreateVisit[];
 }
 
 export const groupNewVisitsByType = pipe(
-  groupBy((newVisit: CreateVisit) => (isOrphanVisit(newVisit.visit) ? 'orphanVisits' : 'regularVisits')),
+  groupBy((newVisit: CreateVisit) => (isOrphanVisit(newVisit.visit) ? 'orphanVisits' : 'nonOrphanVisits')),
   // @ts-expect-error Type declaration on groupBy is not correct. It can return undefined props
-  (result): GroupedNewVisits => ({ orphanVisits: [], regularVisits: [], ...result }),
+  (result): GroupedNewVisits => ({ orphanVisits: [], nonOrphanVisits: [], ...result }),
 );
 
 export type HighlightableProps<T extends NormalizedVisit> = T extends NormalizedOrphanVisit