From e583eb2759d06ea831cd9dbb11830bdd8038168c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Fri, 25 Dec 2020 11:15:49 +0100
Subject: [PATCH] Ensured sorting dropdown for short URLs is not enclosed
 inside card

---
 src/short-urls/ShortUrls.tsx       | 10 ++--------
 src/short-urls/ShortUrlsList.tsx   | 22 ++++++++++++++--------
 test/short-urls/ShortUrls.test.tsx |  4 +---
 3 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/short-urls/ShortUrls.tsx b/src/short-urls/ShortUrls.tsx
index d6dea6bc..13814837 100644
--- a/src/short-urls/ShortUrls.tsx
+++ b/src/short-urls/ShortUrls.tsx
@@ -1,12 +1,9 @@
 import { FC, useEffect, useState } from 'react';
-import { Card } from 'reactstrap';
-import Paginator from './Paginator';
 import { ShortUrlsListProps } from './ShortUrlsList';
 
 const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (props: ShortUrlsListProps) => {
-  const { match, shortUrlsList } = props;
+  const { match } = props;
   const { page = '1', serverId = '' } = match?.params ?? {};
-  const { pagination } = shortUrlsList?.shortUrls ?? {};
   const [ urlsListKey, setUrlsListKey ] = useState(`${serverId}_${page}`);
 
   // Using a key on a component makes react to create a new instance every time the key changes
@@ -18,10 +15,7 @@ const ShortUrls = (SearchBar: FC, ShortUrlsList: FC<ShortUrlsListProps>) => (pro
   return (
     <>
       <div className="form-group"><SearchBar /></div>
-      <Card body className="pb-1">
-        <ShortUrlsList {...props} key={urlsListKey} />
-        <Paginator paginator={pagination} serverId={serverId} />
-      </Card>
+      <ShortUrlsList {...props} key={urlsListKey} />
     </>
   );
 };
diff --git a/src/short-urls/ShortUrlsList.tsx b/src/short-urls/ShortUrlsList.tsx
index 86397f73..c92ec4c1 100644
--- a/src/short-urls/ShortUrlsList.tsx
+++ b/src/short-urls/ShortUrlsList.tsx
@@ -3,14 +3,16 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { head, keys, values } from 'ramda';
 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 { SelectedServer } from '../servers/data';
+import { isReachableServer, SelectedServer } from '../servers/data';
 import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
 import { parseQuery } from '../utils/helpers/query';
 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 {
@@ -40,6 +42,7 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
     orderField: orderBy && (head(keys(orderBy)) as OrderableFields),
     orderDir: orderBy && head(values(orderBy)),
   });
+  const { pagination } = shortUrlsList?.shortUrls ?? {};
   const refreshList = (extraParams: ShortUrlsListParams) => listShortUrls({ ...shortUrlsListParams, ...extraParams });
   const handleOrderBy = (orderField?: OrderableFields, orderDir?: OrderDir) => {
     setOrder({ orderField, orderDir });
@@ -83,13 +86,16 @@ const ShortUrlsList = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercur
           onChange={handleOrderBy}
         />
       </div>
-      <ShortUrlsTable
-        orderByColumn={orderByColumn}
-        renderOrderIcon={renderOrderIcon}
-        selectedServer={selectedServer}
-        shortUrlsList={shortUrlsList}
-        onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
-      />
+      <Card body className="pb-1">
+        <ShortUrlsTable
+          orderByColumn={orderByColumn}
+          renderOrderIcon={renderOrderIcon}
+          selectedServer={selectedServer}
+          shortUrlsList={shortUrlsList}
+          onTagClick={(tag) => refreshList({ tags: [ ...shortUrlsListParams.tags ?? [], tag ] })}
+        />
+        <Paginator paginator={pagination} serverId={isReachableServer(selectedServer) ? selectedServer.id : ''} />
+      </Card>
     </>
   );
 }, () => 'https://shlink.io/new-visit');
diff --git a/test/short-urls/ShortUrls.test.tsx b/test/short-urls/ShortUrls.test.tsx
index c47ba0ce..f4caed88 100644
--- a/test/short-urls/ShortUrls.test.tsx
+++ b/test/short-urls/ShortUrls.test.tsx
@@ -1,7 +1,6 @@
 import { shallow, ShallowWrapper } from 'enzyme';
 import { Mock } from 'ts-mockery';
 import shortUrlsCreator from '../../src/short-urls/ShortUrls';
-import Paginator from '../../src/short-urls/Paginator';
 import { ShortUrlsListProps } from '../../src/short-urls/ShortUrlsList';
 
 describe('<ShortUrls />', () => {
@@ -18,9 +17,8 @@ describe('<ShortUrls />', () => {
   });
   afterEach(() => wrapper.unmount());
 
-  it('wraps a SearchBar, ShortUrlsList as Paginator', () => {
+  it('wraps a SearchBar and ShortUrlsList', () => {
     expect(wrapper.find(SearchBar)).toHaveLength(1);
     expect(wrapper.find(ShortUrlsList)).toHaveLength(1);
-    expect(wrapper.find(Paginator)).toHaveLength(1);
   });
 });