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>