Recovered behavior to show amount of visits in selected date range on visits detail page

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) {

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

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),
 });
 

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

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>

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);
 

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