From 3e63734e2b6f729d07fe4205a83b911494ff6e9d Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Wed, 5 Sep 2018 20:17:46 +0200
Subject: [PATCH] Improved visits page

---
 src/visits/ShortUrlVisits.js |  4 +++-
 src/visits/VisitsHeader.js   | 13 +++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js
index 42ec802f..cf0c09f9 100644
--- a/src/visits/ShortUrlVisits.js
+++ b/src/visits/ShortUrlVisits.js
@@ -110,7 +110,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
 
     return (
       <div className="shlink-container">
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortLink={shortLink} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} shortLink={shortLink} />
 
         <section className="mt-4">
           <div className="row">
@@ -119,6 +119,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
                 selected={this.state.startDate}
                 placeholderText="Since"
                 isClearable
+                maxDate={this.state.endDate}
                 onChange={(date) => this.setState({ startDate: date }, () => this.loadVisits())}
               />
             </div>
@@ -128,6 +129,7 @@ export class ShortUrlsVisitsComponent extends React.Component {
                 placeholderText="Until"
                 isClearable
                 className="short-url-visits__date-input"
+                minDate={this.state.startDate}
                 onChange={(date) => this.setState({ endDate: date }, () => this.loadVisits())}
               />
             </div>
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index cb932409..db0d3e5e 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -5,14 +5,17 @@ import PropTypes from 'prop-types';
 import ExternalLink from '../utils/ExternalLink';
 import './VisitsHeader.scss';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
+import { shortUrlVisitsType } from './reducers/shortUrlVisits';
 
 const propTypes = {
-  shortUrlDetail: shortUrlDetailType,
+  shortUrlDetail: shortUrlDetailType.isRequired,
+  shortUrlVisits: shortUrlVisitsType.isRequired,
   shortLink: PropTypes.string,
 };
 
-export function VisitsHeader({ shortUrlDetail, shortLink }) {
+export function VisitsHeader({ shortUrlDetail, shortUrlVisits, shortLink }) {
   const { shortUrl, loading } = shortUrlDetail;
+  const { visits } = shortUrlVisits;
   const renderDate = () => (
     <span>
       <b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
@@ -26,8 +29,7 @@ export function VisitsHeader({ shortUrlDetail, shortLink }) {
     <header>
       <Card className="bg-light" body>
         <h2>
-          {shortUrl.visitsCount &&
-          <span className="badge badge-main float-right">Visits: {shortUrl.visitsCount}</span>}
+          <span className="badge badge-main float-right">Visits: {visits.length}</span>
           Visit stats for <ExternalLink href={shortLink}>{shortLink}</ExternalLink>
         </h2>
         <hr />
@@ -35,8 +37,7 @@ export function VisitsHeader({ shortUrlDetail, shortLink }) {
           <div>
             Created:
             &nbsp;
-            {loading && <small>Loading...</small>}
-            {!loading && renderDate()}
+            {renderDate()}
           </div>
         )}
         <div>