Updated sorting dropdown to accept an order object instead of two individual props

src/short-urls/ShortUrlsList.tsx

@@ -67,12 +67,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
   return (
     <>
       <div className="d-block d-lg-none mb-3">
-        <SortingDropdown
-          items={SORTABLE_FIELDS}
-          orderField={order.field}
-          orderDir={order.dir}
-          onChange={handleOrderBy}
-        />
+        <SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={handleOrderBy} />
       </div>
       <Card body className="pb-1">
         <ShortUrlsTable

src/tags/TagsList.tsx

@@ -55,8 +55,11 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
     );
   }
 
-  const orderByColumn = (field: OrderableFields) =>
-    () => setOrder({ field, dir: determineOrderDir(field, order.field, order.dir) });
+  const orderByColumn = (field: OrderableFields) => () => {
+    const dir = determineOrderDir(field, order.field, order.dir);
+
+    setOrder({ field: dir ? field : undefined, dir });
+  };
 
   const renderContent = () => {
     if (tagsList.filteredTags.length < 1) {
@@ -85,12 +88,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
           <TagsModeDropdown mode={mode} onChange={setMode} />
         </div>
         <div className="col-lg-6 mt-3 mt-lg-0">
-          <SortingDropdown
-            items={SORTABLE_FIELDS}
-            orderField={order.field}
-            orderDir={order.dir}
-            onChange={(field, dir) => setOrder({ field, dir })}
-          />
+          <SortingDropdown items={SORTABLE_FIELDS} order={order} onChange={(field, dir) => setOrder({ field, dir })} />
         </div>
       </Row>
       {renderContent()}

src/utils/SortingDropdown.tsx

@@ -3,23 +3,22 @@ import { toPairs } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountUp as sortAscIcon, faSortAmountDown as sortDescIcon } from '@fortawesome/free-solid-svg-icons';
 import classNames from 'classnames';
-import { determineOrderDir, OrderDir } from './helpers/ordering';
+import { determineOrderDir, Order, OrderDir } from './helpers/ordering';
 import './SortingDropdown.scss';
 
 export interface SortingDropdownProps<T extends string = string> {
   items: Record<T, string>;
-  orderField?: T;
-  orderDir?: OrderDir;
+  order: Order<T>;
   onChange: (orderField?: T, orderDir?: OrderDir) => void;
   isButton?: boolean;
   right?: boolean;
 }
 
 export default function SortingDropdown<T extends string = string>(
-  { items, orderField, orderDir, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
+  { items, order, onChange, isButton = true, right = false }: SortingDropdownProps<T>,
 ) {
   const handleItemClick = (fieldKey: T) => () => {
-    const newOrderDir = determineOrderDir(fieldKey, orderField, orderDir);
+    const newOrderDir = determineOrderDir(fieldKey, order.field, order.dir);
 
     onChange(newOrderDir ? fieldKey : undefined, newOrderDir);
   };
@@ -32,26 +31,26 @@ export default function SortingDropdown<T extends string = string>(
         className={classNames({ 'dropdown-btn__toggle btn-block': isButton, 'btn-sm p-0': !isButton })}
       >
         {!isButton && <>Order by</>}
-        {isButton && !orderField && <>Order by...</>}
-        {isButton && orderField && `Order by: "${items[orderField]}" - "${orderDir ?? 'DESC'}"`}
+        {isButton && !order.field && <>Order by...</>}
+        {isButton && order.field && `Order by: "${items[order.field]}" - "${order.dir ?? 'DESC'}"`}
       </DropdownToggle>
       <DropdownMenu
         right={right}
         className={classNames('w-100', { 'sorting-dropdown__menu--link': !isButton })}
       >
         {toPairs(items).map(([ fieldKey, fieldValue ]) => (
-          <DropdownItem key={fieldKey} active={orderField === fieldKey} onClick={handleItemClick(fieldKey as T)}>
+          <DropdownItem key={fieldKey} active={order.field === fieldKey} onClick={handleItemClick(fieldKey as T)}>
             {fieldValue}
-            {orderField === fieldKey && (
+            {order.field === fieldKey && (
               <FontAwesomeIcon
-                icon={orderDir === 'ASC' ? sortAscIcon : sortDescIcon}
+                icon={order.dir === 'ASC' ? sortAscIcon : sortDescIcon}
                 className="sorting-dropdown__sort-icon"
               />
             )}
           </DropdownItem>
         ))}
         <DropdownItem divider />
-        <DropdownItem disabled={!orderField} onClick={() => onChange()}>
+        <DropdownItem disabled={!order.field} onClick={() => onChange()}>
           <i>Clear selection</i>
         </DropdownItem>
       </DropdownMenu>

src/visits/charts/SortableBarChartCard.tsx

@@ -1,7 +1,7 @@
 import { FC, useState } from 'react';
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
 import { rangeOf } from '../../utils/utils';
-import { OrderDir } from '../../utils/helpers/ordering';
+import { Order } from '../../utils/helpers/ordering';
 import SimplePaginator from '../../common/SimplePaginator';
 import { roundTen } from '../../utils/helpers/numbers';
 import SortingDropdown from '../../utils/SortingDropdown';
@@ -30,24 +30,21 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
   withPagination = true,
   ...rest
 }) => {
-  const [ order, setOrder ] = useState<{ orderField?: string; orderDir?: OrderDir }>({
-    orderField: undefined,
-    orderDir: undefined,
-  });
+  const [ order, setOrder ] = useState<Order<string>>({});
   const [ currentPage, setCurrentPage ] = useState(1);
   const [ itemsPerPage, setItemsPerPage ] = useState(50);
 
   const getSortedPairsForStats = (stats: Stats, sortingItems: Record<string, string>) => {
     const pairs = toPairs(stats);
-    const sortedPairs = !order.orderField ? pairs : sortBy(
+    const sortedPairs = !order.field ? pairs : sortBy(
       pipe<StatsRow, string | number, string | number>(
-        order.orderField === Object.keys(sortingItems)[0] ? pickKeyFromPair : pickValueFromPair,
+        order.field === Object.keys(sortingItems)[0] ? pickKeyFromPair : pickValueFromPair,
         toLowerIfString,
       ),
       pairs,
     );
 
-    return !order.orderDir || order.orderDir === 'ASC' ? sortedPairs : reverse(sortedPairs);
+    return !order.dir || order.dir === 'ASC' ? sortedPairs : reverse(sortedPairs);
   };
   const determineCurrentPagePairs = (pages: StatsRow[][]): StatsRow[] => {
     const page = pages[currentPage - 1];
@@ -103,10 +100,9 @@ export const SortableBarChartCard: FC<SortableBarChartCardProps> = ({
           isButton={false}
           right
           items={sortingItems}
-          orderField={order.orderField}
-          orderDir={order.orderDir}
-          onChange={(orderField, orderDir) => {
-            setOrder({ orderField, orderDir });
+          order={order}
+          onChange={(field, dir) => {
+            setOrder({ field, dir });
             setCurrentPage(1);
           }}
         />