Extracted cards in overview to their own component

This commit is contained in:
Alejandro Celaya 2022-02-05 10:04:34 +01:00
parent 1011b062ae
commit e0d43020dc
6 changed files with 113 additions and 35 deletions

View file

@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import classNames from 'classnames';
import { withSelectedServer } from '../servers/helpers/withSelectedServer';
import { useSwipeable, useToggle } from '../utils/helpers/hooks';
import { supportsDomainRedirects, supportsOrphanVisits } from '../utils/helpers/features';
import { supportsDomainRedirects, supportsNonOrphanVisits, supportsOrphanVisits } from '../utils/helpers/features';
import { isReachableServer } from '../servers/data';
import NotFound from './NotFound';
import { AsideMenuProps } from './AsideMenu';
@ -33,6 +33,7 @@ const MenuLayout = (
}
const addOrphanVisitsRoute = supportsOrphanVisits(selectedServer);
const addNonOrphanVisitsRoute = supportsNonOrphanVisits(selectedServer);
const addManageDomainsRoute = supportsDomainRedirects(selectedServer);
const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
const swipeableProps = useSwipeable(showSidebar, hideSidebar);
@ -55,6 +56,7 @@ const MenuLayout = (
<Route path="/server/:serverId/short-code/:shortCode/edit" component={EditShortUrl} />
<Route path="/server/:serverId/tag/:tag/visits" component={TagVisits} />
{addOrphanVisitsRoute && <Route path="/server/:serverId/orphan-visits" component={OrphanVisits} />}
{addNonOrphanVisitsRoute && <Route path="/server/:serverId/visits" render={() => 'Non orphan'} />}
<Route exact path="/server/:serverId/manage-tags" component={TagsList} />
{addManageDomainsRoute && <Route exact path="/server/:serverId/manage-domains" component={ManageDomains} />}
<Route

View file

@ -1,5 +1,5 @@
import { FC, useEffect } from 'react';
import { Card, CardBody, CardHeader, CardText, CardTitle, Row } from 'reactstrap';
import { Card, CardBody, CardHeader, Row } from 'reactstrap';
import { Link, useHistory } from 'react-router-dom';
import { ITEMS_IN_OVERVIEW_PAGE, ShortUrlsList as ShortUrlsListState } from '../short-urls/reducers/shortUrlsList';
import { prettify } from '../utils/helpers/numbers';
@ -11,8 +11,9 @@ import { VisitsOverview } from '../visits/reducers/visitsOverview';
import { Versions } from '../utils/helpers/version';
import { Topics } from '../mercure/helpers/Topics';
import { ShlinkShortUrlsListParams } from '../api/types';
import { supportsNonOrphanVisits, supportsOrphanVisits } from '../utils/helpers/features';
import { getServerId, SelectedServer } from './data';
import './Overview.scss';
import { HighlightCard } from './helpers/HighlightCard';
interface OverviewConnectProps {
shortUrlsList: ShortUrlsListState;
@ -41,6 +42,8 @@ export const Overview = (
const { loading: loadingTags } = tagsList;
const { loading: loadingVisits, visitsCount, orphanVisitsCount } = visitsOverview;
const serverId = getServerId(selectedServer);
const linkToOrphanVisits = supportsOrphanVisits(selectedServer);
const linkToNonOrphanVisits = supportsNonOrphanVisits(selectedServer);
const history = useHistory();
useEffect(() => {
@ -52,40 +55,36 @@ export const Overview = (
return (
<>
<Row>
<div className="col-md-6 col-xl-3">
<Card className="overview__card mb-3" body>
<CardTitle tag="h5" className="overview__card-title">Visits</CardTitle>
<CardText tag="h2">{loadingVisits ? 'Loading...' : prettify(visitsCount)}</CardText>
</Card>
<div className="col-lg-6 col-xl-3 mb-3">
<HighlightCard title="Visits" link={linkToNonOrphanVisits ? `/server/${serverId}/visits` : undefined}>
{loadingVisits ? 'Loading...' : prettify(visitsCount)}
</HighlightCard>
</div>
<div className="col-md-6 col-xl-3">
<Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/orphan-visits`}>
<CardTitle tag="h5" className="overview__card-title">Orphan visits</CardTitle>
<CardText tag="h2">
<div className="col-lg-6 col-xl-3 mb-3">
<HighlightCard
title="Orphan visits"
link={linkToOrphanVisits ? `/server/${serverId}/orphan-visits` : undefined}
>
<ForServerVersion minVersion="2.6.0">
{loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
</ForServerVersion>
<ForServerVersion maxVersion="2.5.*">
<small className="text-muted"><i>Shlink 2.6 is needed</i></small>
</ForServerVersion>
</CardText>
</Card>
</HighlightCard>
</div>
<div className="col-md-6 col-xl-3">
<Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/list-short-urls/1`}>
<CardTitle tag="h5" className="overview__card-title">Short URLs</CardTitle>
<CardText tag="h2">
<div className="col-lg-6 col-xl-3 mb-3">
<HighlightCard title="Short URLs" link={`/server/${serverId}/list-short-urls/1`}>
{loading ? 'Loading...' : prettify(shortUrls?.pagination.totalItems ?? 0)}
</CardText>
</Card>
</HighlightCard>
</div>
<div className="col-md-6 col-xl-3">
<Card className="overview__card mb-3" body tag={Link} to={`/server/${serverId}/manage-tags`}>
<CardTitle tag="h5" className="overview__card-title">Tags</CardTitle>
<CardText tag="h2">{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}</CardText>
</Card>
<div className="col-lg-6 col-xl-3 mb-3">
<HighlightCard title="Tags" link={`/server/${serverId}/manage-tags`}>
{loadingTags ? 'Loading...' : prettify(tagsList.tags.length)}
</HighlightCard>
</div>
</Row>
<Card className="mb-3">
<CardHeader>
<span className="d-sm-none">Create a short URL</span>

View file

@ -1,13 +1,13 @@
@import '../utils/base';
@import '../../utils/base';
.overview__card.overview__card {
.highlight-card.highlight-card {
text-align: center;
border-top: 3px solid var(--brand-color);
color: inherit;
text-decoration: none;
}
.overview__card-title {
.highlight-card__title {
text-transform: uppercase;
color: $textPlaceholder;
}

View file

@ -0,0 +1,16 @@
import { FC } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom';
import './HighlightCard.scss';
export interface HighlightCardProps {
title: string;
link?: string;
}
export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => (
<Card className="highlight-card" body {...(link && { tag: Link, to: link })}>
<CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
<CardText tag="h2">{children}</CardText>
</Card>
);

View file

@ -25,3 +25,5 @@ export const supportsDomainRedirects = supportsQrErrorCorrection;
export const supportsForwardQuery = serverMatchesVersions({ minVersion: '2.9.0' });
export const supportsDefaultDomainRedirectsEdition = serverMatchesVersions({ minVersion: '2.10.0' });
export const supportsNonOrphanVisits = serverMatchesVersions({ minVersion: '3.0.0' });

View file

@ -0,0 +1,59 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { ReactNode } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom';
import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
describe('<HighlightCard />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props: HighlightCardProps & { children?: ReactNode }) => {
wrapper = shallow(<HighlightCard {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it('renders expected components', () => {
const wrapper = createWrapper({ title: 'foo' });
expect(wrapper.find(Card)).toHaveLength(1);
expect(wrapper.find(CardTitle)).toHaveLength(1);
expect(wrapper.find(CardText)).toHaveLength(1);
expect(wrapper.prop('tag')).not.toEqual(Link);
expect(wrapper.prop('to')).not.toBeDefined();
});
it.each([
[ 'foo' ],
[ 'bar' ],
[ 'baz' ],
])('renders provided title', (title) => {
const wrapper = createWrapper({ title });
const cardTitle = wrapper.find(CardTitle);
expect(cardTitle.html()).toContain(`>${title}<`);
});
it.each([
[ 'foo' ],
[ 'bar' ],
[ 'baz' ],
])('renders provided children', (children) => {
const wrapper = createWrapper({ title: 'foo', children });
const cardText = wrapper.find(CardText);
expect(cardText.html()).toContain(`>${children}<`);
});
it.each([
[ 'foo' ],
[ 'bar' ],
[ 'baz' ],
])('adds extra props when a link is provided', (link) => {
const wrapper = createWrapper({ title: 'foo', link });
expect(wrapper.prop('tag')).toEqual(Link);
expect(wrapper.prop('to')).toEqual(link);
});
});