Added logic to order tags list

src/short-urls/ShortUrlsList.scss

@@ -1,3 +0,0 @@
-.short-urls-list__header-icon {
-  margin-left: .4rem;
-}

src/short-urls/ShortUrlsList.tsx

@@ -5,7 +5,7 @@ import { FC, useEffect, useState } from 'react';
 import { RouteComponentProps } from 'react-router';
 import { Card } from 'reactstrap';
 import SortingDropdown from '../utils/SortingDropdown';
-import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
+import { determineOrderDir, Order, OrderDir } from '../utils/helpers/ordering';
 import { getServerId, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { parseQuery } from '../utils/helpers/query';
@@ -14,7 +14,6 @@ import { ShortUrlsList as ShortUrlsListState } from './reducers/shortUrlsList';
 import { OrderableFields, ShortUrlsListParams, SORTABLE_FIELDS } from './reducers/shortUrlsListParams';
 import { ShortUrlsTableProps } from './ShortUrlsTable';
 import Paginator from './Paginator';
-import './ShortUrlsList.scss';
 
 interface RouteParams {
   page: string;
@@ -29,6 +28,8 @@ export interface ShortUrlsListProps extends RouteComponentProps<RouteParams> {
   resetShortUrlParams: () => void;
 }
 
+type ShortUrlsOrder = Order<OrderableFields>;
+
 const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercureHub(({
   listShortUrls,
   resetShortUrlParams,
@@ -39,34 +40,20 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
   selectedServer,
 }: ShortUrlsListProps) => {
   const { orderBy } = shortUrlsListParams;
-  const [ order, setOrder ] = useState<{ orderField?: OrderableFields; orderDir?: OrderDir }>({
-    orderField: orderBy && (head(keys(orderBy)) as OrderableFields),
-    orderDir: orderBy && head(values(orderBy)),
+  const [ order, setOrder ] = useState<ShortUrlsOrder>({
+    field: orderBy && (head(keys(orderBy)) as OrderableFields),
+    dir: orderBy && head(values(orderBy)),
   });
   const { pagination } = shortUrlsList?.shortUrls ?? {};
   const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
-  const handleOrderBy = (orderField?: OrderableFields, orderDir?: OrderDir) => {
-    setOrder({ orderField, orderDir });
-    refreshList({ orderBy: orderField ? { [orderField]: orderDir } : undefined });
+  const handleOrderBy = (field?: OrderableFields, dir?: OrderDir) => {
+    setOrder({ field, dir });
+    refreshList({ orderBy: field ? { [field]: dir } : undefined });
   };
   const orderByColumn = (field: OrderableFields) => () =>
-    handleOrderBy(field, determineOrderDir(field, order.orderField, order.orderDir));
-  const renderOrderIcon = (field: OrderableFields) => {
-    if (order.orderField !== field) {
-      return null;
-    }
-
-    if (!order.orderDir) {
-      return null;
-    }
-
-    return (
-      <FontAwesomeIcon
-        icon={order.orderDir === 'ASC' ? caretUpIcon : caretDownIcon}
-        className="short-urls-list__header-icon"
-      />
-    );
-  };
+    handleOrderBy(field, determineOrderDir(field, order.field, order.dir));
+  const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field &&
+    <FontAwesomeIcon icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
 
   useEffect(() => {
     const { tag } = parseQuery<{ tag?: string }>(location.search);
@@ -82,8 +69,8 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
       <div className="d-block d-lg-none mb-3">
         <SortingDropdown
           items={SORTABLE_FIELDS}
-          orderField={order.orderField}
-          orderDir={order.orderDir}
+          orderField={order.field}
+          orderDir={order.dir}
           onChange={handleOrderBy}
         />
       </div>

src/short-urls/ShortUrlsTable.tsx

@@ -63,34 +63,29 @@ export const ShortUrlsTable = (ShortUrlsRow: FC<ShortUrlsRowProps>) => ({
       <thead className="responsive-table__header short-urls-table__header">
         <tr>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('dateCreated')}>
-            Created at
-            {renderOrderIcon?.('dateCreated')}
+            Created at {renderOrderIcon?.('dateCreated')}
           </th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('shortCode')}>
-            Short URL
-            {renderOrderIcon?.('shortCode')}
+            Short URL {renderOrderIcon?.('shortCode')}
           </th>
           {!supportsTitle && (
             <th className={orderableColumnsClasses} onClick={orderByColumn?.('longUrl')}>
-              Long URL
-              {renderOrderIcon?.('longUrl')}
+              Long URL {renderOrderIcon?.('longUrl')}
             </th>
           ) || (
             <th className="short-urls-table__header-cell">
               <span className={actionableFieldClasses} onClick={orderByColumn?.('title')}>
-                Title
-                {renderOrderIcon?.('title')}
+                Title {renderOrderIcon?.('title')}
               </span>
               &nbsp;&nbsp;/&nbsp;&nbsp;
               <span className={actionableFieldClasses} onClick={orderByColumn?.('longUrl')}>
-                <span className="indivisible">Long URL</span>
-                {renderOrderIcon?.('longUrl')}
+                <span className="indivisible">Long URL</span> {renderOrderIcon?.('longUrl')}
               </span>
             </th>
           )}
           <th className="short-urls-table__header-cell">Tags</th>
           <th className={orderableColumnsClasses} onClick={orderByColumn?.('visits')}>
-            <span className="indivisible">Visits{renderOrderIcon?.('visits')}</span>
+            <span className="indivisible">Visits {renderOrderIcon?.('visits')}</span>
           </th>
           <th className="short-urls-table__header-cell">&nbsp;</th>
         </tr>

src/tags/TagsTable.tsx

@@ -1,11 +1,13 @@
 import { FC, useEffect, useMemo, useRef, useState } from 'react';
-import { splitEvery } from 'ramda';
+import { pipe, splitEvery } from 'ramda';
 import { RouteChildrenProps } from 'react-router';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretDown as caretDownIcon, faCaretUp as caretUpIcon } from '@fortawesome/free-solid-svg-icons';
 import { SimpleCard } from '../utils/SimpleCard';
 import SimplePaginator from '../common/SimplePaginator';
 import { useQueryState } from '../utils/helpers/hooks';
 import { parseQuery } from '../utils/helpers/query';
-import { Order, sortList } from '../utils/helpers/ordering';
+import { determineOrderDir, Order, sortList } from '../utils/helpers/ordering';
 import { TagsListChildrenProps } from './data/TagsListChildrenProps';
 import { TagsTableRowProps } from './TagsTableRow';
 import { NormalizedTag } from './data';
@@ -22,20 +24,27 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
   const isFirstLoad = useRef(true);
   const { page: pageFromQuery = 1 } = parseQuery<{ page?: number | string }>(location.search);
   const [ page, setPage ] = useQueryState<number>('page', Number(pageFromQuery));
-  const [ order ] = useState<TagsOrder>({});
-  const normalizedTags = useMemo(
-    () => tagsList.filteredTags.map((tag): NormalizedTag => ({
-      tag,
-      shortUrls: tagsList.stats[tag]?.shortUrlsCount ?? 0,
-      visits: tagsList.stats[tag]?.visitsCount ?? 0,
-    })),
-    [ tagsList.filteredTags ],
+  const [ order, setOrder ] = useState<TagsOrder>({});
+  const sortedTags = useMemo(
+    pipe(
+      () => tagsList.filteredTags.map((tag): NormalizedTag => ({
+        tag,
+        shortUrls: tagsList.stats[tag]?.shortUrlsCount ?? 0,
+        visits: tagsList.stats[tag]?.visitsCount ?? 0,
+      })),
+      (normalizedTags) => sortList<NormalizedTag>(normalizedTags, order),
+    ),
+    [ tagsList.filteredTags, order ],
   );
-  const sortedTags = sortList<NormalizedTag>(normalizedTags, order);
   const pages = splitEvery(TAGS_PER_PAGE, sortedTags);
   const showPaginator = pages.length > 1;
   const currentPage = pages[page - 1] ?? [];
 
+  const orderByColumn = (field: OrderableFields) =>
+    () => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
+  const renderOrderIcon = (field: OrderableFields) => order.dir && order.field === field &&
+    <FontAwesomeIcon icon={order.dir === 'ASC' ? caretUpIcon : caretDownIcon} className="ml-1" />;
+
   useEffect(() => {
     !isFirstLoad.current && setPage(1);
     isFirstLoad.current = false;
@@ -49,9 +58,13 @@ export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
       <table className="table table-hover mb-0">
         <thead className="responsive-table__header">
           <tr>
-            <th className="tags-table__header-cell">Tag</th>
-            <th className="tags-table__header-cell text-lg-right">Short URLs</th>
-            <th className="tags-table__header-cell text-lg-right">Visits</th>
+            <th className="tags-table__header-cell" onClick={orderByColumn('tag')}>Tag {renderOrderIcon('tag')}</th>
+            <th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('shortUrls')}>
+              Short URLs {renderOrderIcon('shortUrls')}
+            </th>
+            <th className="tags-table__header-cell text-lg-right" onClick={orderByColumn('visits')}>
+              Visits {renderOrderIcon('visits')}
+            </th>
             <th className="tags-table__header-cell" />
           </tr>
           <tr><th colSpan={4} className="p-0 border-top-0" /></tr>

test/short-urls/ShortUrlsList.test.tsx

@@ -79,13 +79,13 @@ describe('<ShortUrlsList />', () => {
     const renderIcon = (field: OrderableFields) =>
       (wrapper.find(ShortUrlsTable).prop('renderOrderIcon') as (field: OrderableFields) => ReactElement | null)(field);
 
-    expect(renderIcon('visits')).toEqual(null);
+    expect(renderIcon('visits')).toEqual(undefined);
 
     wrapper.find(SortingDropdown).simulate('change', 'visits');
-    expect(renderIcon('visits')).toEqual(null);
+    expect(renderIcon('visits')).toEqual(undefined);
 
     wrapper.find(SortingDropdown).simulate('change', 'visits', 'ASC');
-    expect(renderIcon('visits')).not.toEqual(null);
+    expect(renderIcon('visits')).not.toEqual(undefined);
   });
 
   it('handles order by through table', () => {