From 5241925acc2e37012dfd8d367574dfc21dc1ddc3 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Mon, 1 Nov 2021 12:48:11 +0100
Subject: [PATCH] Added not-enabled sorting on tags table

---
 src/short-urls/ShortUrlsList.tsx              |  2 +-
 .../reducers/shortUrlsListParams.ts           |  2 +-
 src/tags/TagsTable.scss                       |  1 +
 src/tags/TagsTable.tsx                        | 31 ++++++++++--------
 src/tags/TagsTableRow.tsx                     | 28 ++++++++--------
 src/tags/data/index.ts                        |  6 ++++
 src/tags/services/provideServices.ts          |  4 +--
 src/utils/SortingDropdown.tsx                 |  2 +-
 src/utils/helpers/ordering.ts                 | 32 +++++++++++++++++++
 src/utils/utils.ts                            | 19 -----------
 src/visits/VisitsTable.tsx                    | 21 +++---------
 src/visits/charts/SortableBarChartCard.tsx    |  3 +-
 test/tags/TagsTable.test.tsx                  |  6 ++--
 test/tags/TagsTableRow.test.tsx               | 11 +++----
 test/utils/SortingDropdown.test.tsx           |  2 +-
 test/utils/utils.test.ts                      |  3 +-
 .../charts/SortableBarChartCard.test.tsx      |  3 +-
 17 files changed, 94 insertions(+), 82 deletions(-)
 create mode 100644 src/utils/helpers/ordering.ts

diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx
index 570f57d1..855d2e52 100644
--- a/src/short-urls/ShortUrlsList.tsx
+++ b/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';
diff --git a/src/short-urls/reducers/shortUrlsListParams.ts b/src/short-urls/reducers/shortUrlsListParams.ts
index 0dd034aa..1f16e562 100644
--- a/src/short-urls/reducers/shortUrlsListParams.ts
+++ b/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';
diff --git a/src/tags/TagsTable.scss b/src/tags/TagsTable.scss
index 94728f7b..a6e4dceb 100644
--- a/src/tags/TagsTable.scss
+++ b/src/tags/TagsTable.scss
@@ -6,4 +6,5 @@
 
   top: $headerHeight;
   position: sticky;
+  cursor: pointer;
 }
diff --git a/src/tags/TagsTable.tsx b/src/tags/TagsTable.tsx
index 7caec4af..2208f669 100644
--- a/src/tags/TagsTable.tsx
+++ b/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>
 
diff --git a/src/tags/TagsTableRow.tsx b/src/tags/TagsTableRow.tsx
index dff5f936..c030e4f8 100644
--- a/src/tags/TagsTableRow.tsx
+++ b/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>
   );
 };
diff --git a/src/tags/data/index.ts b/src/tags/data/index.ts
index 2a1e1aa8..8210a98b 100644
--- a/src/tags/data/index.ts
+++ b/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;
+}
diff --git a/src/tags/services/provideServices.ts b/src/tags/services/provideServices.ts
index 1e3e8d39..0068d9d6 100644
--- a/src/tags/services/provideServices.ts
+++ b/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');
diff --git a/src/utils/SortingDropdown.tsx b/src/utils/SortingDropdown.tsx
index d9e06ec3..bba0bed7 100644
--- a/src/utils/SortingDropdown.tsx
+++ b/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> {
diff --git a/src/utils/helpers/ordering.ts b/src/utils/helpers/ordering.ts
new file mode 100644
index 00000000..f3f19cf3
--- /dev/null
+++ b/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;
+  });
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 2b62871e..e341e51d 100644
--- a/src/utils/utils.ts
+++ b/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);
 
diff --git a/src/visits/VisitsTable.tsx b/src/visits/VisitsTable.tsx
index ed791f67..202f1357 100644
--- a/src/visits/VisitsTable.tsx
+++ b/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);
diff --git a/src/visits/charts/SortableBarChartCard.tsx b/src/visits/charts/SortableBarChartCard.tsx
index e0f1bee5..b300af18 100644
--- a/src/visits/charts/SortableBarChartCard.tsx
+++ b/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';
diff --git a/test/tags/TagsTable.test.tsx b/test/tags/TagsTable.test.tsx
index ab674edc..8530406c 100644
--- a/test/tags/TagsTable.test.tsx
+++ b/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}` }));
     });
   });
 
diff --git a/test/tags/TagsTableRow.test.tsx b/test/tags/TagsTableRow.test.tsx
index 9787fbf9..d264bd32 100644
--- a/test/tags/TagsTableRow.test.tsx
+++ b/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);
diff --git a/test/utils/SortingDropdown.test.tsx b/test/utils/SortingDropdown.test.tsx
index 4f85c013..518b5f12 100644
--- a/test/utils/SortingDropdown.test.tsx
+++ b/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;
diff --git a/test/utils/utils.test.ts b/test/utils/utils.test.ts
index 22dcb8a4..44ad7b37 100644
--- a/test/utils/utils.test.ts
+++ b/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', () => {
diff --git a/test/visits/charts/SortableBarChartCard.test.tsx b/test/visits/charts/SortableBarChartCard.test.tsx
index f3b4e1f2..338b220b 100644
--- a/test/visits/charts/SortableBarChartCard.test.tsx
+++ b/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';