Extracted short URLs table into reusable component to use both on list section and overview section

src/servers/Overview.scss

@@ -0,0 +1,8 @@
+.overview__card.overview__card {
+  text-align: center;
+}
+
+.overview__card-title {
+  text-transform: uppercase;
+  color: #6c757d;
+}

src/servers/Overview.tsx

@@ -1,50 +1,77 @@
-import { useEffect } from 'react';
-import { Card, CardText, CardTitle } from 'reactstrap';
+import { FC, useEffect } from 'react';
+import { Card, CardBody, CardHeader, CardText, CardTitle } from 'reactstrap';
+import { Link } from 'react-router-dom';
 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';
+import { ShortUrlsTableProps } from '../short-urls/ShortUrlsTable';
+import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
+import { isServerWithId, SelectedServer } from './data';
+import './Overview.scss';
 
 interface OverviewConnectProps {
   shortUrlsList: ShortUrlsListState;
   listShortUrls: (params: ShortUrlsListParams) => void;
   listTags: Function;
   tagsList: TagsList;
+  selectedServer: SelectedServer;
 }
 
-export const Overview = ({ shortUrlsList, listShortUrls, listTags, tagsList }: OverviewConnectProps) => {
+export const Overview = (ShortUrlsTable: FC<ShortUrlsTableProps>) => boundToMercureHub((
+  { shortUrlsList, listShortUrls, listTags, tagsList, selectedServer }: OverviewConnectProps,
+) => {
   const { loading, error, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
+  const serverId = !isServerWithId(selectedServer) ? '' : selectedServer.id;
 
   useEffect(() => {
-    listShortUrls({ itemsPerPage: 5 });
+    listShortUrls({ itemsPerPage: 5, orderBy: { dateCreated: 'DESC' } });
     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 className="row mb-3">
+        <div className="col-sm-4">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
+            <CardText tag="h2">?</CardText>
+          </Card>
+        </div>
+        <div className="col-sm-4">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">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="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
+            <CardText tag="h2">{loadingTags ? 'Loading... ' : prettify(tagsList.tags.length)}</CardText>
+          </Card>
+        </div>
       </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>
+      <Card className="mb-4">
+        <CardHeader>
+          Create short URL
+          <Link className="float-right" to={`/server/${serverId}/create-short-url`}>More options &raquo;</Link>
+        </CardHeader>
+        <CardBody>Create</CardBody>
+      </Card>
+      <Card>
+        <CardHeader>
+          Recently created URLs
+          <Link className="float-right" to={`/server/${serverId}/list-short-urls/1`}>See all &raquo;</Link>
+        </CardHeader>
+        <CardBody>
+          <ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={selectedServer} className="mb-0" />
+        </CardBody>
+      </Card>
+    </>
   );
-};
+}, () => 'https://shlink.io/new-visit');

src/servers/services/provideServices.ts

@@ -44,10 +44,10 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator, withRouter:
   bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton');
   bottle.decorator('ServerError', connect([ 'servers', 'selectedServer' ]));
 
-  bottle.serviceFactory('Overview', () => Overview);
+  bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable');
   bottle.decorator('Overview', connect(
-    [ 'shortUrlsList', 'tagsList' ],
-    [ 'listShortUrls', 'listTags' ],
+    [ 'shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo' ],
+    [ 'listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo' ],
   ));
 
   // Services