From fb0f14fc1609883d735ccab20539af3f4c5d1fcb Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sun, 10 May 2020 19:49:58 +0200
Subject: [PATCH] Created header for visits by tag section

---
 src/visits/ShortUrlVisitsHeader.js |  6 ++++--
 src/visits/TagVisits.js            |  5 ++---
 src/visits/TagVisitsHeader.js      | 26 ++++++++++++++++++++++++++
 src/visits/VisitsHeader.js         | 11 +++++++----
 4 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 src/visits/TagVisitsHeader.js

diff --git a/src/visits/ShortUrlVisitsHeader.js b/src/visits/ShortUrlVisitsHeader.js
index 13b381a0..a3b100a3 100644
--- a/src/visits/ShortUrlVisitsHeader.js
+++ b/src/visits/ShortUrlVisitsHeader.js
@@ -14,7 +14,7 @@ const propTypes = {
   goBack: PropTypes.func.isRequired,
 };
 
-export default function ShortUrlVisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
+const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }) => {
   const { shortUrl, loading } = shortUrlDetail;
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
@@ -47,6 +47,8 @@ export default function ShortUrlVisitsHeader({ shortUrlDetail, shortUrlVisits, g
       </div>
     </VisitsHeader>
   );
-}
+};
 
 ShortUrlVisitsHeader.propTypes = propTypes;
+
+export default ShortUrlVisitsHeader;
diff --git a/src/visits/TagVisits.js b/src/visits/TagVisits.js
index 5d9c32ef..70becba1 100644
--- a/src/visits/TagVisits.js
+++ b/src/visits/TagVisits.js
@@ -4,6 +4,7 @@ import { MercureInfoType } from '../mercure/reducers/mercureInfo';
 import { SettingsType } from '../settings/reducers/settings';
 import { bindToMercureTopic } from '../mercure/helpers';
 import { TagVisitsType } from './reducers/tagVisits';
+import TagVisitsHeader from './TagVisitsHeader';
 
 const propTypes = {
   history: PropTypes.shape({
@@ -37,8 +38,6 @@ const TagVisits = (VisitsStats) => {
     const { tag } = params;
     const loadVisits = (dates) => getTagVisits(tag, dates);
 
-    console.log(history);
-
     useEffect(
       bindToMercureTopic(
         mercureInfo,
@@ -52,7 +51,7 @@ const TagVisits = (VisitsStats) => {
 
     return (
       <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetTagVisits} visitsInfo={tagVisits}>
-        <span>{tag} - {tagVisits.visits.length}</span>
+        <TagVisitsHeader tagVisits={tagVisits} goBack={history.goBack} />
       </VisitsStats>
     );
   };
diff --git a/src/visits/TagVisitsHeader.js b/src/visits/TagVisitsHeader.js
new file mode 100644
index 00000000..e37801ff
--- /dev/null
+++ b/src/visits/TagVisitsHeader.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import VisitsHeader from './VisitsHeader';
+import { TagVisitsType } from './reducers/tagVisits';
+import './ShortUrlVisitsHeader.scss';
+
+const propTypes = {
+  tagVisits: TagVisitsType.isRequired,
+  goBack: PropTypes.func.isRequired,
+};
+
+const TagVisitsHeader = ({ tagVisits, goBack }) => {
+  const { visits, tag } = tagVisits;
+
+  const visitsStatsTitle = (
+    <React.Fragment>
+      Visits for {tag}
+    </React.Fragment>
+  );
+
+  return <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} />;
+};
+
+TagVisitsHeader.propTypes = propTypes;
+
+export default TagVisitsHeader;
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index 9c6d1c78..89225027 100644
--- a/src/visits/VisitsHeader.js
+++ b/src/visits/VisitsHeader.js
@@ -18,20 +18,23 @@ const propTypes = {
 const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => (
   <header>
     <Card className="bg-light" body>
-      <h2 className="d-flex justify-content-between align-items-center">
+      <h2 className="d-flex justify-content-between align-items-center mb-0">
         <Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
           <FontAwesomeIcon icon={faArrowLeft} />
         </Button>
         <span className="text-center d-none d-sm-block">
-          {title}
+          <small>{title}</small>
         </span>
         <span className="badge badge-main ml-3">
           Visits:{' '}
           <ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
         </span>
       </h2>
-      <h3 className="text-center d-block d-sm-none mb-0">{title}</h3>
-      {children}
+      <h3 className="text-center d-block d-sm-none mb-0 mt-2">
+        <small>{title}</small>
+      </h3>
+
+      {children && <div className="mt-md-2">{children}</div>}
     </Card>
   </header>
 );