Merge pull request #184 from acelaya-forks/feature/show-max-visits

Feature/show max visits

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 #### Added
 
 * [#174](https://github.com/shlinkio/shlink-web-client/issues/174) Added complete support for Shlink v2.x together with currently supported Shlink versions.
+* [#164](https://github.com/shlinkio/shlink-web-client/issues/164) Added max visits control on those URLs which have `maxVisits`.
 
 #### Changed
 

src/short-urls/ShortUrlsList.js

@@ -18,6 +18,7 @@ export const SORTABLE_FIELDS = {
   visits: 'Visits',
 };
 
+// FIXME Replace with typescript: (ShortUrlsRow component)
 const ShortUrlsList = (ShortUrlsRow) => class ShortUrlsList extends React.Component {
   static propTypes = {
     listShortUrls: PropTypes.func,

src/short-urls/helpers/ShortUrlVisitsCount.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
+import { UncontrolledTooltip } from 'reactstrap';
+import { shortUrlType } from '../reducers/shortUrlsList';
+
+const propTypes = {
+  shortUrl: shortUrlType,
+};
+
+const ShortUrlVisitsCount = ({ shortUrl }) => {
+  const { visitsCount, meta } = shortUrl;
+  const maxVisits = meta && meta.maxVisits;
+
+  if (!maxVisits) {
+    return <span>{visitsCount}</span>;
+  }
+
+  return (
+    <React.Fragment>
+      <span>
+        {visitsCount}
+        <small id="maxVisitsControl" className="short-urls-row__max-visits-control">
+          {' '}/ {maxVisits}{' '}
+          <sup>
+            <FontAwesomeIcon icon={infoIcon} />
+          </sup>
+        </small>
+      </span>
+      <UncontrolledTooltip target="maxVisitsControl" placement="bottom">
+        This short URL will not accept more than <b>{maxVisits}</b> visits.
+      </UncontrolledTooltip>
+    </React.Fragment>
+  );
+};
+
+ShortUrlVisitsCount.propTypes = propTypes;
+
+export default ShortUrlVisitsCount;

src/short-urls/helpers/ShortUrlsRow.js

@@ -7,6 +7,7 @@ import { serverType } from '../../servers/prop-types';
 import ExternalLink from '../../utils/ExternalLink';
 import { shortUrlType } from '../reducers/shortUrlsList';
 import Tag from '../../tags/helpers/Tag';
+import ShortUrlVisitsCount from './ShortUrlVisitsCount';
 import './ShortUrlsRow.scss';
 
 const ShortUrlsRow = (
@@ -56,7 +57,9 @@ const ShortUrlsRow = (
           <ExternalLink href={shortUrl.longUrl} />
         </td>
         <td className="short-urls-row__cell" data-th="Tags: ">{this.renderTags(shortUrl.tags)}</td>
-        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">{shortUrl.visitsCount}</td>
+        <td className="short-urls-row__cell text-md-right" data-th="Visits: ">
+          <ShortUrlVisitsCount shortUrl={shortUrl} />
+        </td>
         <td className="short-urls-row__cell short-urls-row__cell--relative">
           <small
             className="badge badge-warning short-urls-row__copy-hint"

src/short-urls/helpers/ShortUrlsRow.scss

@@ -51,3 +51,7 @@
     right: calc(100% + 10px);
   }
 }
+
+.short-urls-row__max-visits-control {
+  cursor: help;
+}

src/short-urls/reducers/shortUrlsList.js

@@ -14,6 +14,12 @@ export const shortUrlType = PropTypes.shape({
   shortCode: PropTypes.string,
   shortUrl: PropTypes.string,
   longUrl: PropTypes.string,
+  visitsCount: PropTypes.number,
+  meta: PropTypes.shape({
+    validSince: PropTypes.string,
+    validUntil: PropTypes.string,
+    maxVisits: PropTypes.number,
+  }),
   tags: PropTypes.arrayOf(PropTypes.string),
 });
 

src/visits/ShortUrlVisits.js

@@ -134,7 +134,7 @@ const ShortUrlVisits = (
 
     return (
       <div className="shlink-container">
-        <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
+        <VisitsHeader shortUrlDetail={shortUrlDetail} />
 
         <section className="mt-4">
           <div className="row">

src/visits/VisitsHeader.js

@@ -2,18 +2,16 @@ import { Card, UncontrolledTooltip } from 'reactstrap';
 import Moment from 'react-moment';
 import React from 'react';
 import ExternalLink from '../utils/ExternalLink';
-import './VisitsHeader.scss';
+import ShortUrlVisitsCount from '../short-urls/helpers/ShortUrlVisitsCount';
 import { shortUrlDetailType } from './reducers/shortUrlDetail';
-import { shortUrlVisitsType } from './reducers/shortUrlVisits';
+import './VisitsHeader.scss';
 
 const propTypes = {
   shortUrlDetail: shortUrlDetailType.isRequired,
-  shortUrlVisits: shortUrlVisitsType.isRequired,
 };
 
-export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
+export default function VisitsHeader({ shortUrlDetail }) {
   const { shortUrl, loading } = shortUrlDetail;
-  const { visits } = shortUrlVisits;
   const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
   const longLink = shortUrl && shortUrl.longUrl ? shortUrl.longUrl : '';
 
@@ -30,14 +28,16 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
     <header>
       <Card className="bg-light" body>
         <h2>
-          <span className="badge badge-main float-right">Visits: {visits.length}</span>
+          <span className="badge badge-main float-right">
+            Visits:{' '}
+            <ShortUrlVisitsCount shortUrl={shortUrl} />
+          </span>
           Visit stats for <ExternalLink href={shortLink} />
         </h2>
         <hr />
         <div>Created: {renderDate()}</div>
         <div>
-          Long URL:
+          Long URL:{' '}
-          &nbsp;
           {loading && <small>Loading...</small>}
           {!loading && <ExternalLink href={longLink} />}
         </div>

test/short-urls/helpers/ShortUrlVisitsCount.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { UncontrolledTooltip } from 'reactstrap';
+import ShortUrlVisitsCount from '../../../src/short-urls/helpers/ShortUrlVisitsCount';
+
+describe('<ShortUrlVisitsCount />', () => {
+  let wrapper;
+
+  const createWrapper = (shortUrl) => {
+    wrapper = shallow(<ShortUrlVisitsCount shortUrl={shortUrl} />);
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper && wrapper.unmount());
+
+  it('just returns visits when no maxVisits is provided', () => {
+    const visitsCount = 45;
+    const wrapper = createWrapper({ visitsCount });
+    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
+
+    expect(wrapper.html()).toEqual(`<span>${visitsCount}</span>`);
+    expect(maxVisitsHelper).toHaveLength(0);
+    expect(maxVisitsTooltip).toHaveLength(0);
+  });
+
+  it('displays the maximum amount of visits when present', () => {
+    const visitsCount = 45;
+    const maxVisits = 500;
+    const meta = { maxVisits };
+    const wrapper = createWrapper({ visitsCount, meta });
+    const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
+    const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
+
+    expect(wrapper.html()).toContain(`/ ${maxVisits}`);
+    expect(maxVisitsHelper).toHaveLength(1);
+    expect(maxVisitsTooltip).toHaveLength(1);
+  });
+});

test/short-urls/helpers/ShortUrlsRow.test.js

@@ -83,7 +83,7 @@ describe('<ShortUrlsRow />', () => {
   it('renders visits count in fifth row', () => {
     const col = wrapper.find('td').at(4);
 
-    expect(col.text()).toEqual(toString(shortUrl.visitsCount));
+    expect(col.html()).toContain(toString(shortUrl.visitsCount));
   });
 
   it('updates state when copied to clipboard', () => {

test/visits/VisitsHeader.test.js

@@ -11,24 +11,20 @@ describe('<VisitsHeader />', () => {
       shortUrl: 'https://doma.in/abc123',
       longUrl: 'https://foo.bar/bar/foo',
       dateCreated: '2018-01-01T10:00:00+01:00',
+      visitsCount: 3,
     },
     loading: false,
   };
-  const shortUrlVisits = {
-    visits: [{}, {}, {}],
-  };
 
   beforeEach(() => {
-    wrapper = shallow(
+    wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} />);
-      <VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} shortLink="foo" />
-    );
   });
   afterEach(() => wrapper.unmount());
 
   it('shows the amount of visits', () => {
     const visitsBadge = wrapper.find('.badge');
 
-    expect(visitsBadge.text()).toEqual(`Visits: ${shortUrlVisits.visits.length}`);
+    expect(visitsBadge.html()).toContain(`Visits: <span>${shortUrlDetail.shortUrl.visitsCount}</span>`);
   });
 
   it('shows when the URL was created', () => {