Moved dates handling in short URLs list to query

src/short-urls/SearchBar.tsx

@@ -14,23 +14,20 @@ import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
 import './SearchBar.scss';
 
 export interface SearchBarProps extends RouteChildrenProps<ShortUrlListRouteParams> {
-  listShortUrls: (params: ShortUrlsListParams) => void;
   shortUrlsListParams: ShortUrlsListParams;
 }
 
 const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
-const SearchBar = (colorGenerator: ColorGenerator) => (
-  { listShortUrls, shortUrlsListParams, ...rest }: SearchBarProps,
-) => {
-  const [{ search, tags }, toFirstPage ] = useShortUrlsQuery(rest);
-  const selectedTags = tags?.split(',').map(decodeURIComponent) ?? [];
+const SearchBar = (colorGenerator: ColorGenerator) => ({ shortUrlsListParams, ...rest }: SearchBarProps) => {
+  const [{ search, tags, startDate, endDate }, toFirstPage ] = useShortUrlsQuery(rest);
+  const selectedTags = tags?.split(',') ?? [];
   const setDates = pipe(
     ({ startDate, endDate }: DateRange) => ({
       startDate: formatIsoDate(startDate) ?? undefined,
       endDate: formatIsoDate(endDate) ?? undefined,
     }),
-    (dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
+    toFirstPage,
   );
   const setSearch = pipe(
     (searchTerm: string) => isEmpty(searchTerm) ? undefined : searchTerm,
@@ -52,8 +49,8 @@ const SearchBar = (colorGenerator: ColorGenerator) => (
             <DateRangeSelector
               defaultText="All short URLs"
               initialDateRange={{
-                startDate: dateOrNull(shortUrlsListParams.startDate),
-                endDate: dateOrNull(shortUrlsListParams.endDate),
+                startDate: dateOrNull(startDate),
+                endDate: dateOrNull(endDate),
               }}
               onDatesChange={setDates}
             />

src/short-urls/ShortUrlsList.tsx

@@ -40,8 +40,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
     field: orderBy && (head(keys(orderBy)) as OrderableFields),
     dir: orderBy && head(values(orderBy)),
   });
-  const [{ tags, search }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
-  const decodedTags = useMemo(() => tags?.split(',').map(decodeURIComponent) ?? [], [ tags ]);
+  const [{ tags, search, startDate, endDate }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
+  const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
   const { pagination } = shortUrlsList?.shortUrls ?? {};
 
   const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
@@ -53,14 +53,16 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
     handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
   const renderOrderIcon = (field: OrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
   const addTag = pipe(
-    (newTag: string) => [ ...new Set([ ...decodedTags, newTag ]) ].join(','),
+    (newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
     (tags) => toFirstPage({ tags }),
   );
 
   useEffect(() => resetShortUrlParams, []);
   useEffect(() => {
-    refreshList({ page: match.params.page, searchTerm: search, tags: decodedTags, itemsPerPage: undefined });
-  }, [ match.params.page, search, decodedTags ]);
+    refreshList(
+      { page: match.params.page, searchTerm: search, tags: selectedTags, itemsPerPage: undefined, startDate, endDate },
+    );
+  }, [ match.params.page, search, selectedTags, startDate, endDate ]);
 
   return (
     <>

src/short-urls/helpers/hooks.ts

@@ -14,6 +14,8 @@ export interface ShortUrlListRouteParams {
 interface ShortUrlsQuery {
   tags?: string;
   search?: string;
+  startDate?: string;
+  endDate?: string;
 }
 
 export const useShortUrlsQuery = ({ history, location, match }: ServerIdRouteProps): [ShortUrlsQuery, ToFirstPage] => {

src/short-urls/services/provideServices.ts

@@ -52,7 +52,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
 
   // Services
   bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
-  bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ], [ 'listShortUrls' ]));
+  bottle.decorator('SearchBar', connect([ 'shortUrlsListParams' ]));
   bottle.decorator('SearchBar', withRouter);
 
   // Actions