Used visits count component in short URL visits view

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">

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>

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', () => {