Moved logic to filter visits to reducers

src/api/types/index.ts

@@ -55,6 +55,7 @@ export interface ShlinkVisitsParams {
   itemsPerPage?: number;
   startDate?: string;
   endDate?: string;
+  excludeBots?: boolean;
 }
 
 export interface ShlinkShortUrlData extends ShortUrlMeta {

src/visits/OrphanVisits.tsx

@@ -4,12 +4,13 @@ import { ShlinkVisitsParams } from '../api/types';
 import { Topics } from '../mercure/helpers/Topics';
 import VisitsStats from './VisitsStats';
 import { OrphanVisitsHeader } from './OrphanVisitsHeader';
-import { NormalizedVisit, VisitsInfo } from './types';
+import { NormalizedVisit, OrphanVisitType, VisitsInfo, VisitsParams } from './types';
 import { VisitsExporter } from './services/VisitsExporter';
 import { CommonVisitsProps } from './types/CommonVisitsProps';
+import { toApiParams } from './types/helpers';
 
 export interface OrphanVisitsProps extends CommonVisitsProps, RouteComponentProps {
-  getOrphanVisits: (params: ShlinkVisitsParams) => void;
+  getOrphanVisits: (params?: ShlinkVisitsParams, orphanVisitsType?: OrphanVisitType) => void;
   orphanVisits: VisitsInfo;
   cancelGetOrphanVisits: () => void;
 }
@@ -24,10 +25,11 @@ export const OrphanVisits = ({ exportVisits }: VisitsExporter) => boundToMercure
   selectedServer,
 }: OrphanVisitsProps) => {
   const exportCsv = (visits: NormalizedVisit[]) => exportVisits('orphan_visits.csv', visits);
+  const loadVisits = (params: VisitsParams) => getOrphanVisits(toApiParams(params), params.filter?.orphanVisitsType);
 
   return (
     <VisitsStats
-      getVisits={getOrphanVisits}
+      getVisits={loadVisits}
       cancelGetVisits={cancelGetOrphanVisits}
       visitsInfo={orphanVisits}
       baseUrl={url}

src/visits/ShortUrlVisits.tsx

@@ -9,8 +9,9 @@ import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits
 import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
 import VisitsStats from './VisitsStats';
 import { VisitsExporter } from './services/VisitsExporter';
-import { NormalizedVisit } from './types';
+import { NormalizedVisit, VisitsParams } from './types';
 import { CommonVisitsProps } from './types/CommonVisitsProps';
+import { toApiParams } from './types/helpers';
 
 export interface ShortUrlVisitsProps extends CommonVisitsProps, RouteComponentProps<{ shortCode: string }> {
   getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams) => void;
@@ -34,7 +35,7 @@ const ShortUrlVisits = ({ exportVisits }: VisitsExporter) => boundToMercureHub((
 }: ShortUrlVisitsProps) => {
   const { shortCode } = params;
   const { domain } = parseQuery<{ domain?: string }>(search);
-  const loadVisits = (params: ShlinkVisitsParams) => getShortUrlVisits(shortCode, { ...params, domain });
+  const loadVisits = (params: VisitsParams) => getShortUrlVisits(shortCode, { ...toApiParams(params), domain });
   const exportCsv = (visits: NormalizedVisit[]) => exportVisits(
     `short-url_${shortUrlDetail.shortUrl?.shortUrl.replace(/https?:\/\//g, '')}_visits.csv`,
     visits,

src/visits/TagVisits.tsx

@@ -9,9 +9,10 @@ import VisitsStats from './VisitsStats';
 import { VisitsExporter } from './services/VisitsExporter';
 import { NormalizedVisit } from './types';
 import { CommonVisitsProps } from './types/CommonVisitsProps';
+import { toApiParams } from './types/helpers';
 
 export interface TagVisitsProps extends CommonVisitsProps, RouteComponentProps<{ tag: string }> {
-  getTagVisits: (tag: string, query: any) => void;
+  getTagVisits: (tag: string, query?: ShlinkVisitsParams) => void;
   tagVisits: TagVisitsState;
   cancelGetTagVisits: () => void;
 }
@@ -26,7 +27,7 @@ const TagVisits = (colorGenerator: ColorGenerator, { exportVisits }: VisitsExpor
   selectedServer,
 }: TagVisitsProps) => {
   const { tag } = params;
-  const loadVisits = (params: ShlinkVisitsParams) => getTagVisits(tag, params);
+  const loadVisits = (params: ShlinkVisitsParams) => getTagVisits(tag, toApiParams(params));
   const exportCsv = (visits: NormalizedVisit[]) => exportVisits(`tag_${tag}_visits.csv`, visits);
 
   return (

src/visits/VisitsStats.tsx

@@ -9,8 +9,6 @@ import { Location } from 'history';
 import classNames from 'classnames';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
 import Message from '../utils/Message';
-import { formatIsoDate } from '../utils/helpers/date';
-import { ShlinkVisitsParams } from '../api/types';
 import { DateInterval, DateRange, intervalToDateRange } from '../utils/dates/types';
 import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
@@ -21,15 +19,15 @@ import SortableBarGraph from './helpers/SortableBarGraph';
 import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
 import VisitsTable from './VisitsTable';
-import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo } from './types';
+import { NormalizedOrphanVisit, NormalizedVisit, VisitsFilter, VisitsInfo, VisitsParams } from './types';
 import OpenMapModalBtn from './helpers/OpenMapModalBtn';
-import { processStatsFromVisits } from './services/VisitsParser';
+import { normalizeVisits, processStatsFromVisits } from './services/VisitsParser';
 import { VisitsFilterDropdown } from './helpers/VisitsFilterDropdown';
-import { HighlightableProps, highlightedVisitsToStats, normalizeAndFilterVisits } from './types/helpers';
+import { HighlightableProps, highlightedVisitsToStats } from './types/helpers';
 import './VisitsStats.scss';
 
 export interface VisitsStatsProps {
-  getVisits: (params: ShlinkVisitsParams) => void;
+  getVisits: (params: VisitsParams) => void;
   visitsInfo: VisitsInfo;
   settings: Settings;
   selectedServer: SelectedServer;
@@ -95,7 +93,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
     return !subPath ? `${baseUrl}${query}` : `${baseUrl}${subPath}${query}`;
   };
   const { visits, loading, loadingLarge, error, errorData, progress } = visitsInfo;
-  const normalizedVisits = useMemo(() => normalizeAndFilterVisits(visits, visitsFilter), [ visits, visitsFilter ]);
+  const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
   const { os, browsers, referrers, countries, cities, citiesForMap, visitedUrls } = useMemo(
     () => processStatsFromVisits(normalizedVisits),
     [ normalizedVisits ],
@@ -122,10 +120,8 @@ const VisitsStats: FC<VisitsStatsProps> = ({
 
   useEffect(() => cancelGetVisits, []);
   useEffect(() => {
-    const { startDate, endDate } = dateRange;
-
-    getVisits({ startDate: formatIsoDate(startDate) ?? undefined, endDate: formatIsoDate(endDate) ?? undefined });
-  }, [ dateRange ]);
+    getVisits({ dateRange, filter: visitsFilter });
+  }, [ dateRange, visitsFilter ]);
 
   const renderVisitsContent = () => {
     if (loadingLarge) {

src/visits/reducers/orphanVisits.ts

@@ -1,8 +1,17 @@
 import { Action, Dispatch } from 'redux';
-import { Visit, VisitsInfo, VisitsLoadFailedAction, VisitsLoadProgressChangedAction } from '../types';
+import {
+  OrphanVisit,
+  OrphanVisitType,
+  Visit,
+  VisitsInfo,
+  VisitsLoadFailedAction,
+  VisitsLoadProgressChangedAction,
+} from '../types';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
+import { ShlinkVisitsParams } from '../../api/types';
+import { isOrphanVisit } from '../types/helpers';
 import { getVisitsWithLoader } from './common';
 import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
 
@@ -48,12 +57,20 @@ export default buildReducer<VisitsInfo, OrphanVisitsCombinedAction>({
   },
 }, initialState);
 
-export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (query = {}) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
+const matchesType = (visit: OrphanVisit, orphanVisitsType?: OrphanVisitType) =>
+  !orphanVisitsType || orphanVisitsType === visit.type;
+
+export const getOrphanVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
+  query: ShlinkVisitsParams = {},
+  orphanVisitsType?: OrphanVisitType,
+) => async (dispatch: Dispatch, getState: GetState) => {
   const { getOrphanVisits } = buildShlinkApiClient(getState);
-  const visitsLoader = async (page: number, itemsPerPage: number) => getOrphanVisits({ ...query, page, itemsPerPage });
+  const visitsLoader = async (page: number, itemsPerPage: number) => getOrphanVisits({ ...query, page, itemsPerPage })
+    .then((result) => {
+      const visits = result.data.filter((visit) => isOrphanVisit(visit) && matchesType(visit, orphanVisitsType));
+
+      return { ...result, data: visits };
+    });
   const shouldCancel = () => getState().orphanVisits.cancelLoad;
   const actionMap = {
     start: GET_ORPHAN_VISITS_START,

src/visits/reducers/shortUrlVisits.ts

@@ -5,7 +5,7 @@ import { ShortUrlIdentifier } from '../../short-urls/data';
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
-import { OptionalString } from '../../utils/utils';
+import { ShlinkVisitsParams } from '../../api/types';
 import { getVisitsWithLoader } from './common';
 import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
 
@@ -64,7 +64,7 @@ export default buildReducer<ShortUrlVisits, ShortUrlVisitsCombinedAction>({
 
 export const getShortUrlVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
   shortCode: string,
-  query: { domain?: OptionalString } = {},
+  query: ShlinkVisitsParams = {},
 ) => async (dispatch: Dispatch, getState: GetState) => {
   const { getShortUrlVisits } = buildShlinkApiClient(getState);
   const visitsLoader = async (page: number, itemsPerPage: number) => getShortUrlVisits(

src/visits/reducers/tagVisits.ts

@@ -3,6 +3,7 @@ import { Visit, VisitsInfo, VisitsLoadFailedAction, VisitsLoadProgressChangedAct
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
 import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilder';
 import { GetState } from '../../container/types';
+import { ShlinkVisitsParams } from '../../api/types';
 import { getVisitsWithLoader } from './common';
 import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
 
@@ -56,10 +57,10 @@ export default buildReducer<TagVisits, TagsVisitsCombinedAction>({
   },
 }, initialState);
 
-export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (tag: string, query = {}) => async (
-  dispatch: Dispatch,
-  getState: GetState,
-) => {
+export const getTagVisits = (buildShlinkApiClient: ShlinkApiClientBuilder) => (
+  tag: string,
+  query: ShlinkVisitsParams = {},
+) => async (dispatch: Dispatch, getState: GetState) => {
   const { getTagVisits } = buildShlinkApiClient(getState);
   const visitsLoader = async (page: number, itemsPerPage: number) => getTagVisits(
     tag,

src/visits/types/helpers.ts

@@ -1,7 +1,7 @@
-import { countBy, filter, groupBy, pipe, prop } from 'ramda';
-import { normalizeVisits } from '../services/VisitsParser';
-import { hasValue } from '../../utils/utils';
-import { Visit, OrphanVisit, CreateVisit, NormalizedVisit, NormalizedOrphanVisit, Stats, VisitsFilter } from './index';
+import { countBy, groupBy, pipe, prop } from 'ramda';
+import { formatIsoDate } from '../../utils/helpers/date';
+import { ShlinkVisitsParams } from '../../api/types';
+import { CreateVisit, NormalizedOrphanVisit, NormalizedVisit, OrphanVisit, Stats, Visit, VisitsParams } from './index';
 
 export const isOrphanVisit = (visit: Visit): visit is OrphanVisit => visit.hasOwnProperty('visitedUrl');
 
@@ -28,19 +28,10 @@ export const highlightedVisitsToStats = <T extends NormalizedVisit>(
   property: HighlightableProps<T>,
 ): Stats => countBy(prop(property) as any, highlightedVisits);
 
-export const normalizeAndFilterVisits = (visits: Visit[], filters: VisitsFilter) => pipe(
-  normalizeVisits,
-  filter((normalizedVisit: NormalizedVisit) => {
-    if (!hasValue(filters)) {
-      return true;
-    }
+export const toApiParams = ({ page, itemsPerPage, filter, dateRange }: VisitsParams): ShlinkVisitsParams => {
+  const startDate = (dateRange?.startDate && formatIsoDate(dateRange?.startDate)) ?? undefined;
+  const endDate = (dateRange?.endDate && formatIsoDate(dateRange?.endDate)) ?? undefined;
+  const excludeBots = filter?.excludeBots || undefined; // eslint-disable-line @typescript-eslint/prefer-nullish-coalescing
 
-    const { orphanVisitsType, excludeBots } = filters;
-
-    if (orphanVisitsType && orphanVisitsType !== (normalizedVisit as NormalizedOrphanVisit).type) {
-      return false;
-    }
-
-    return !(excludeBots && normalizedVisit.potentialBot);
-  }),
-)(visits);
+  return { page, itemsPerPage, startDate, endDate, excludeBots };
+};

src/visits/types/index.ts

@@ -1,6 +1,7 @@
 import { Action } from 'redux';
 import { ShortUrl } from '../../short-urls/data';
 import { ProblemDetailsError } from '../../api/types';
+import { DateRange } from '../../utils/dates/types';
 
 export interface VisitsInfo {
   visits: Visit[];
@@ -99,3 +100,10 @@ export interface VisitsFilter {
   orphanVisitsType?: OrphanVisitType | undefined;
   excludeBots?: boolean;
 }
+
+export interface VisitsParams {
+  page?: number;
+  itemsPerPage?: number;
+  dateRange?: DateRange;
+  filter?: VisitsFilter;
+}