Added short URLs orderBy handling to the query state

src/api/services/ShlinkApiClient.ts

@@ -19,17 +19,14 @@ import {
   ShlinkShortUrlsListNormalizedParams,
 } from '../types';
 import { stringifyQuery } from '../../utils/helpers/query';
+import { orderToString } from '../../utils/helpers/ordering';
 
 const buildShlinkBaseUrl = (url: string, apiVersion: number) => url ? `${url}/rest/v${apiVersion}` : '';
 const rejectNilProps = reject(isNil);
 const normalizeOrderByInParams = (params: ShlinkShortUrlsListParams): ShlinkShortUrlsListNormalizedParams => {
   const { orderBy = {}, ...rest } = params;
-  const { field, dir } = orderBy;
 
-  return !dir ? rest : {
-    ...rest,
-    orderBy: `${field}-${dir}`,
-  };
+  return { ...rest, orderBy: orderToString(orderBy) };
 };
 
 export default class ShlinkApiClient {

src/short-urls/SearchBar.scss

@@ -1,3 +0,0 @@
-.search-bar__tags-icon {
-  vertical-align: bottom;
-}

src/short-urls/ShortUrlsFilteringBar.scss

@@ -0,0 +1,3 @@
+.short-urls-filtering-bar__tags-icon {
+  vertical-align: bottom;
+}

src/short-urls/ShortUrlsFilteringBar.tsx

@@ -10,13 +10,13 @@ import { formatIsoDate } from '../utils/helpers/date';
 import ColorGenerator from '../utils/services/ColorGenerator';
 import { DateRange } from '../utils/dates/types';
 import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
-import './SearchBar.scss';
+import './ShortUrlsFilteringBar.scss';
 
-export type SearchBarProps = RouteChildrenProps<ShortUrlListRouteParams>;
+export type ShortUrlsFilteringProps = RouteChildrenProps<ShortUrlListRouteParams>;
 
 const dateOrNull = (date?: string) => date ? parseISO(date) : null;
 
-const SearchBar = (colorGenerator: ColorGenerator) => (props: SearchBarProps) => {
+const ShortUrlsFilteringBar = (colorGenerator: ColorGenerator) => (props: ShortUrlsFilteringProps) => {
   const [{ search, tags, startDate, endDate }, toFirstPage ] = useShortUrlsQuery(props);
   const selectedTags = tags?.split(',') ?? [];
   const setDates = pipe(
@@ -37,7 +37,7 @@ const SearchBar = (colorGenerator: ColorGenerator) => (props: SearchBarProps) =>
   );
 
   return (
-    <div className="search-bar-container">
+    <div className="short-urls-filtering-bar-container">
       <SearchField initialValue={search} onChange={setSearch} />
 
       <div className="mt-3">
@@ -56,8 +56,8 @@ const SearchBar = (colorGenerator: ColorGenerator) => (props: SearchBarProps) =>
       </div>
 
       {selectedTags.length > 0 && (
-        <h4 className="search-bar__selected-tag mt-3">
-          <FontAwesomeIcon icon={tagsIcon} className="search-bar__tags-icon" />
+        <h4 className="short-urls-filtering-bar__selected-tag mt-3">
+          <FontAwesomeIcon icon={tagsIcon} className="short-urls-filtering-bar__tags-icon" />
           &nbsp;
           {selectedTags.map((tag) =>
             <Tag colorGenerator={colorGenerator} key={tag} text={tag} clearable onClose={() => removeTag(tag)} />)}
@@ -67,4 +67,4 @@ const SearchBar = (colorGenerator: ColorGenerator) => (props: SearchBarProps) =>
   );
 };
 
-export default SearchBar;
+export default ShortUrlsFilteringBar;

src/short-urls/ShortUrlsList.tsx

@@ -14,7 +14,7 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
 import { ShortUrlListRouteParams, useShortUrlsQuery } from './helpers/hooks';
-import { ShortUrlsOrderableFields, ShortUrlsOrder, SHORT_URLS_ORDERABLE_FIELDS } from './data';
+import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from './data';
 
 interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams> {
   selectedServer: SelectedServer;
@@ -23,7 +23,7 @@ interface ShortUrlsListProps extends RouteComponentProps<ShortUrlListRouteParams
   settings: Settings;
 }
 
-const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) => boundToMercureHub(({
+const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, ShortUrlsFilteringBar: FC) => boundToMercureHub(({
   listShortUrls,
   match,
   location,
@@ -33,16 +33,21 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
   settings,
 }: ShortUrlsListProps) => {
   const serverId = getServerId(selectedServer);
-  const initialOrderBy = settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING;
-  const [ order, setOrder ] = useState<ShortUrlsOrder>(initialOrderBy);
-  const [{ tags, search, startDate, endDate }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
+  const [{ tags, search, startDate, endDate, orderBy }, toFirstPage ] = useShortUrlsQuery({ history, match, location });
+  const [ actualOrderBy, setActualOrderBy ] = useState(
+    // This separated state handling is needed to be able to fall back to settings value, but only once when loaded
+    orderBy ?? settings.shortUrlsList?.defaultOrdering ?? DEFAULT_SHORT_URLS_ORDERING,
+  );
   const selectedTags = useMemo(() => tags?.split(',') ?? [], [ tags ]);
   const { pagination } = shortUrlsList?.shortUrls ?? {};
-
-  const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => setOrder({ field, dir });
+  const handleOrderBy = (field?: ShortUrlsOrderableFields, dir?: OrderDir) => {
+    toFirstPage({ orderBy: { field, dir } });
+    setActualOrderBy({ field, dir });
+  };
   const orderByColumn = (field: ShortUrlsOrderableFields) => () =>
-    handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
-  const renderOrderIcon = (field: ShortUrlsOrderableFields) => <TableOrderIcon currentOrder={order} field={field} />;
+    handleOrderBy(field, determineOrderDir(field, actualOrderBy.field, actualOrderBy.dir));
+  const renderOrderIcon = (field: ShortUrlsOrderableFields) =>
+    <TableOrderIcon currentOrder={actualOrderBy} field={field} />;
   const addTag = pipe(
     (newTag: string) => [ ...new Set([ ...selectedTags, newTag ]) ].join(','),
     (tags) => toFirstPage({ tags }),
@@ -53,18 +58,17 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>, SearchBar: FC) =
       page: match.params.page,
       searchTerm: search,
       tags: selectedTags,
-      itemsPerPage: undefined,
       startDate,
       endDate,
-      orderBy: order,
+      orderBy: actualOrderBy,
     });
-  }, [ match.params.page, search, selectedTags, startDate, endDate, order ]);
+  }, [ match.params.page, search, selectedTags, startDate, endDate, actualOrderBy ]);
 
   return (
     <>
-      <div className="mb-3"><SearchBar /></div>
+      <div className="mb-3"><ShortUrlsFilteringBar /></div>
       <div className="d-block d-lg-none mb-3">
-        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={order} onChange={handleOrderBy} />
+        <OrderingDropdown items={SHORT_URLS_ORDERABLE_FIELDS} order={actualOrderBy} onChange={handleOrderBy} />
       </div>
       <Card body className="pb-1">
         <ShortUrlsTable

src/short-urls/helpers/hooks.ts

@@ -1,27 +1,50 @@
 import { RouteChildrenProps } from 'react-router-dom';
 import { useMemo } from 'react';
-import { isEmpty } from 'ramda';
+import { isEmpty, pipe } from 'ramda';
 import { parseQuery, stringifyQuery } from '../../utils/helpers/query';
+import { ShortUrlsOrder, ShortUrlsOrderableFields } from '../data';
+import { orderToString, stringToOrder } from '../../utils/helpers/ordering';
 
 type ServerIdRouteProps = RouteChildrenProps<{ serverId: string }>;
-type ToFirstPage = (extra: Partial<ShortUrlsQuery>) => void;
+type ToFirstPage = (extra: Partial<ShortUrlsFiltering>) => void;
 
 export interface ShortUrlListRouteParams {
   page: string;
   serverId: string;
 }
 
-interface ShortUrlsQuery {
+interface ShortUrlsQueryCommon {
   tags?: string;
   search?: string;
   startDate?: string;
   endDate?: 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 });
+interface ShortUrlsQuery extends ShortUrlsQueryCommon {
+  orderBy?: string;
+}
+
+interface ShortUrlsFiltering extends ShortUrlsQueryCommon {
+  orderBy?: ShortUrlsOrder;
+}
+
+export const useShortUrlsQuery = (
+  { history, location, match }: ServerIdRouteProps,
+): [ShortUrlsFiltering, ToFirstPage] => {
+  const query = useMemo(
+    pipe(
+      () => parseQuery<ShortUrlsQuery>(location.search),
+      ({ orderBy, ...rest }: ShortUrlsQuery): ShortUrlsFiltering => !orderBy ? rest : {
+        ...rest,
+        orderBy: stringToOrder<ShortUrlsOrderableFields>(orderBy),
+      },
+    ),
+    [ location.search ],
+  );
+  const toFirstPageWithExtra = (extra: Partial<ShortUrlsFiltering>) => {
+    const { orderBy, ...mergedQuery } = { ...query, ...extra };
+    const normalizedQuery: ShortUrlsQuery = { ...mergedQuery, orderBy: orderBy && orderToString(orderBy) };
+    const evolvedQuery = stringifyQuery(normalizedQuery);
     const queryString = isEmpty(evolvedQuery) ? '' : `?${evolvedQuery}`;
 
     history.push(`/server/${match?.params.serverId}/list-short-urls/1${queryString}`);

src/short-urls/services/provideServices.ts

@@ -1,5 +1,5 @@
 import Bottle, { Decorator } from 'bottlejs';
-import SearchBar from '../SearchBar';
+import ShortUrlsFilteringBar from '../ShortUrlsFilteringBar';
 import ShortUrlsList from '../ShortUrlsList';
 import ShortUrlsRow from '../helpers/ShortUrlsRow';
 import ShortUrlsRowMenu from '../helpers/ShortUrlsRowMenu';
@@ -19,7 +19,7 @@ import { getShortUrlDetail } from '../reducers/shortUrlDetail';
 
 const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter: Decorator) => {
   // Components
-  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'SearchBar');
+  bottle.serviceFactory('ShortUrlsList', ShortUrlsList, 'ShortUrlsTable', 'ShortUrlsFilteringBar');
   bottle.decorator('ShortUrlsList', connect(
     [ 'selectedServer', 'mercureInfo', 'shortUrlsList', 'settings' ],
     [ 'listShortUrls', 'createNewVisits', 'loadMercureInfo' ],
@@ -50,8 +50,8 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.decorator('QrCodeModal', connect([ 'selectedServer' ]));
 
   // Services
-  bottle.serviceFactory('SearchBar', SearchBar, 'ColorGenerator');
-  bottle.decorator('SearchBar', withRouter);
+  bottle.serviceFactory('ShortUrlsFilteringBar', ShortUrlsFilteringBar, 'ColorGenerator');
+  bottle.decorator('ShortUrlsFilteringBar', withRouter);
 
   // Actions
   bottle.serviceFactory('listShortUrls', listShortUrls, 'buildShlinkApiClient');

src/utils/helpers/ordering.ts

@@ -30,3 +30,12 @@ export const sortList = <List>(list: List[], { field, dir }: Order<Partial<keyof
 
     return a[field] > b[field] ? greaterThan : smallerThan;
   });
+
+export const orderToString = <T>(order: Order<T>): string | undefined =>
+  order.dir ? `${order.field}-${order.dir}` : undefined;
+
+export const stringToOrder = <T>(order: string): Order<T> => {
+  const [ field, dir ] = order.split('-') as [ T | undefined, OrderDir | undefined ];
+
+  return { field, dir };
+};