Added not-enabled sorting on tags table

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/utils';
+import { determineOrderDir, OrderDir } from '../utils/helpers/ordering';
 import { getServerId, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { parseQuery } from '../utils/helpers/query';

src/short-urls/reducers/shortUrlsListParams.ts

@@ -1,5 +1,5 @@
 import { buildActionCreator, buildReducer } from '../../utils/helpers/redux';
-import { OrderDir } from '../../utils/utils';
+import { OrderDir } from '../../utils/helpers/ordering';
 import { LIST_SHORT_URLS, ListShortUrlsAction } from './shortUrlsList';
 
 export const RESET_SHORT_URL_PARAMS = 'shlink/shortUrlsListParams/RESET_SHORT_URL_PARAMS';

src/tags/TagsTable.scss

@@ -6,4 +6,5 @@
 
   top: $headerHeight;
   position: sticky;
+  cursor: pointer;
 }

src/tags/TagsTable.tsx

@@ -1,24 +1,37 @@
-import { FC, useEffect, useRef } from 'react';
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { splitEvery } from 'ramda';
 import { RouteChildrenProps } from 'react-router';
 import { SimpleCard } from '../utils/SimpleCard';
-import ColorGenerator from '../utils/services/ColorGenerator';
 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 { TagsListChildrenProps } from './data/TagsListChildrenProps';
 import { TagsTableRowProps } from './TagsTableRow';
+import { NormalizedTag } from './data';
 import './TagsTable.scss';
 
 const TAGS_PER_PAGE = 20; // TODO Allow customizing this value in settings
 
-export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC<TagsTableRowProps>) => (
+type OrderableFields = 'tag' | 'shortUrls' | 'visits';
+type TagsOrder = Order<OrderableFields>;
+
+export const TagsTable = (TagsTableRow: FC<TagsTableRowProps>) => (
   { tagsList, selectedServer, location }: TagsListChildrenProps & RouteChildrenProps,
 ) => {
   const isFirstLoad = useRef(true);
   const { page: pageFromQuery = 1 } = parseQuery<{ page?: number | string }>(location.search);
   const [ page, setPage ] = useQueryState<number>('page', Number(pageFromQuery));
-  const sortedTags = tagsList.filteredTags; // TODO Support sorting tags
+  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 sortedTags = sortList<NormalizedTag>(normalizedTags, order);
   const pages = splitEvery(TAGS_PER_PAGE, sortedTags);
   const showPaginator = pages.length > 1;
   const currentPage = pages[page - 1] ?? [];
@@ -45,15 +58,7 @@ export const TagsTable = (colorGenerator: ColorGenerator, TagsTableRow: FC<TagsT
         </thead>
         <tbody>
           {currentPage.length === 0 && <tr><td colSpan={4} className="text-center">No results found</td></tr>}
-          {currentPage.map((tag) => (
-            <TagsTableRow
-              key={tag}
-              tag={tag}
-              tagStats={tagsList.stats[tag]}
-              selectedServer={selectedServer}
-              colorGenerator={colorGenerator}
-            />
-          ))}
+          {currentPage.map((tag) => <TagsTableRow key={tag.tag} tag={tag} selectedServer={selectedServer} />)}
         </tbody>
       </table>
 

src/tags/TagsTableRow.tsx

@@ -9,18 +9,18 @@ import { prettify } from '../utils/helpers/numbers';
 import { useToggle } from '../utils/helpers/hooks';
 import { DropdownBtnMenu } from '../utils/DropdownBtnMenu';
 import TagBullet from './helpers/TagBullet';
-import { TagModalProps, TagStats } from './data';
+import { NormalizedTag, TagModalProps } from './data';
 
 export interface TagsTableRowProps {
-  tag: string;
-  tagStats?: TagStats;
+  tag: NormalizedTag;
   selectedServer: SelectedServer;
-  colorGenerator: ColorGenerator;
 }
 
-export const TagsTableRow = (DeleteTagConfirmModal: FC<TagModalProps>, EditTagModal: FC<TagModalProps>) => (
-  { tag, tagStats, colorGenerator, selectedServer }: TagsTableRowProps,
-) => {
+export const TagsTableRow = (
+  DeleteTagConfirmModal: FC<TagModalProps>,
+  EditTagModal: FC<TagModalProps>,
+  colorGenerator: ColorGenerator,
+) => ({ tag, selectedServer }: TagsTableRowProps) => {
   const [ isDeleteModalOpen, toggleDelete ] = useToggle();
   const [ isEditModalOpen, toggleEdit ] = useToggle();
   const [ isDropdownOpen, toggleDropdown ] = useToggle();
@@ -29,16 +29,16 @@ export const TagsTableRow = (DeleteTagConfirmModal: FC<TagModalProps>, EditTagMo
   return (
     <tr className="responsive-table__row">
       <th className="responsive-table__cell" data-th="Tag">
-        <TagBullet tag={tag} colorGenerator={colorGenerator} /> {tag}
+        <TagBullet tag={tag.tag} colorGenerator={colorGenerator} /> {tag.tag}
       </th>
       <td className="responsive-table__cell text-lg-right" data-th="Short URLs">
-        <Link to={`/server/${serverId}/list-short-urls/1?tag=${encodeURIComponent(tag)}`}>
-          {prettify(tagStats?.shortUrlsCount ?? 0)}
+        <Link to={`/server/${serverId}/list-short-urls/1?tag=${encodeURIComponent(tag.tag)}`}>
+          {prettify(tag.shortUrls)}
         </Link>
       </td>
       <td className="responsive-table__cell text-lg-right" data-th="Visits">
-        <Link to={`/server/${serverId}/tag/${tag}/visits`}>
-          {prettify(tagStats?.visitsCount ?? 0)}
+        <Link to={`/server/${serverId}/tag/${tag.tag}/visits`}>
+          {prettify(tag.visits)}
         </Link>
       </td>
       <td className="responsive-table__cell text-lg-right">
@@ -52,8 +52,8 @@ export const TagsTableRow = (DeleteTagConfirmModal: FC<TagModalProps>, EditTagMo
         </DropdownBtnMenu>
       </td>
 
-      <EditTagModal tag={tag} toggle={toggleEdit} isOpen={isEditModalOpen} />
-      <DeleteTagConfirmModal tag={tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
+      <EditTagModal tag={tag.tag} toggle={toggleEdit} isOpen={isEditModalOpen} />
+      <DeleteTagConfirmModal tag={tag.tag} toggle={toggleDelete} isOpen={isDeleteModalOpen} />
     </tr>
   );
 };

src/tags/data/index.ts

@@ -8,3 +8,9 @@ export interface TagModalProps {
   isOpen: boolean;
   toggle: () => void;
 }
+
+export interface NormalizedTag {
+  tag: string;
+  shortUrls: number;
+  visits: number;
+}

src/tags/services/provideServices.ts

@@ -27,9 +27,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
   bottle.decorator('EditTagModal', connect([ 'tagEdit' ], [ 'editTag', 'tagEdited' ]));
 
   bottle.serviceFactory('TagsCards', TagsCards, 'TagCard');
-  bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal');
+  bottle.serviceFactory('TagsTableRow', TagsTableRow, 'DeleteTagConfirmModal', 'EditTagModal', 'ColorGenerator');
 
-  bottle.serviceFactory('TagsTable', TagsTable, 'ColorGenerator', 'TagsTableRow');
+  bottle.serviceFactory('TagsTable', TagsTable, 'TagsTableRow');
   bottle.decorator('TagsTable', withRouter);
 
   bottle.serviceFactory('TagsList', TagsList, 'TagsCards', 'TagsTable');

src/utils/SortingDropdown.tsx

@@ -3,7 +3,7 @@ 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 './utils';
+import { determineOrderDir, OrderDir } from './helpers/ordering';
 import './SortingDropdown.scss';
 
 export interface SortingDropdownProps<T extends string = string> {

src/utils/helpers/ordering.ts

@@ -0,0 +1,32 @@
+export type OrderDir = 'ASC' | 'DESC' | undefined;
+
+export interface Order<Fields> {
+  field?: Fields;
+  dir?: OrderDir;
+}
+
+export const determineOrderDir = <T extends string = string>(
+  currentField: T,
+  newField?: T,
+  currentOrderDir?: OrderDir,
+): OrderDir => {
+  if (currentField !== newField) {
+    return 'ASC';
+  }
+
+  const newOrderMap: Record<'ASC' | 'DESC', OrderDir> = {
+    ASC: 'DESC',
+    DESC: undefined,
+  };
+
+  return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
+};
+
+export const sortList = <List>(list: List[], { field, dir }: Order<Partial<keyof List>>) => !field || !dir
+  ? list
+  : list.sort((a, b) => {
+    const greaterThan = dir === 'ASC' ? 1 : -1;
+    const smallerThan = dir === 'ASC' ? -1 : 1;
+
+    return a[field] > b[field] ? greaterThan : smallerThan;
+  });

src/utils/utils.ts

@@ -1,25 +1,6 @@
 import { isEmpty, isNil, pipe, range } from 'ramda';
 import { SyntheticEvent } from 'react';
 
-export type OrderDir = 'ASC' | 'DESC' | undefined;
-
-export const determineOrderDir = <T extends string = string>(
-  currentField: T,
-  newField?: T,
-  currentOrderDir?: OrderDir,
-): OrderDir => {
-  if (currentField !== newField) {
-    return 'ASC';
-  }
-
-  const newOrderMap: Record<'ASC' | 'DESC', OrderDir> = {
-    ASC: 'DESC',
-    DESC: undefined,
-  };
-
-  return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
-};
-
 export const rangeOf = <T>(size: number, mappingFn: (value: number) => T, startAt = 1): T[] =>
   range(startAt, size + 1).map(mappingFn);
 

src/visits/VisitsTable.tsx

@@ -11,7 +11,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { UncontrolledTooltip } from 'reactstrap';
 import SimplePaginator from '../common/SimplePaginator';
 import SearchField from '../utils/SearchField';
-import { determineOrderDir, OrderDir } from '../utils/utils';
+import { determineOrderDir, Order, sortList } from '../utils/helpers/ordering';
 import { prettify } from '../utils/helpers/numbers';
 import { supportsBotVisits } from '../utils/helpers/features';
 import { SelectedServer } from '../servers/data';
@@ -29,11 +29,7 @@ export interface VisitsTableProps {
 }
 
 type OrderableFields = 'date' | 'country' | 'city' | 'browser' | 'os' | 'referer' | 'visitedUrl' | 'potentialBot';
-
-interface Order {
-  field?: OrderableFields;
-  dir?: OrderDir;
-}
+type VisitsOrder = Order<OrderableFields>;
 
 const PAGE_SIZE = 20;
 const visitMatchesSearch = ({ browser, os, referer, country, city, ...rest }: NormalizedVisit, searchTerm: string) =>
@@ -42,15 +38,8 @@ const visitMatchesSearch = ({ browser, os, referer, country, city, ...rest }: No
   );
 const searchVisits = (searchTerm: string, visits: NormalizedVisit[]) =>
   visits.filter((visit) => visitMatchesSearch(visit, searchTerm));
-const sortVisits = ({ field, dir }: Order, visits: NormalizedVisit[]) => !field || !dir ? visits : visits.sort(
-  (a, b) => {
-    const greaterThan = dir === 'ASC' ? 1 : -1;
-    const smallerThan = dir === 'ASC' ? -1 : 1;
-
-    return (a as NormalizedOrphanVisit)[field] > (b as NormalizedOrphanVisit)[field] ? greaterThan : smallerThan;
-  },
-);
-const calculateVisits = (allVisits: NormalizedVisit[], searchTerm: string | undefined, order: Order) => {
+const sortVisits = (order: VisitsOrder, visits: NormalizedVisit[]) => sortList<NormalizedVisit>(visits, order as any);
+const calculateVisits = (allVisits: NormalizedVisit[], searchTerm: string | undefined, order: VisitsOrder) => {
   const filteredVisits = searchTerm ? searchVisits(searchTerm, allVisits) : [ ...allVisits ];
   const sortedVisits = sortVisits(order, filteredVisits);
   const total = sortedVisits.length;
@@ -72,7 +61,7 @@ const VisitsTable = ({
 
   const [ isMobileDevice, setIsMobileDevice ] = useState(matchMobile());
   const [ searchTerm, setSearchTerm ] = useState<string | undefined>(undefined);
-  const [ order, setOrder ] = useState<Order>({ field: undefined, dir: undefined });
+  const [ order, setOrder ] = useState<VisitsOrder>({});
   const resultSet = useMemo(() => calculateVisits(visits, searchTerm, order), [ searchTerm, order ]);
   const isFirstLoad = useRef(true);
   const [ page, setPage ] = useState(1);

src/visits/charts/SortableBarChartCard.tsx

@@ -1,6 +1,7 @@
 import { FC, useState } from 'react';
 import { fromPairs, pipe, reverse, sortBy, splitEvery, toLower, toPairs, type, zipObj } from 'ramda';
-import { OrderDir, rangeOf } from '../../utils/utils';
+import { rangeOf } from '../../utils/utils';
+import { OrderDir } from '../../utils/helpers/ordering';
 import SimplePaginator from '../../common/SimplePaginator';
 import { roundTen } from '../../utils/helpers/numbers';
 import SortingDropdown from '../../utils/SortingDropdown';

test/tags/TagsTable.test.tsx

@@ -2,7 +2,6 @@ import { Mock } from 'ts-mockery';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { match } from 'react-router';
 import { Location, History } from 'history';
-import ColorGenerator from '../../src/utils/services/ColorGenerator';
 import { TagsTable as createTagsTable } from '../../src/tags/TagsTable';
 import { SelectedServer } from '../../src/servers/data';
 import { TagsList } from '../../src/tags/reducers/tagsList';
@@ -10,9 +9,8 @@ import { rangeOf } from '../../src/utils/utils';
 import SimplePaginator from '../../src/common/SimplePaginator';
 
 describe('<TagsTable />', () => {
-  const colorGenerator = Mock.all<ColorGenerator>();
   const TagsTableRow = () => null;
-  const TagsTable = createTagsTable(colorGenerator, TagsTableRow);
+  const TagsTable = createTagsTable(TagsTableRow);
   const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`);
   let wrapper: ShallowWrapper;
   const createWrapper = (filteredTags: string[] = [], search = '') => {
@@ -86,7 +84,7 @@ describe('<TagsTable />', () => {
 
     expect(tagRows).toHaveLength(expectedRows);
     tagRows.forEach((row, index) => {
-      expect(row.prop('tag')).toEqual(`tag_${index + offset + 1}`);
+      expect(row.prop('tag')).toEqual(expect.objectContaining({ tag: `tag_${index + offset + 1}` }));
     });
   });
 

test/tags/TagsTableRow.test.tsx

@@ -5,21 +5,18 @@ import { DropdownItem } from 'reactstrap';
 import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow';
 import { ReachableServer } from '../../src/servers/data';
 import ColorGenerator from '../../src/utils/services/ColorGenerator';
-import { TagStats } from '../../src/tags/data';
 import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu';
 
 describe('<TagsTableRow />', () => {
   const DeleteTagConfirmModal = () => null;
   const EditTagModal = () => null;
-  const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal);
+  const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal, Mock.all<ColorGenerator>());
   let wrapper: ShallowWrapper;
-  const createWrapper = (tagStats?: TagStats) => {
+  const createWrapper = (tagStats?: { visits?: number; shortUrls?: number }) => {
     wrapper = shallow(
       <TagsTableRow
-        tag="foo&bar"
-        tagStats={tagStats}
+        tag={{ tag: 'foo&bar', visits: tagStats?.visits ?? 0, shortUrls: tagStats?.shortUrls ?? 0 }}
         selectedServer={Mock.of<ReachableServer>({ id: 'abc123' })}
-        colorGenerator={Mock.all<ColorGenerator>()}
       />,
     );
 
@@ -30,7 +27,7 @@ describe('<TagsTableRow />', () => {
 
   it.each([
     [ undefined, '0', '0' ],
-    [ Mock.of<TagStats>({ shortUrlsCount: 10, visitsCount: 3480 }), '10', '3,480' ],
+    [{ shortUrls: 10, visits: 3480 }, '10', '3,480' ],
   ])('shows expected tag stats', (stats, expectedShortUrls, expectedVisits) => {
     const wrapper = createWrapper(stats);
     const links = wrapper.find(Link);

test/utils/SortingDropdown.test.tsx

@@ -4,7 +4,7 @@ import { identity, values } from 'ramda';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSortAmountDown as caretDownIcon } from '@fortawesome/free-solid-svg-icons';
 import SortingDropdown, { SortingDropdownProps } from '../../src/utils/SortingDropdown';
-import { OrderDir } from '../../src/utils/utils';
+import { OrderDir } from '../../src/utils/helpers/ordering';
 
 describe('<SortingDropdown />', () => {
   let wrapper: ShallowWrapper;

test/utils/utils.test.ts

@@ -1,4 +1,5 @@
-import { capitalize, determineOrderDir, nonEmptyValueOrNull, rangeOf } from '../../src/utils/utils';
+import { capitalize, nonEmptyValueOrNull, rangeOf } from '../../src/utils/utils';
+import { determineOrderDir } from '../../src/utils/helpers/ordering';
 
 describe('utils', () => {
   describe('determineOrderDir', () => {

test/visits/charts/SortableBarChartCard.test.tsx

@@ -2,7 +2,8 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { range } from 'ramda';
 import SortingDropdown from '../../../src/utils/SortingDropdown';
 import PaginationDropdown from '../../../src/utils/PaginationDropdown';
-import { OrderDir, rangeOf } from '../../../src/utils/utils';
+import { rangeOf } from '../../../src/utils/utils';
+import { OrderDir } from '../../../src/utils/helpers/ordering';
 import { Stats } from '../../../src/visits/types';
 import { SortableBarChartCard } from '../../../src/visits/charts/SortableBarChartCard';
 import { HorizontalBarChart } from '../../../src/visits/charts/HorizontalBarChart';