From 5a373fd7ae1d59f4fbee5dd59e953d96cd94e531 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 21 Feb 2021 20:55:39 +0100
Subject: [PATCH 1/2] Added new card in overview to display orphan visits

---
 src/api/types/index.ts                |  1 +
 src/servers/Overview.tsx              | 21 +++++++++++++++++----
 src/visits/reducers/visitsOverview.ts |  4 +++-
 test/servers/Overview.test.tsx        | 11 ++++++-----
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/api/types/index.ts b/src/api/types/index.ts
index c5728797..4ca5f7e3 100644
--- a/src/api/types/index.ts
+++ b/src/api/types/index.ts
@@ -46,6 +46,7 @@ export interface ShlinkVisits {
 
 export interface ShlinkVisitsOverview {
   visitsCount: number;
+  orphanVisitsCount?: number; // Optional only for versions older than 2.6.0
 }
 
 export interface ShlinkVisitsParams {
diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx
index 892fe46e..71bc58d6 100644
--- a/src/servers/Overview.tsx
+++ b/src/servers/Overview.tsx
@@ -38,7 +38,7 @@ export const Overview = (
 }: OverviewConnectProps) => {
   const { loading, shortUrls } = shortUrlsList;
   const { loading: loadingTags } = tagsList;
-  const { loading: loadingVisits, visitsCount } = visitsOverview;
+  const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
   const serverId = isServerWithId(selectedServer) ? selectedServer.id : '';
   const history = useHistory();
 
@@ -51,7 +51,7 @@ export const Overview = (
   return (
     <>
       <div className="row mb-3">
-        <div className="col-md-6 col-lg-4">
+        <div className="col-md-6 col-xl-3">
           <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
             <CardText tag="h2">
@@ -64,7 +64,20 @@ export const Overview = (
             </CardText>
           </Card>
         </div>
-        <div className="col-md-6 col-lg-4">
+        <div className="col-md-6 col-xl-3">
+          <Card className="overview__card mb-2" body>
+            <CardTitle tag="h5" className="overview__card-title">Orphan visits</CardTitle>
+            <CardText tag="h2">
+              <ForServerVersion minVersion="2.6.0">
+                {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
+              </ForServerVersion>
+              <ForServerVersion maxVersion="2.5.*">
+                <small className="text-muted"><i>Shlink 2.6 is needed</i></small>
+              </ForServerVersion>
+            </CardText>
+          </Card>
+        </div>
+        <div className="col-md-6 col-xl-3">
           <Card className="overview__card mb-2" body>
             <CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
             <CardText tag="h2">
@@ -72,7 +85,7 @@ export const Overview = (
             </CardText>
           </Card>
         </div>
-        <div className="col-md-12 col-lg-4">
+        <div className="col-md-6 col-xl-3">
           <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>
diff --git a/src/visits/reducers/visitsOverview.ts b/src/visits/reducers/visitsOverview.ts
index e3f78e59..ac51abf8 100644
--- a/src/visits/reducers/visitsOverview.ts
+++ b/src/visits/reducers/visitsOverview.ts
@@ -13,6 +13,7 @@ export const GET_OVERVIEW = 'shlink/visitsOverview/GET_OVERVIEW';
 
 export interface VisitsOverview {
   visitsCount: number;
+  orphanVisitsCount?: number;
   loading: boolean;
   error: boolean;
 }
@@ -21,6 +22,7 @@ export type GetVisitsOverviewAction = ShlinkVisitsOverview & Action<string>;
 
 const initialState: VisitsOverview = {
   visitsCount: 0,
+  orphanVisitsCount: 0,
   loading: false,
   error: false,
 };
@@ -28,7 +30,7 @@ const initialState: VisitsOverview = {
 export default buildReducer<VisitsOverview, GetVisitsOverviewAction & CreateVisitsAction>({
   [GET_OVERVIEW_START]: () => ({ ...initialState, loading: true }),
   [GET_OVERVIEW_ERROR]: () => ({ ...initialState, error: true }),
-  [GET_OVERVIEW]: (_, { visitsCount }) => ({ ...initialState, visitsCount }),
+  [GET_OVERVIEW]: (_, { visitsCount, orphanVisitsCount }) => ({ ...initialState, visitsCount, orphanVisitsCount }),
   [CREATE_VISITS]: ({ visitsCount, ...rest }, { createdVisits }) => ({
     ...rest,
     visitsCount: visitsCount + createdVisits.length,
diff --git a/test/servers/Overview.test.tsx b/test/servers/Overview.test.tsx
index f2ea285f..7827b637 100644
--- a/test/servers/Overview.test.tsx
+++ b/test/servers/Overview.test.tsx
@@ -32,7 +32,7 @@ describe('<Overview />', () => {
         loadVisitsOverview={loadVisitsOverview}
         shortUrlsList={Mock.of<ShortUrlsListState>({ loading, shortUrls })}
         tagsList={Mock.of<TagsList>({ loading, tags: [ 'foo', 'bar', 'baz' ] })}
-        visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456 })}
+        visitsOverview={Mock.of<VisitsOverview>({ loading, visitsCount: 3456, orphanVisitsCount: 28 })}
         selectedServer={Mock.of<ReachableServer>({ id: serverId })}
         createNewVisits={jest.fn()}
         loadMercureInfo={jest.fn()}
@@ -49,7 +49,7 @@ describe('<Overview />', () => {
     const wrapper = createWrapper(true);
     const cards = wrapper.find(CardText);
 
-    expect(cards).toHaveLength(3);
+    expect(cards).toHaveLength(4);
     cards.forEach((card) => expect(card.html()).toContain('Loading...'));
   });
 
@@ -57,10 +57,11 @@ describe('<Overview />', () => {
     const wrapper = createWrapper();
     const cards = wrapper.find(CardText);
 
-    expect(cards).toHaveLength(3);
+    expect(cards).toHaveLength(4);
     expect(cards.at(0).html()).toContain(prettify(3456));
-    expect(cards.at(1).html()).toContain(prettify(83710));
-    expect(cards.at(2).html()).toContain(prettify(3));
+    expect(cards.at(1).html()).toContain(prettify(28));
+    expect(cards.at(2).html()).toContain(prettify(83710));
+    expect(cards.at(3).html()).toContain(prettify(3));
   });
 
   test('first card displays warning for old shlink versions', () => {

From e2d26e8bdd503ed2adba5e48e711da65785c5672 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sun, 21 Feb 2021 20:57:57 +0100
Subject: [PATCH 2/2] Updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4abdf179..b9880d0d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Added
 * [#379](https://github.com/shlinkio/shlink-web-client/issues/379) and [#384](https://github.com/shlinkio/shlink-web-client/issues/384) Improved QR code modal, including controls to customize size, format and margin, as well as a button to copy the link to the clipboard.
 * [#385](https://github.com/shlinkio/shlink-web-client/issues/385) Added setting to determine if "validate URL" should be enabled or disabled by default.
+* [#386](https://github.com/shlinkio/shlink-web-client/issues/386) Added new card in overview section to display amount of orphan visits when using Shlink 2.6.0 or higher.
 
 ### Changed
 * *Nothing*