From c90cd46095392326cf34c90dc1b5def414cf5f5e Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Jan 2020 18:16:12 +0100
Subject: [PATCH 1/2] Removed old ExternalLink component in favor of external
 one

---
 src/short-urls/helpers/EditTagsModal.js      | 2 +-
 src/short-urls/helpers/PreviewModal.js       | 2 +-
 src/short-urls/helpers/QrCodeModal.js        | 2 +-
 src/short-urls/helpers/ShortUrlsRow.js       | 2 +-
 src/utils/ExternalLink.js                    | 3 ---
 src/visits/VisitsHeader.js                   | 2 +-
 test/short-urls/helpers/PreviewModal.test.js | 2 +-
 test/short-urls/helpers/QrCodeModal.test.js  | 2 +-
 test/short-urls/helpers/ShortUrlsRow.test.js | 2 +-
 test/visits/VisitsHeader.test.js             | 2 +-
 10 files changed, 9 insertions(+), 12 deletions(-)
 delete mode 100644 src/utils/ExternalLink.js

diff --git a/src/short-urls/helpers/EditTagsModal.js b/src/short-urls/helpers/EditTagsModal.js
index f5d34dd2..261b12e3 100644
--- a/src/short-urls/helpers/EditTagsModal.js
+++ b/src/short-urls/helpers/EditTagsModal.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
-import ExternalLink from '../../utils/ExternalLink';
+import { ExternalLink } from 'react-external-link';
 import { shortUrlTagsType } from '../reducers/shortUrlTags';
 import { shortUrlType } from '../reducers/shortUrlsList';
 
diff --git a/src/short-urls/helpers/PreviewModal.js b/src/short-urls/helpers/PreviewModal.js
index 8496be7a..9570ec75 100644
--- a/src/short-urls/helpers/PreviewModal.js
+++ b/src/short-urls/helpers/PreviewModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
 import './PreviewModal.scss';
-import ExternalLink from '../../utils/ExternalLink';
 
 const propTypes = {
   url: PropTypes.string,
diff --git a/src/short-urls/helpers/QrCodeModal.js b/src/short-urls/helpers/QrCodeModal.js
index 3a8cd43f..dcc8b323 100644
--- a/src/short-urls/helpers/QrCodeModal.js
+++ b/src/short-urls/helpers/QrCodeModal.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
 import './QrCodeModal.scss';
-import ExternalLink from '../../utils/ExternalLink';
 
 const propTypes = {
   url: PropTypes.string,
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 10585db7..55aadfa1 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -2,9 +2,9 @@ import { isEmpty } from 'ramda';
 import React from 'react';
 import Moment from 'react-moment';
 import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
 import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams';
 import { serverType } from '../../servers/prop-types';
-import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import Tag from '../../tags/helpers/Tag';
 import ShortUrlVisitsCount from './ShortUrlVisitsCount';
diff --git a/src/utils/ExternalLink.js b/src/utils/ExternalLink.js
deleted file mode 100644
index e11ad7c4..00000000
--- a/src/utils/ExternalLink.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { ExternalLink } from 'react-external-link';
-
-export default ExternalLink;
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index d631eb31..b4180572 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -1,7 +1,7 @@
 import { Card, UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
 import React from 'react';
-import ExternalLink from '../utils/ExternalLink';
+import { ExternalLink } from 'react-external-link';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import './VisitsHeader.scss';
diff --git a/test/short-urls/helpers/PreviewModal.test.js b/test/short-urls/helpers/PreviewModal.test.js
index 694eb0f7..ee7356be 100644
--- a/test/short-urls/helpers/PreviewModal.test.js
+++ b/test/short-urls/helpers/PreviewModal.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { ExternalLink } from 'react-external-link';
 import PreviewModal from '../../../src/short-urls/helpers/PreviewModal';
-import ExternalLink from '../../../src/utils/ExternalLink';
 
 describe('<PreviewModal />', () => {
   let wrapper;
diff --git a/test/short-urls/helpers/QrCodeModal.test.js b/test/short-urls/helpers/QrCodeModal.test.js
index 5999cf51..44ccf2a3 100644
--- a/test/short-urls/helpers/QrCodeModal.test.js
+++ b/test/short-urls/helpers/QrCodeModal.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { ExternalLink } from 'react-external-link';
 import QrCodeModal from '../../../src/short-urls/helpers/QrCodeModal';
-import ExternalLink from '../../../src/utils/ExternalLink';
 
 describe('<QrCodeModal />', () => {
   let wrapper;
diff --git a/test/short-urls/helpers/ShortUrlsRow.test.js b/test/short-urls/helpers/ShortUrlsRow.test.js
index 5be8718a..cb6d9a77 100644
--- a/test/short-urls/helpers/ShortUrlsRow.test.js
+++ b/test/short-urls/helpers/ShortUrlsRow.test.js
@@ -3,8 +3,8 @@ import { shallow } from 'enzyme';
 import moment from 'moment';
 import Moment from 'react-moment';
 import { assoc, toString } from 'ramda';
+import { ExternalLink } from 'react-external-link';
 import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow';
-import ExternalLink from '../../../src/utils/ExternalLink';
 import Tag from '../../../src/tags/helpers/Tag';
 
 describe('<ShortUrlsRow />', () => {
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js
index 84b287d1..8b35b93a 100644
--- a/test/visits/VisitsHeader.test.js
+++ b/test/visits/VisitsHeader.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import Moment from 'react-moment';
+import { ExternalLink } from 'react-external-link';
 import VisitsHeader from '../../src/visits/VisitsHeader';
-import ExternalLink from '../../src/utils/ExternalLink';
 
 describe('<VisitsHeader />', () => {
   let wrapper;

From 301da4bb2a5c8fff336d9e45f209b4bd7d8ed9b7 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 15 Jan 2020 18:31:28 +0100
Subject: [PATCH 2/2] Recovered behavior to show amount of visits in selected
 date range on visits detail page

---
 src/short-urls/helpers/ShortUrlVisitsCount.js       |  9 +++++----
 src/short-urls/helpers/ShortUrlsRow.js              |  2 +-
 src/short-urls/reducers/shortUrlsList.js            | 12 +++++++-----
 src/visits/ShortUrlVisits.js                        |  2 +-
 src/visits/VisitsHeader.js                          |  7 +++++--
 test/short-urls/helpers/ShortUrlVisitsCount.test.js | 11 ++++++-----
 test/visits/VisitsHeader.test.js                    |  8 +++++---
 7 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js
index 663b3a0e..458ce16e 100644
--- a/src/short-urls/helpers/ShortUrlVisitsCount.js
+++ b/src/short-urls/helpers/ShortUrlVisitsCount.js
@@ -1,16 +1,17 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
 import { UncontrolledTooltip } from 'reactstrap';
-import { shortUrlType } from '../reducers/shortUrlsList';
+import { shortUrlMetaType } from '../reducers/shortUrlsList';
 import './ShortUrlVisitsCount.scss';
 
 const propTypes = {
-  shortUrl: shortUrlType,
+  visitsCount: PropTypes.number.isRequired,
+  meta: shortUrlMetaType,
 };
 
-const ShortUrlVisitsCount = ({ shortUrl }) => {
-  const { visitsCount, meta } = shortUrl;
+const ShortUrlVisitsCount = ({ visitsCount, meta }) => {
   const maxVisits = meta && meta.maxVisits;
 
   if (!maxVisits) {
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index 55aadfa1..43d4205f 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/src/short-urls/helpers/ShortUrlsRow.js
@@ -58,7 +58,7 @@ const ShortUrlsRow = (
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
         <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
-          <ShortUrlVisitsCount shortUrl={shortUrl} />
+          <ShortUrlVisitsCount visitsCount={shortUrl.visitsCount} meta={shortUrl.meta} />
         </td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small
diff --git a/src/short-urls/reducers/shortUrlsList.js b/src/short-urls/reducers/shortUrlsList.js
index 050688d8..c77462b9 100644
--- a/src/short-urls/reducers/shortUrlsList.js
+++ b/src/short-urls/reducers/shortUrlsList.js
@@ -10,16 +10,18 @@ export const LIST_SHORT_URLS_ERROR = 'shlink/shortUrlsList/LIST_SHORT_URLS_ERROR
 export const LIST_SHORT_URLS = 'shlink/shortUrlsList/LIST_SHORT_URLS';
 /* eslint-enable padding-line-between-statements */
 
+export const shortUrlMetaType = PropTypes.shape({
+  validSince: PropTypes.string,
+  validUntil: PropTypes.string,
+  maxVisits: PropTypes.number,
+});
+
 export const shortUrlType = PropTypes.shape({
   shortCode: PropTypes.string,
   shortUrl: PropTypes.string,
   longUrl: PropTypes.string,
   visitsCount: PropTypes.number,
-  meta: PropTypes.shape({
-    validSince: PropTypes.string,
-    validUntil: PropTypes.string,
-    maxVisits: PropTypes.number,
-  }),
+  meta: shortUrlMetaType,
   tags: PropTypes.arrayOf(PropTypes.string),
 });
 
diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 1473ca63..d78fd876 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -132,7 +132,7 @@ const ShortUrlVisits = (
 
     return (
       <div className="shlink-container">
-        <VisitsHeader shortUrlDetail={shortUrlDetail} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
 
         <section className="mt-4">
           <DateRangeRow
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index b4180572..439f2063 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -4,14 +4,17 @@ import React from 'react';
 import { ExternalLink } from 'react-external-link';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
+import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 import './VisitsHeader.scss';
 
 const propTypes = {
   shortUrlDetail: shortUrlDetailType.isRequired,
+  shortUrlVisits: shortUrlVisitsType.isRequired,
 };
 
-export default function VisitsHeader({ shortUrlDetail }) {
+export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
   const { shortUrl, loading } = shortUrlDetail;
+  const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
   const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
 
@@ -30,7 +33,7 @@ export default function VisitsHeader({ shortUrlDetail }) {
         <h2>
           <span className="badge badge-main float-right">
             Visits:{' '}
-            <ShortUrlVisitsCount shortUrl={shortUrl} />
+            <ShortUrlVisitsCount visitsCount={visits.length} meta={shortUrl.meta} />
           </span>
           Visit stats for <ExternalLink href={shortLink} />
         </h2>
diff --git a/test/short-urls/helpers/ShortUrlVisitsCount.test.js b/test/short-urls/helpers/ShortUrlVisitsCount.test.js
index 9949fa4c..42508219 100644
--- a/test/short-urls/helpers/ShortUrlVisitsCount.test.js
+++ b/test/short-urls/helpers/ShortUrlVisitsCount.test.js
@@ -1,22 +1,23 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
+import each from 'jest-each';
 import ShortUrlVisitsCount from '../../../src/short-urls/helpers/ShortUrlVisitsCount';
 
 describe('<ShortUrlVisitsCount />', () => {
   let wrapper;
 
-  const createWrapper = (shortUrl) => {
-    wrapper = shallow(<ShortUrlVisitsCount shortUrl={shortUrl} />);
+  const createWrapper = (visitsCount, meta) => {
+    wrapper = shallow(<ShortUrlVisitsCount visitsCount={visitsCount} meta={meta} />);
 
     return wrapper;
   };
 
   afterEach(() => wrapper && wrapper.unmount());
 
-  it('just returns visits when no maxVisits is provided', () => {
+  each([ undefined, {}]).it('just returns visits when no maxVisits is provided', (meta) => {
     const visitsCount = 45;
-    const wrapper = createWrapper({ visitsCount });
+    const wrapper = createWrapper(visitsCount, meta);
     const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
     const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
 
@@ -29,7 +30,7 @@ describe('<ShortUrlVisitsCount />', () => {
     const visitsCount = 45;
     const maxVisits = 500;
     const meta = { maxVisits };
-    const wrapper = createWrapper({ visitsCount, meta });
+    const wrapper = createWrapper(visitsCount, meta);
     const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
     const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
 
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js
index 8b35b93a..9af5b41a 100644
--- a/test/visits/VisitsHeader.test.js
+++ b/test/visits/VisitsHeader.test.js
@@ -11,20 +11,22 @@ describe('<VisitsHeader />', () => {
       shortUrl: 'https://doma.in/abc123',
       longUrl: 'https://foo.bar/bar/foo',
       dateCreated: '2018-01-01T10:00:00+01:00',
-      visitsCount: 3,
     },
     loading: false,
   };
+  const shortUrlVisits = {
+    visits: [{}, {}, {}],
+  };
 
   beforeEach(() => {
-    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} />);
+    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />);
   });
   afterEach(() => wrapper.unmount());
 
   it('shows the amount of visits', () => {
     const visitsBadge = wrapper.find('.badge');
 
-    expect(visitsBadge.html()).toContain(`Visits: <span>${shortUrlDetail.shortUrl.visitsCount}</span>`);
+    expect(visitsBadge.html()).toContain(`Visits: <span>${shortUrlVisits.visits.length}</span>`);
   });
 
   it('shows when the URL was created', () => {