From dba0ac644299b9e6d1449bc50da83336009261b7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 6 Dec 2020 18:32:24 +0100
Subject: [PATCH] Created Overview page as default page after connecting to a
 server

---
 src/common/AsideMenu.tsx                      |  5 ++
 src/common/MenuLayout.tsx                     |  2 +
 src/common/services/provideServices.ts        |  1 +
 src/servers/CreateServer.tsx                  |  2 +-
 src/servers/DeleteServerModal.tsx             |  2 +-
 src/servers/EditServer.tsx                    |  2 +-
 src/servers/Overview.tsx                      | 50 +++++++++++++++++++
 src/servers/ServersDropdown.tsx               |  2 +-
 src/servers/ServersListGroup.tsx              |  2 +-
 src/servers/services/provideServices.ts       |  7 +++
 .../reducers/shortUrlsListParams.ts           |  1 +
 src/utils/services/types.ts                   |  1 +
 test/common/AsideMenu.test.tsx                |  2 +-
 13 files changed, 73 insertions(+), 6 deletions(-)
 create mode 100644 src/servers/Overview.tsx

diff --git a/src/common/AsideMenu.tsx b/src/common/AsideMenu.tsx
index c2745041..28cfb9f7 100644
--- a/src/common/AsideMenu.tsx
+++ b/src/common/AsideMenu.tsx
@@ -3,6 +3,7 @@ import {
   faLink as createIcon,
   faTags as tagsIcon,
   faPen as editIcon,
+  faHome as overviewIcon,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FC } from 'react';
@@ -48,6 +49,10 @@ const AsideMenu = (DeleteServerButton: FC<DeleteServerButtonProps>) => (
   return (
     <aside className={asideClass}>
       <nav className="nav flex-column aside-menu__nav">
+        <AsideMenuItem to={buildPath('/overview')}>
+          <FontAwesomeIcon icon={overviewIcon} />
+          <span className="aside-menu__item-text">Overview</span>
+        </AsideMenuItem>
         <AsideMenuItem to={buildPath('/list-short-urls/1')} isActive={shortUrlsIsActive}>
           <FontAwesomeIcon icon={listIcon} />
           <span className="aside-menu__item-text">List short URLs</span>
diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx
index 780be03b..b87010f0 100644
--- a/src/common/MenuLayout.tsx
+++ b/src/common/MenuLayout.tsx
@@ -20,6 +20,7 @@ const MenuLayout = (
   ShortUrlVisits: FC,
   TagVisits: FC,
   ServerError: FC,
+  Overview: FC,
 ) => withSelectedServer(({ location, selectedServer }) => {
   const [ sidebarVisible, toggleSidebar, showSidebar, hideSidebar ] = useToggle();
 
@@ -60,6 +61,7 @@ const MenuLayout = (
           <div className="col-lg-10 offset-lg-2 col-md-9 offset-md-3" onClick={() => hideSidebar()}>
             <div className="menu-layout__container">
               <Switch>
+                <Route exact path="/server/:serverId/overview" component={Overview} />
                 <Route exact path="/server/:serverId/list-short-urls/:page" component={ShortUrls} />
                 <Route exact path="/server/:serverId/create-short-url" component={CreateShortUrl} />
                 <Route exact path="/server/:serverId/short-code/:shortCode/visits" component={ShortUrlVisits} />
diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts
index fb63fde7..94f5d3bc 100644
--- a/src/common/services/provideServices.ts
+++ b/src/common/services/provideServices.ts
@@ -33,6 +33,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
     'ShortUrlVisits',
     'TagVisits',
     'ServerError',
+    'Overview',
   );
   bottle.decorator('MenuLayout', connect([ 'selectedServer', 'shortUrlsListParams' ], [ 'selectServer' ]));
   bottle.decorator('MenuLayout', withRouter);
diff --git a/src/servers/CreateServer.tsx b/src/servers/CreateServer.tsx
index 4d448285..d17621d3 100644
--- a/src/servers/CreateServer.tsx
+++ b/src/servers/CreateServer.tsx
@@ -39,7 +39,7 @@ const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagT
     const id = uuid();
 
     createServer({ ...serverData, id });
-    push(`/server/${id}/list-short-urls/1`);
+    push(`/server/${id}/overview`);
   };
 
   return (
diff --git a/src/servers/DeleteServerModal.tsx b/src/servers/DeleteServerModal.tsx
index 14d036c8..4d74869e 100644
--- a/src/servers/DeleteServerModal.tsx
+++ b/src/servers/DeleteServerModal.tsx
@@ -26,7 +26,7 @@ const DeleteServerModal = ({ server, toggle, isOpen, deleteServer, history }: De
         <p>Are you sure you want to remove <b>{server ? server.name : ''}</b>?</p>
         <p>
           <i>
-            No data will be deleted, only the access to this server will be removed from this host.
+            No data will be deleted, only the access to this server will be removed from this device.
             You can create it again at any moment.
           </i>
         </p>
diff --git a/src/servers/EditServer.tsx b/src/servers/EditServer.tsx
index 3a6d5630..1b1db461 100644
--- a/src/servers/EditServer.tsx
+++ b/src/servers/EditServer.tsx
@@ -18,7 +18,7 @@ export const EditServer = (ServerError: FC) => withSelectedServer<EditServerProp
 
   const handleSubmit = (serverData: ServerData) => {
     editServer(selectedServer.id, serverData);
-    push(`/server/${selectedServer.id}/list-short-urls/1`);
+    push(`/server/${selectedServer.id}/overview`);
   };
 
   return (
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
new file mode 100644
index 00000000..813b070a
--- /dev/null
+++ b/src/servers/Overview.tsx
@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { Card, CardText, CardTitle } from 'reactstrap';
+import { ShortUrlsListParams } from '../short-urls/reducers/shortUrlsListParams';
+import { ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
+import { prettify } from '../utils/helpers/numbers';
+import { TagsList } from '../tags/reducers/tagsList';
+
+interface OverviewConnectProps {
+  shortUrlsList: ShortUrlsListState;
+  listShortUrls: (params: ShortUrlsListParams) => void;
+  listTags: Function;
+  tagsList: TagsList;
+}
+
+export const Overview = ({ shortUrlsList, listShortUrls, listTags, tagsList }: OverviewConnectProps) => {
+  const { loading, error, shortUrls } = shortUrlsList;
+  const { loading: loadingTags } = tagsList;
+
+  useEffect(() => {
+    listShortUrls({ itemsPerPage: 5 });
+    listTags();
+  }, []);
+
+  return (
+    <div className="row">
+      <div className="col-sm-4">
+        <Card className="text-center mb-2 mb-sm-0" body>
+          <CardTitle tag="h5">Visits</CardTitle>
+          <CardText tag="h2">?</CardText>
+        </Card>
+      </div>
+      <div className="col-sm-4">
+        <Card className="text-center mb-2 mb-sm-0" body>
+          <CardTitle tag="h5">Short URLs</CardTitle>
+          <CardText tag="h2">
+            {loading && !error && 'Loading...'}
+            {error && !loading && 'Failed :('}
+            {!error && !loading && prettify(shortUrls?.pagination.totalItems ?? 0)}
+          </CardText>
+        </Card>
+      </div>
+      <div className="col-sm-4">
+        <Card className="text-center" body>
+          <CardTitle tag="h5">Tags</CardTitle>
+          <CardText tag="h2">{loadingTags ? 'Loading... ' : prettify(tagsList.tags.length)}</CardText>
+        </Card>
+      </div>
+    </div>
+  );
+};
diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index 468914c3..67f0d97f 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -23,7 +23,7 @@ const ServersDropdown = (serversExporter: ServersExporter) => ({ servers, select
           <DropdownItem
             key={id}
             tag={Link}
-            to={`/server/${id}/list-short-urls/1`}
+            to={`/server/${id}/overview`}
             active={isServerWithId(selectedServer) && selectedServer.id === id}
           >
             {name}
diff --git a/src/servers/ServersListGroup.tsx b/src/servers/ServersListGroup.tsx
index 73c81782..d96e0762 100644
--- a/src/servers/ServersListGroup.tsx
+++ b/src/servers/ServersListGroup.tsx
@@ -11,7 +11,7 @@ interface ServersListGroup {
 }
 
 const ServerListItem = ({ id, name }: { id: string; name: string }) => (
-  <ListGroupItem tag={Link} to={`/server/${id}/list-short-urls/1`} className="servers-list__server-item">
+  <ListGroupItem tag={Link} to={`/server/${id}/overview`} className="servers-list__server-item">
     {name}
     <FontAwesomeIcon icon={chevronIcon} className="servers-list__server-item-icon" />
   </ListGroupItem>
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts
index b9961f86..9b79e5e5 100644
--- a/src/servers/services/provideServices.ts
+++ b/src/servers/services/provideServices.ts
@@ -13,6 +13,7 @@ import ForServerVersion from '../helpers/ForServerVersion';
 import { ServerError } from '../helpers/ServerError';
 import { ConnectDecorator } from '../../container/types';
 import { withoutSelectedServer } from '../helpers/withoutSelectedServer';
+import { Overview } from '../Overview';
 import ServersImporter from './ServersImporter';
 import ServersExporter from './ServersExporter';
 
@@ -43,6 +44,12 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
 
+  bottle.serviceFactory('Overview', () => Overview);
+  bottle.decorator('Overview', connect(
+    [ 'shortUrlsList', 'tagsList' ],
+    [ 'listShortUrls', 'listTags' ],
+  ));
+
   // Services
   bottle.constant('csvjson', csvjson);
   bottle.constant('fileReaderFactory', () => new FileReader());
diff --git a/src/short-urls/reducers/shortUrlsListParams.ts b/src/short-urls/reducers/shortUrlsListParams.ts
index 1aa69804..88868df8 100644
--- a/src/short-urls/reducers/shortUrlsListParams.ts
+++ b/src/short-urls/reducers/shortUrlsListParams.ts
@@ -15,6 +15,7 @@ export type OrderableFields = keyof typeof SORTABLE_FIELDS;
 
 export interface ShortUrlsListParams {
   page?: string;
+  itemsPerPage?: number;
   tags?: string[];
   searchTerm?: string;
   startDate?: string;
diff --git a/src/utils/services/types.ts b/src/utils/services/types.ts
index df7687c3..6e70bd36 100644
--- a/src/utils/services/types.ts
+++ b/src/utils/services/types.ts
@@ -36,6 +36,7 @@ export interface ShlinkTagsResponse {
 export interface ShlinkPaginator {
   currentPage: number;
   pagesCount: number;
+  totalItems: number;
 }
 
 export interface ShlinkVisits {
diff --git a/test/common/AsideMenu.test.tsx b/test/common/AsideMenu.test.tsx
index 176d7be0..3eb9d918 100644
--- a/test/common/AsideMenu.test.tsx
+++ b/test/common/AsideMenu.test.tsx
@@ -17,7 +17,7 @@ describe('<AsideMenu />', () => {
   it('contains links to different sections', () => {
     const links = wrapped.find('[to]');
 
-    expect(links).toHaveLength(4);
+    expect(links).toHaveLength(5);
     links.forEach((link) => expect(link.prop('to')).toContain('abc123'));
   });