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,42 +1,21 @@
-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 (
+const VisitsHeader = ({ visits, goBack, shortUrl, children, title }) => (
   <header>
     <Card className="bg-light" body>
       <h2 className="d-flex justify-content-between align-items-center">
@@ -44,24 +23,19 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack })
           <FontAwesomeIcon icon={faArrowLeft} />
         </Button>
         <span className="text-center d-none d-sm-block">
-            {visitsStatsTitle}
+          {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">{visitsStatsTitle}</h3>
-        <hr />
-        <div>Created: {renderDate()}</div>
-        <div>
-          Long URL:{' '}
-          {loading && <small>Loading...</small>}
-          {!loading && <ExternalLink href={longLink} />}
-        </div>
+      <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;
-}

test/visits/ShortUrlVisits.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
 import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
-import VisitsHeader from '../../src/visits/VisitsHeader';
+import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
 
 describe('<ShortUrlVisits />', () => {
   let wrapper;
@@ -41,7 +41,7 @@ describe('<ShortUrlVisits />', () => {
 
   it('renders visit stats and visits header', () => {
     const visitStats = wrapper.find(VisitsStats);
-    const visitHeader = wrapper.find(VisitsHeader);
+    const visitHeader = wrapper.find(ShortUrlVisitsHeader);
 
     expect(visitStats).toHaveLength(1);
     expect(visitHeader).toHaveLength(1);

test/visits/ShortUrlVisitsHeader.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Moment from 'react-moment';
+import { ExternalLink } from 'react-external-link';
+import ShortUrlVisitsHeader from '../../src/visits/ShortUrlVisitsHeader';
+
+describe('<ShortUrlVisitsHeader />', () => {
+  let wrapper;
+  const shortUrlDetail = {
+    shortUrl: {
+      shortUrl: 'https://doma.in/abc123',
+      longUrl: 'https://foo.bar/bar/foo',
+      dateCreated: '2018-01-01T10:00:00+01:00',
+    },
+    loading: false,
+  };
+  const shortUrlVisits = {
+    visits: [{}, {}, {}],
+  };
+  const goBack = jest.fn();
+
+  beforeEach(() => {
+    wrapper = shallow(
+      <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />
+    );
+  });
+  afterEach(() => wrapper.unmount());
+
+  it('shows when the URL was created', () => {
+    const moment = wrapper.find(Moment).first();
+
+    expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl.dateCreated);
+  });
+
+  it('shows the long URL', () => {
+    const longUrlLink = wrapper.find(ExternalLink).last();
+
+    expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl.longUrl);
+  });
+});

test/visits/VisitsHeader.test.js

@@ -1,46 +1,35 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Moment from 'react-moment';
-import { ExternalLink } from 'react-external-link';
 import VisitsHeader from '../../src/visits/VisitsHeader';
 
 describe('<VisitsHeader />', () => {
   let wrapper;
-  const shortUrlDetail = {
-    shortUrl: {
-      shortUrl: 'https://doma.in/abc123',
-      longUrl: 'https://foo.bar/bar/foo',
-      dateCreated: '2018-01-01T10:00:00+01:00',
-    },
-    loading: false,
-  };
-  const shortUrlVisits = {
-    visits: [{}, {}, {}],
-  };
+  const visits = [{}, {}, {}];
+  const title = 'My header title';
   const goBack = jest.fn();
 
   beforeEach(() => {
-    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />);
+    wrapper = shallow(
+      <VisitsHeader visits={visits} goBack={goBack} title={title} />
+    );
   });
+
   afterEach(() => wrapper.unmount());
+  afterEach(jest.resetAllMocks);
 
   it('shows the amount of visits', () => {
     const visitsBadge = wrapper.find('.badge');
 
     expect(visitsBadge.html()).toContain(
-      `Visits: <span><strong class="short-url-visits-count__amount">${shortUrlVisits.visits.length}</strong></span>`
+      `Visits: <span><strong class="short-url-visits-count__amount">${visits.length}</strong></span>`
     );
   });
 
-  it('shows when the URL was created', () => {
-    const moment = wrapper.find(Moment).first();
+  it('shows the title in two places', () => {
+    const titles = wrapper.find('.text-center');
 
-    expect(moment.prop('children')).toEqual(shortUrlDetail.shortUrl.dateCreated);
-  });
-
-  it('shows the long URL', () => {
-    const longUrlLink = wrapper.find(ExternalLink).last();
-
-    expect(longUrlLink.prop('href')).toEqual(shortUrlDetail.shortUrl.longUrl);
+    expect(titles).toHaveLength(2);
+    expect(titles.at(0).html()).toContain(title);
+    expect(titles.at(1).html()).toContain(title);
   });
 });