Improved SearchBar test

src/short-urls/SearchBar.tsx

@@ -2,6 +2,7 @@ import { faTags as tagsIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { isEmpty, pipe } from 'ramda';
 import { parseISO } from 'date-fns';
+import { RouteChildrenProps } from 'react-router-dom';
 import SearchField from '../utils/SearchField';
 import Tag from '../tags/helpers/Tag';
 import { DateRangeSelector } from '../utils/dates/DateRangeSelector';
@@ -9,17 +10,21 @@ import { formatIsoDate } from '../utils/helpers/date';
 import ColorGenerator from '../utils/services/ColorGenerator';
 import { DateRange } from '../utils/dates/types';
 import { ShortUrlsListParams } from './reducers/shortUrlsListParams';
+import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
 import './SearchBar.scss';
 
-interface SearchBarProps {
+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 }: SearchBarProps) => {
-  const selectedTags = shortUrlsListParams.tags ?? [];
+const SearchBar = (colorGenerator: ColorGenerator) => (
+  { listShortUrls, shortUrlsListParams, ...rest }: SearchBarProps,
+) => {
+  const [{ search, tags }, toFirstPage ] = useShortUrlsQuery(rest);
+  const selectedTags = tags?.split(',').map(decodeURIComponent) ?? [];
   const setDates = pipe(
     ({ startDate, endDate }: DateRange) => ({
       startDate: formatIsoDate(startDate) ?? undefined,
@@ -27,10 +32,19 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
     }),
     (dates) => listShortUrls({ ...shortUrlsListParams, ...dates }),
   );
+  const setSearch = pipe(
+    (searchTerm: string) => isEmpty(searchTerm) ? undefined : searchTerm,
+    (search) => toFirstPage({ search }),
+  );
+  const removeTag = pipe(
+    (tag: string) => selectedTags.filter((selectedTag) => selectedTag !== tag),
+    (tagsList) => tagsList.length === 0 ? undefined : tagsList.join(','),
+    (tags) => toFirstPage({ tags }),
+  );
 
   return (
     <div className="search-bar-container">
-      <SearchField onChange={(searchTerm) => listShortUrls({ ...shortUrlsListParams, searchTerm })} />
+      <SearchField initialValue={search} onChange={setSearch} />
 
       <div className="mt-3">
         <div className="row">
@@ -47,24 +61,12 @@ const SearchBar = (colorGenerator: ColorGenerator) => ({ listShortUrls, shortUrl
         </div>
       </div>
 
-      {!isEmpty(selectedTags) && (
+      {selectedTags.length > 0 && (
         <h4 className="search-bar__selected-tag mt-3">
           <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
           &nbsp;
-          {selectedTags.map((tag) => (
-            <Tag
-              colorGenerator={colorGenerator}
-              key={tag}
-              text={tag}
-              clearable
-              onClose={() => listShortUrls(
-                {
-                  ...shortUrlsListParams,
-                  tags: selectedTags.filter((selectedTag) => selectedTag !== tag),
-                },
-              )}
-            />
-          ))}
+          {selectedTags.map((tag) =>
+            <Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
         </h4>
       )}
     </div>

src/short-urls/helpers/hooks.ts

@@ -0,0 +1,29 @@
+import { RouteChildrenProps } from 'react-router-dom';
+import { useMemo } from 'react';
+import { isEmpty } from 'ramda';
+import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
+
+type ServerIdRouteProps = RouteChildrenProps<{ serverId: string }>;
+type ToFirstPage = (extra: Partial<ShortUrlsQuery>) => void;
+
+export interface ShortUrlListRouteParams {
+  page: string;
+  serverId: string;
+}
+
+interface ShortUrlsQuery {
+  tags?: string;
+  search?: string;
+}
+
+export const useShortUrlsQuery = ({ history, location, match }: ServerIdRouteProps): [ShortUrlsQuery, ToFirstPage] => {
+  const query = useMemo(() => parseQuery<ShortUrlsQuery>(location.search), [ location ]);
+  const toFirstPageWithExtra = (extra: Partial<ShortUrlsQuery>) => {
+    const evolvedQuery = stringifyQuery({ ...query, ...extra });
+    const queryString = isEmpty(evolvedQuery) ? '' : `?${evolvedQuery}`;
+
+    history.push(`/server/${match?.params.serverId}/list-short-urls/1${queryString}`);
+  };
+
+  return [ query, toFirstPageWithExtra ];
+};

src/utils/helpers/query.ts

@@ -3,6 +3,3 @@ import qs from 'qs';
 export const parseQuery = <T>(search: string) => qs.parse(search, { ignoreQueryPrefix: true }) as unknown as T;
 
 export const stringifyQuery = (query: any): string => qs.stringify(query, { arrayFormat: 'brackets' });
-
-export const evolveStringifiedQuery = (currentQuery: string, extra: any): string =>
-  stringifyQuery({ ...parseQuery(currentQuery), ...extra });