diff --git a/CHANGELOG.md b/CHANGELOG.md
index d56f3d2a..26c70e71 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/short-urls/ShortUrlsList.js b/src/short-urls/ShortUrlsList.js
index 11822c3a..09746f36 100644
--- a/src/short-urls/ShortUrlsList.js
+++ b/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,
diff --git a/src/short-urls/helpers/ShortUrlVisitsCount.js b/src/short-urls/helpers/ShortUrlVisitsCount.js
new file mode 100644
index 00000000..32447c8a
--- /dev/null
+++ b/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 {visitsCount};
+ }
+
+ return (
+
+
+ {visitsCount}
+
+ {' '}/ {maxVisits}{' '}
+
+
+
+
+
+
+ This short URL will not accept more than {maxVisits} visits.
+
+
+ );
+};
+
+ShortUrlVisitsCount.propTypes = propTypes;
+
+export default ShortUrlVisitsCount;
diff --git a/src/short-urls/helpers/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js
index a22f9ba2..10585db7 100644
--- a/src/short-urls/helpers/ShortUrlsRow.js
+++ b/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 = (
{this.renderTags(shortUrl.tags)} |
- {shortUrl.visitsCount} |
+
+
+ |
-
+
diff --git a/src/visits/VisitsHeader.js b/src/visits/VisitsHeader.js
index 34bb0288..d631eb31 100644
--- a/src/visits/VisitsHeader.js
+++ b/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 }) {
|