Added back button to visits stats page

src/visits/ShortUrlVisits.js

@@ -21,6 +21,9 @@ import { shortUrlDetailType } from './reducers/shortUrlDetail';
 import VisitsTable from './VisitsTable';
 
 const propTypes = {
+  history: PropTypes.shape({
+    goBack: PropTypes.func,
+  }),
   match: PropTypes.shape({
     params: PropTypes.object,
   }),
@@ -53,6 +56,7 @@ let selectedBar;
 
 const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
   const ShortUrlVisitsComp = ({
+    history,
     match,
     location,
     shortUrlVisits,
@@ -204,7 +208,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
 
     return (
       <React.Fragment>
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={history.goBack} />
 
         <section className="mt-4">
           <div className="row flex-md-row-reverse">

src/visits/VisitsHeader.js

@@ -1,7 +1,10 @@
-import { Card, UncontrolledTooltip } from 'reactstrap';
+import { Button, Card, UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
 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';
@@ -10,9 +13,10 @@ import './VisitsHeader.scss';
 const propTypes = {
   shortUrlDetail: shortUrlDetailType.isRequired,
   shortUrlVisits: shortUrlVisitsType.isRequired,
+  goBack: PropTypes.func.isRequired,
 };
 
-export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
+export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
   const { shortUrl, loading } = shortUrlDetail;
   const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
@@ -26,17 +30,28 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
       </UncontrolledTooltip>
     </span>
   );
+  const visitsStatsTitle = (
+    <React.Fragment>
+      Visit stats for <ExternalLink href={shortLink} />
+    </React.Fragment>
+  );
 
   return (
     <header>
       <Card className="bg-light" body>
-        <h2>
+        <h2 className="d-flex justify-content-between align-items-center">
-          <span className="badge badge-main float-right">
+          <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>
-          Visit stats for <ExternalLink href={shortLink} />
         </h2>
+        <h3 className="text-center d-block d-sm-none mb-0">{visitsStatsTitle}</h3>
         <hr />
         <div>Created: {renderDate()}</div>
         <div>

test/visits/ShortUrlVisits.test.js

@@ -18,6 +18,9 @@ describe('<ShortUrlVisits />', () => {
     params: { shortCode: 'abc123' },
   };
   const location = { search: '' };
+  const history = {
+    goBack: jest.fn(),
+  };
 
   const createComponent = (shortUrlVisits) => {
     const ShortUrlVisits = createShortUrlVisits({ processStatsFromVisits, normalizeVisits: identity }, () => '');
@@ -28,6 +31,7 @@ describe('<ShortUrlVisits />', () => {
         getShortUrlVisits={getShortUrlVisitsMock}
         match={match}
         location={location}
+        history={history}
         shortUrlVisits={shortUrlVisits}
         shortUrlDetail={{}}
         cancelGetShortUrlVisits={identity}

test/visits/VisitsHeader.test.js

@@ -17,9 +17,10 @@ describe('<VisitsHeader />', () => {
   const shortUrlVisits = {
     visits: [{}, {}, {}],
   };
+  const goBack = jest.fn();
 
   beforeEach(() => {
-    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />);
+    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />);
   });
   afterEach(() => wrapper.unmount());