From 5c4fec5a2fedbfa232ac1dc0c83fbbbc314990f5 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 19:40:16 +0100 Subject: [PATCH 1/5] Displayed amount of max visits on those URLs which have it --- src/short-urls/ShortUrlsList.js | 1 + src/short-urls/helpers/ShortUrlsRow.js | 33 ++++++++++++++- src/short-urls/helpers/ShortUrlsRow.scss | 4 ++ test/short-urls/helpers/ShortUrlsRow.test.js | 42 ++++++++++++++++---- 4 files changed, 72 insertions(+), 8 deletions(-) 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/ShortUrlsRow.js b/src/short-urls/helpers/ShortUrlsRow.js index a22f9ba2..f117c67a 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -2,6 +2,9 @@ import { isEmpty } from 'ramda'; import React from 'react'; import Moment from 'react-moment'; import PropTypes from 'prop-types'; +import { UncontrolledTooltip } from 'reactstrap'; +import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams'; import { serverType } from '../../servers/prop-types'; import ExternalLink from '../../utils/ExternalLink'; @@ -9,6 +12,32 @@ import { shortUrlType } from '../reducers/shortUrlsList'; import Tag from '../../tags/helpers/Tag'; import './ShortUrlsRow.scss'; +const renderVisitsCount = (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. + + + ); +}; + const ShortUrlsRow = ( ShortUrlsRowMenu, colorGenerator, @@ -56,7 +85,9 @@ const ShortUrlsRow = ( {this.renderTags(shortUrl.tags)} - {shortUrl.visitsCount} + + {renderVisitsCount(shortUrl)} + ', () => { tags: [ 'nodejs', 'reactjs' ], visitsCount: 45, }; - - beforeEach(() => { - const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout); - + const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout); + const createWrapper = (meta) => { wrapper = shallow( - + ); - }); - afterEach(() => wrapper.unmount()); + + return wrapper; + }; + + afterEach(() => wrapper && wrapper.unmount()); it('renders date in first column', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').first(); const moment = col.find(Moment); @@ -45,6 +53,7 @@ describe('', () => { }); it('renders short URL in second row', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').at(1); const link = col.find(ExternalLink); @@ -52,6 +61,7 @@ describe('', () => { }); it('renders long URL in third row', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').at(2); const link = col.find(ExternalLink); @@ -60,6 +70,7 @@ describe('', () => { describe('renders list of tags in fourth row', () => { it('with tags', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').at(3); const tags = col.find(Tag); @@ -72,6 +83,8 @@ describe('', () => { }); it('without tags', () => { + const wrapper = createWrapper(); + wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) }); const col = wrapper.find('td').at(3); @@ -81,12 +94,26 @@ describe('', () => { }); it('renders visits count in fifth row', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').at(4); + const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control'); expect(col.text()).toEqual(toString(shortUrl.visitsCount)); + expect(maxVisitsHelper).toHaveLength(0); + }); + + it('renders visits count with helper control displaying the maximum amount of visits', () => { + const maxVisits = 40; + const wrapper = createWrapper({ maxVisits }); + const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control'); + const maxVisitsTooltip = wrapper.find(UncontrolledTooltip); + + expect(maxVisitsHelper).toHaveLength(1); + expect(maxVisitsTooltip).toHaveLength(1); }); it('updates state when copied to clipboard', () => { + const wrapper = createWrapper(); const col = wrapper.find('td').at(5); const menu = col.find(ShortUrlsRowMenu); @@ -97,6 +124,7 @@ describe('', () => { }); it('shows copy hint when state prop is true', () => { + const wrapper = createWrapper(); const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden'); expect(isHidden()).toEqual(true); From f2cb30409aee1cd1bdda761a3e590eafd9390a2a Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 19:41:41 +0100 Subject: [PATCH 2/5] Updated changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) 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 From 3f2162fe62a8d683e92dd2fdb210f67498beb622 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 19:58:04 +0100 Subject: [PATCH 3/5] Extracted visits count component to reuse it in other places --- src/short-urls/helpers/ShortUrlVisitsCount.js | 39 ++++++++++++++++ src/short-urls/helpers/ShortUrlsRow.js | 32 +------------- src/short-urls/reducers/shortUrlsList.js | 6 +++ .../helpers/ShortUrlVisitsCount.test.js | 40 +++++++++++++++++ test/short-urls/helpers/ShortUrlsRow.test.js | 44 ++++--------------- test/visits/ShortUrlVisits.test.js | 2 +- 6 files changed, 96 insertions(+), 67 deletions(-) create mode 100644 src/short-urls/helpers/ShortUrlVisitsCount.js create mode 100644 test/short-urls/helpers/ShortUrlVisitsCount.test.js 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 f117c67a..10585db7 100644 --- a/src/short-urls/helpers/ShortUrlsRow.js +++ b/src/short-urls/helpers/ShortUrlsRow.js @@ -2,42 +2,14 @@ import { isEmpty } from 'ramda'; import React from 'react'; import Moment from 'react-moment'; import PropTypes from 'prop-types'; -import { UncontrolledTooltip } from 'reactstrap'; -import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { shortUrlsListParamsType } from '../reducers/shortUrlsListParams'; 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 renderVisitsCount = (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. - - - ); -}; - const ShortUrlsRow = ( ShortUrlsRowMenu, colorGenerator, @@ -86,7 +58,7 @@ const ShortUrlsRow = ( {this.renderTags(shortUrl.tags)} - {renderVisitsCount(shortUrl)} + ', () => { + let wrapper; + + const createWrapper = (shortUrl) => { + wrapper = shallow(); + + 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(`${visitsCount}`); + 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); + }); +}); diff --git a/test/short-urls/helpers/ShortUrlsRow.test.js b/test/short-urls/helpers/ShortUrlsRow.test.js index 1f7fbc93..5be8718a 100644 --- a/test/short-urls/helpers/ShortUrlsRow.test.js +++ b/test/short-urls/helpers/ShortUrlsRow.test.js @@ -3,7 +3,6 @@ import { shallow } from 'enzyme'; import moment from 'moment'; import Moment from 'react-moment'; import { assoc, toString } from 'ramda'; -import { UncontrolledTooltip } from 'reactstrap'; import createShortUrlsRow from '../../../src/short-urls/helpers/ShortUrlsRow'; import ExternalLink from '../../../src/utils/ExternalLink'; import Tag from '../../../src/tags/helpers/Tag'; @@ -28,24 +27,17 @@ describe('', () => { tags: [ 'nodejs', 'reactjs' ], visitsCount: 45, }; - const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout); - const createWrapper = (meta) => { + + beforeEach(() => { + const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, stateFlagTimeout); + wrapper = shallow( - + ); - - return wrapper; - }; - - afterEach(() => wrapper && wrapper.unmount()); + }); + afterEach(() => wrapper.unmount()); it('renders date in first column', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').first(); const moment = col.find(Moment); @@ -53,7 +45,6 @@ describe('', () => { }); it('renders short URL in second row', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').at(1); const link = col.find(ExternalLink); @@ -61,7 +52,6 @@ describe('', () => { }); it('renders long URL in third row', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').at(2); const link = col.find(ExternalLink); @@ -70,7 +60,6 @@ describe('', () => { describe('renders list of tags in fourth row', () => { it('with tags', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').at(3); const tags = col.find(Tag); @@ -83,8 +72,6 @@ describe('', () => { }); it('without tags', () => { - const wrapper = createWrapper(); - wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) }); const col = wrapper.find('td').at(3); @@ -94,26 +81,12 @@ describe('', () => { }); it('renders visits count in fifth row', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').at(4); - const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control'); - expect(col.text()).toEqual(toString(shortUrl.visitsCount)); - expect(maxVisitsHelper).toHaveLength(0); - }); - - it('renders visits count with helper control displaying the maximum amount of visits', () => { - const maxVisits = 40; - const wrapper = createWrapper({ maxVisits }); - const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control'); - const maxVisitsTooltip = wrapper.find(UncontrolledTooltip); - - expect(maxVisitsHelper).toHaveLength(1); - expect(maxVisitsTooltip).toHaveLength(1); + expect(col.html()).toContain(toString(shortUrl.visitsCount)); }); it('updates state when copied to clipboard', () => { - const wrapper = createWrapper(); const col = wrapper.find('td').at(5); const menu = col.find(ShortUrlsRowMenu); @@ -124,7 +97,6 @@ describe('', () => { }); it('shows copy hint when state prop is true', () => { - const wrapper = createWrapper(); const isHidden = () => wrapper.find('td').at(5).find('.short-urls-row__copy-hint').prop('hidden'); expect(isHidden()).toEqual(true); diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index e7006c75..45f54f63 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -8,7 +8,7 @@ import GraphCard from '../../src/visits/GraphCard'; import DateInput from '../../src/utils/DateInput'; import SortableBarGraph from '../../src/visits/SortableBarGraph'; -describe('', () => { +describe('', () => { let wrapper; const processStatsFromVisits = () => ( { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} } From 595858ac4b38fb7882852d7ff756c00aa060c6cf Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 20:10:12 +0100 Subject: [PATCH 4/5] Used visits count component in short URL visits view --- src/visits/ShortUrlVisits.js | 2 +- src/visits/VisitsHeader.js | 16 ++++++++-------- test/visits/VisitsHeader.test.js | 10 +++------- 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/src/visits/ShortUrlVisits.js b/src/visits/ShortUrlVisits.js index c5b4ef99..bd291590 100644 --- a/src/visits/ShortUrlVisits.js +++ b/src/visits/ShortUrlVisits.js @@ -134,7 +134,7 @@ const ShortUrlVisits = ( return (
- +
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 }) {

- Visits: {visits.length} + + Visits:{' '} + + Visit stats for

Created: {renderDate()}
- Long URL: -   + Long URL:{' '} {loading && Loading...} {!loading && }
diff --git a/test/visits/VisitsHeader.test.js b/test/visits/VisitsHeader.test.js index a0fce13f..84b287d1 100644 --- a/test/visits/VisitsHeader.test.js +++ b/test/visits/VisitsHeader.test.js @@ -11,24 +11,20 @@ describe('', () => { 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(); }); 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: ${shortUrlDetail.shortUrl.visitsCount}`); }); it('shows when the URL was created', () => { From 89e9d2b2d10d48c18d9e3a2488da88ee468e8d4e Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 11 Jan 2020 20:11:41 +0100 Subject: [PATCH 5/5] Fixed accidentally refactored string --- test/visits/ShortUrlVisits.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/visits/ShortUrlVisits.test.js b/test/visits/ShortUrlVisits.test.js index 45f54f63..e7006c75 100644 --- a/test/visits/ShortUrlVisits.test.js +++ b/test/visits/ShortUrlVisits.test.js @@ -8,7 +8,7 @@ import GraphCard from '../../src/visits/GraphCard'; import DateInput from '../../src/utils/DateInput'; import SortableBarGraph from '../../src/visits/SortableBarGraph'; -describe('', () => { +describe('', () => { let wrapper; const processStatsFromVisits = () => ( { os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }