From 595858ac4b38fb7882852d7ff756c00aa060c6cf Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 11 Jan 2020 20:10:12 +0100
Subject: [PATCH] Used visits count component in short URL visits view

---
 src/visits/ShortUrlVisits.js     |  2 +-
 src/visits/VisitsHeader.js       | 16 ++++++++--------
 test/visits/VisitsHeader.test.js | 10 +++-------
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index c5b4ef99..bd291590 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -134,7 +134,7 @@ const ShortUrlVisits = (
 
     return (
       <div className="shlink-container">
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} />
 
         <section className="mt-4">
           <div className="row">
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index 34bb0288..d631eb31 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -2,18 +2,16 @@ import { Card, UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
 import React from 'react';
 import ExternalLink from '../utils/ExternalLink';
-import './VisitsHeader.scss';
+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, shortUrlVisits }) {
+export default function VisitsHeader({ shortUrlDetail }) {
   const { shortUrl, loading } = shortUrlDetail;
-  const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
   const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
 
@@ -30,14 +28,16 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
     <header>
       <Card className="bg-light" body>
         <h2>
-          <span className="badge badge-main float-right">Visits: {visits.length}</span>
+          <span className="badge badge-main float-right">
+            Visits:{' '}
+            <ShortUrlVisitsCount shortUrl={shortUrl} />
+          </span>
           Visit stats for <ExternalLink href={shortLink} />
         </h2>
         <hr />
         <div>Created: {renderDate()}</div>
         <div>
-          Long URL:
-          &nbsp;
+          Long URL:{' '}
           {loading && <small>Loading...</small>}
           {!loading && <ExternalLink href={longLink} />}
         </div>
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js
index a0fce13f..84b287d1 100644
--- a/test/visits/VisitsHeader.test.js
+++ b/test/visits/VisitsHeader.test.js
@@ -11,24 +11,20 @@ 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} shortUrlVisits={shortUrlVisits} shortLink="foo" />
-    );
+    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} />);
   });
   afterEach(() => wrapper.unmount());
 
   it('shows the amount of visits', () => {
     const visitsBadge = wrapper.find('.badge');
 
-    expect(visitsBadge.text()).toEqual(`Visits: ${shortUrlVisits.visits.length}`);
+    expect(visitsBadge.html()).toContain(`Visits: <span>${shortUrlDetail.shortUrl.visitsCount}</span>`);
   });
 
   it('shows when the URL was created', () => {