Created common component for visits header

src/visits/ShortUrlVisits.js

@@ -5,7 +5,7 @@ import { MercureInfoType } from '../mercure/reducers/mercureInfo';
 import { bindToMercureTopic } from '../mercure/helpers';
 import { SettingsType } from '../settings/reducers/settings';
 import { shortUrlVisitsType } from './reducers/shortUrlVisits';
-import VisitsHeader from './VisitsHeader';
+import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
 
 const propTypes = {
@@ -67,7 +67,7 @@ const ShortUrlVisits = (VisitsStats) => {
 
     return (
       <VisitsStats getVisits={loadVisits} cancelGetVisits={cancelGetShortUrlVisits} visitsInfo={shortUrlVisits}>
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={history.goBack} />
+        <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={history.goBack} />
       </VisitsStats>
     );
   };

src/visits/ShortUrlVisitsHeader.js

@@ -0,0 +1,52 @@
+import { UncontrolledTooltip } from 'reactstrap';
+import Moment from 'react-moment';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ExternalLink } from 'react-external-link';
+import { shortUrlDetailType } from './reducers/shortUrlDetail';
+import { shortUrlVisitsType } from './reducers/shortUrlVisits';
+import VisitsHeader from './VisitsHeader';
+import './ShortUrlVisitsHeader.scss';
+
+const propTypes = {
+  shortUrlDetail: shortUrlDetailType.isRequired,
+  shortUrlVisits: shortUrlVisitsType.isRequired,
+  goBack: PropTypes.func.isRequired,
+};
+
+export default function ShortUrlVisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
+  const { shortUrl, loading } = shortUrlDetail;
+  const { visits } = shortUrlVisits;
+  const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
+  const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
+
+  const renderDate = () => (
+    <span>
+      <b id="created" className="short-url-visits-header__created-at">
+        <Moment fromNow>{shortUrl.dateCreated}</Moment>
+      </b>
+      <UncontrolledTooltip placement="bottom" target="created">
+        <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
+      </UncontrolledTooltip>
+    </span>
+  );
+  const visitsStatsTitle = (
+    <React.Fragment>
+      Visits for <ExternalLink href={shortLink} />
+    </React.Fragment>
+  );
+
+  return (
+    <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}>
+      <hr />
+      <div>Created: {renderDate()}</div>
+      <div>
+        Long URL:{' '}
+        {loading && <small>Loading...</small>}
+        {!loading && <ExternalLink href={longLink} />}
+      </div>
+    </VisitsHeader>
+  );
+}
+
+ShortUrlVisitsHeader.propTypes = propTypes;

src/visits/ShortUrlVisitsHeader.scss

@@ -0,0 +1,3 @@
+.short-url-visits-header__created-at {
+  cursor: default;
+}

src/visits/VisitsHeader.js

@@ -1,67 +1,41 @@
-import { Button, Card, UncontrolledTooltip } from 'reactstrap';
-import Moment from 'react-moment';
+import { Button, Card } from 'reactstrap';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ExternalLink } from 'react-external-link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
-import { shortUrlDetailType } from './reducers/shortUrlDetail';
-import { shortUrlVisitsType } from './reducers/shortUrlVisits';
-import './VisitsHeader.scss';
+import { shortUrlType } from '../short-urls/reducers/shortUrlsList';
+import { VisitType } from './types';
 
 const propTypes = {
-  shortUrlDetail: shortUrlDetailType.isRequired,
-  shortUrlVisits: shortUrlVisitsType.isRequired,
+  visits: PropTypes.arrayOf(VisitType).isRequired,
   goBack: PropTypes.func.isRequired,
+  title: PropTypes.node.isRequired,
+  children: PropTypes.node,
+  shortUrl: shortUrlType,
 };
 
-export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
-  const { shortUrl, loading } = shortUrlDetail;
-  const { visits } = shortUrlVisits;
-  const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
-  const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
-
-  const renderDate = () => (
-    <span>
-      <b id="created" className="visits-header__created-at"><Moment fromNow>{shortUrl.dateCreated}</Moment></b>
-      <UncontrolledTooltip placement="bottom" target="created">
-        <Moment format="YYYY-MM-DD HH:mm">{shortUrl.dateCreated}</Moment>
-      </UncontrolledTooltip>
-    </span>
-  );
-  const visitsStatsTitle = (
-    <React.Fragment>
-      Visit stats for <ExternalLink href={shortLink} />
-    </React.Fragment>
-  );
-
-  return (
-    <header>
-      <Card className="bg-light" body>
-        <h2 className="d-flex justify-content-between align-items-center">
-          <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">
-            {visitsStatsTitle}
-          </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">{visitsStatsTitle}</h3>
-        <hr />
-        <div>Created: {renderDate()}</div>
-        <div>
-          Long URL:{' '}
-          {loading && <small>Loading...</small>}
-          {!loading && <ExternalLink href={longLink} />}
-        </div>
-      </Card>
-    </header>
-  );
-}
+const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => (
+  <header>
+    <Card className="bg-light" body>
+      <h2 className="d-flex justify-content-between align-items-center">
+        <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}
+        </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}
+    </Card>
+  </header>
+);
 
 VisitsHeader.propTypes = propTypes;
+
+export default VisitsHeader;

src/visits/VisitsHeader.scss

@@ -1,3 +0,0 @@
-.visits-header__created-at {
-  cursor: default;
-}