From 7a2d0e5dee6e022aa43e14a49076f7087d30f6db Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 6 Nov 2021 11:03:56 +0100
Subject: [PATCH] Added sorting dropdown for tags, that can be used regardless
 the display mode

---
 src/tags/TagsList.tsx                  | 14 ++++++++++++--
 src/tags/data/TagsListChildrenProps.ts |  8 +++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/tags/TagsList.tsx b/src/tags/TagsList.tsx
index 252ddfe2..4f32f9bb 100644
--- a/src/tags/TagsList.tsx
+++ b/src/tags/TagsList.tsx
@@ -12,8 +12,9 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
 import { Topics } from '../mercure/helpers/Topics';
 import { Settings, TagsMode } from '../settings/reducers/settings';
 import { determineOrderDir, sortList } from '../utils/helpers/ordering';
+import SortingDropdown from '../utils/SortingDropdown';
 import { TagsList as TagsListState } from './reducers/tagsList';
-import { OrderableFields, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
+import { OrderableFields, SORTABLE_FIELDS, TagsListChildrenProps, TagsOrder } from './data/TagsListChildrenProps';
 import { TagsModeDropdown } from './TagsModeDropdown';
 import { NormalizedTag } from './data';
 import { TagsTableProps } from './TagsTable';
@@ -55,6 +56,7 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
     () => 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" />;
+
   const renderContent = () => {
     if (tagsList.error) {
       return (
@@ -84,9 +86,17 @@ const TagsList = (TagsCards: FC<TagsListChildrenProps>, TagsTable: FC<TagsTableP
     <>
       <SearchField className="mb-3" onChange={filterTags} />
       <Row className="mb-3">
-        <div className="col-lg-6 offset-lg-6">
+        <div className="col-lg-6">
           <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 })}
+          />
+        </div>
       </Row>
       {renderContent()}
     </>
diff --git a/src/tags/data/TagsListChildrenProps.ts b/src/tags/data/TagsListChildrenProps.ts
index 17152d4d..e8e476a8 100644
--- a/src/tags/data/TagsListChildrenProps.ts
+++ b/src/tags/data/TagsListChildrenProps.ts
@@ -2,7 +2,13 @@ import { SelectedServer } from '../../servers/data';
 import { Order } from '../../utils/helpers/ordering';
 import { NormalizedTag } from './index';
 
-export type OrderableFields = 'tag' | 'shortUrls' | 'visits';
+export const SORTABLE_FIELDS = {
+  tag: 'Tag',
+  shortUrls: 'Short URLs',
+  visits: 'Visits',
+};
+
+export type OrderableFields = keyof typeof SORTABLE_FIELDS;
 
 export type TagsOrder = Order<OrderableFields>;