mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Used visits count component in short URL visits view

Browse source
This commit is contained in:
Alejandro Celaya 2020-01-11 20:10:12 +01:00
parent 3f2162fe62
commit 595858ac4b
3 changed files with 12 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/visits/ShortUrlVisits.js
View file

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

16
src/visits/VisitsHeader.js
View file

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

10
test/visits/VisitsHeader.test.js
View file

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