Added back button to visits stats page

This commit is contained in:
Alejandro Celaya 2020-04-26 10:43:00 +02:00
parent 9ba8bc8f3d
commit dd728d4d13
4 changed files with 31 additions and 7 deletions

View file

@ -21,6 +21,9 @@ import { shortUrlDetailType } from './reducers/shortUrlDetail';
import VisitsTable from './VisitsTable';
const propTypes = {
history: PropTypes.shape({
goBack: PropTypes.func,
}),
match: PropTypes.shape({
params: PropTypes.object,
}),
@ -53,6 +56,7 @@ let selectedBar;
const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModalBtn) => {
const ShortUrlVisitsComp = ({
history,
match,
location,
shortUrlVisits,
@ -204,7 +208,7 @@ const ShortUrlVisits = ({ processStatsFromVisits, normalizeVisits }, OpenMapModa
return (
<React.Fragment>
<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />
<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={history.goBack} />
<section className="mt-4">
<div className="row flex-md-row-reverse">

View file

@ -1,7 +1,10 @@
import { Card, UncontrolledTooltip } from 'reactstrap';
import { Button, Card, UncontrolledTooltip } from 'reactstrap';
import Moment from 'react-moment';
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';
@ -10,9 +13,10 @@ import './VisitsHeader.scss';
const propTypes = {
shortUrlDetail: shortUrlDetailType.isRequired,
shortUrlVisits: shortUrlVisitsType.isRequired,
goBack: PropTypes.func.isRequired,
};
export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
export default function VisitsHeader({ shortUrlDetail, shortUrlVisits, goBack }) {
const { shortUrl, loading } = shortUrlDetail;
const { visits } = shortUrlVisits;
const shortLink = shortUrl && shortUrl.shortUrl ? shortUrl.shortUrl : '';
@ -26,17 +30,28 @@ export default function VisitsHeader({ shortUrlDetail, shortUrlVisits }) {
</UncontrolledTooltip>
</span>
);
const visitsStatsTitle = (
<React.Fragment>
Visit stats for <ExternalLink href={shortLink} />
</React.Fragment>
);
return (
<header>
<Card className="bg-light" body>
<h2>
<span className="badge badge-main float-right">
<h2 className="d-flex justify-content-between align-items-center">
<Button color="link" size="lg" className="p-0 mr-3" onClick={goBack}>
<FontAwesomeIcon icon={faArrowLeft} />
</Button>
<span className="text-center d-none d-sm-block">
{visitsStatsTitle}
</span>
<span className="badge badge-main ml-3">
Visits:{' '}
<ShortUrlVisitsCount visitsCount={visits.length} shortUrl={shortUrl} />
</span>
Visit stats for <ExternalLink href={shortLink} />
</h2>
<h3 className="text-center d-block d-sm-none mb-0">{visitsStatsTitle}</h3>
<hr />
<div>Created: {renderDate()}</div>
<div>

View file

@ -18,6 +18,9 @@ describe('<ShortUrlVisits />', () => {
params: { shortCode: 'abc123' },
};
const location = { search: '' };
const history = {
goBack: jest.fn(),
};
const createComponent = (shortUrlVisits) => {
const ShortUrlVisits = createShortUrlVisits({ processStatsFromVisits, normalizeVisits: identity }, () => '');
@ -28,6 +31,7 @@ describe('<ShortUrlVisits />', () => {
getShortUrlVisits={getShortUrlVisitsMock}
match={match}
location={location}
history={history}
shortUrlVisits={shortUrlVisits}
shortUrlDetail={{}}
cancelGetShortUrlVisits={identity}

View file

@ -17,9 +17,10 @@ describe('<VisitsHeader />', () => {
const shortUrlVisits = {
visits: [{}, {}, {}],
};
const goBack = jest.fn();
beforeEach(() => {
wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} />);
wrapper = shallow(<VisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />);
});
afterEach(() => wrapper.unmount());