mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 09:47:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Reduced duplication when defining routes in visits section

Browse source
This commit is contained in:
Alejandro Celaya 2020-12-20 19:42:37 +01:00
parent 83221c1066
commit 4642e07fd3
2 changed files with 12 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/visits/ShortUrlVisits.tsx
View file

@ -28,7 +28,6 @@ const ShortUrlVisits = boundToMercureHub(({
}: ShortUrlVisitsProps) => { }: ShortUrlVisitsProps) => {
const { shortCode } = params; const { shortCode } = params;
const { domain } = parseQuery<{ domain?: string }>(search); const { domain } = parseQuery<{ domain?: string }>(search);
const loadVisits = (params: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...params, domain }); const loadVisits = (params: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...params, domain });
useEffect(() => { useEffect(() => {

25
src/visits/VisitsStats.tsx
View file

@ -31,11 +31,11 @@ export interface VisitsStatsProps {
type HighlightableProps = 'referer' | 'country' | 'city'; type HighlightableProps = 'referer' | 'country' | 'city';
type Section = 'byTime' | 'byContext' | 'byLocation' | 'list'; type Section = 'byTime' | 'byContext' | 'byLocation' | 'list';
const sections: Record<Section, { title: string; subPath?: string; icon: IconDefinition }> = { const sections: Record<Section, { title: string; subPath: string; icon: IconDefinition }> = {
byTime: { title: 'By time', icon: faCalendarAlt }, byTime: { title: 'By time', subPath: '', icon: faCalendarAlt },
byContext: { title: 'By context', subPath: 'by-context', icon: faChartPie }, byContext: { title: 'By context', subPath: '/by-context', icon: faChartPie },
byLocation: { title: 'By location', subPath: 'by-location', icon: faMapMarkedAlt }, byLocation: { title: 'By location', subPath: '/by-location', icon: faMapMarkedAlt },
list: { title: 'List', subPath: 'list', icon: faList }, list: { title: 'List', subPath: '/list', icon: faList },
}; };
const highlightedVisitsToStats = ( const highlightedVisitsToStats = (
@ -61,7 +61,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
const buildSectionUrl = (subPath?: string) => { const buildSectionUrl = (subPath?: string) => {
const query = domain ? `?domain=${domain}` : ''; const query = domain ? `?domain=${domain}` : '';
return !subPath ? `${baseUrl}${query}` : `${baseUrl}/${subPath}${query}`; return !subPath ? `${baseUrl}${query}` : `${baseUrl}${subPath}${query}`;
}; };
const { visits, loading, loadingLarge, error, progress } = visitsInfo; const { visits, loading, loadingLarge, error, progress } = visitsInfo;
const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]); const normalizedVisits = useMemo(() => normalizeVisits(visits), [ visits ]);
@ -133,9 +133,8 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
tag={RouterNavLink} tag={RouterNavLink}
className="visits-stats__nav-link" className="visits-stats__nav-link"
to={buildSectionUrl(subPath)} to={buildSectionUrl(subPath)}
isActive={(_: null, { pathname }: Location) => isActive={(_: null, { pathname }: Location) => pathname.endsWith(`/visits${subPath}`)}
(!subPath && pathname.endsWith('/visits')) || (subPath && pathname.endsWith(subPath)) replace
}
> >
<FontAwesomeIcon icon={icon} /> <FontAwesomeIcon icon={icon} />
<span className="ml-2 d-none d-sm-inline">{title}</span> <span className="ml-2 d-none d-sm-inline">{title}</span>
@ -158,7 +157,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
</div> </div>
</Route> </Route>
<Route exact path={`${baseUrl}/by-context`}> <Route exact path={`${baseUrl}${sections.byContext.subPath}`}>
<div className="col-xl-4 col-lg-6 mt-4"> <div className="col-xl-4 col-lg-6 mt-4">
<GraphCard title="Operating systems" stats={os} /> <GraphCard title="Operating systems" stats={os} />
</div> </div>
@ -181,7 +180,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
</div> </div>
</Route> </Route>
<Route exact path={`${baseUrl}/by-location`}> <Route exact path={`${baseUrl}${sections.byLocation.subPath}`}>
<div className="col-lg-6 mt-4"> <div className="col-lg-6 mt-4">
<SortableBarGraph <SortableBarGraph
title="Countries" title="Countries"
@ -214,7 +213,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
</div> </div>
</Route> </Route>
<Route exact path={`${baseUrl}/list`}> <Route exact path={`${baseUrl}${sections.list.subPath}`}>
<div className="col-12"> <div className="col-12">
<VisitsTable <VisitsTable
visits={normalizedVisits} visits={normalizedVisits}
@ -253,7 +252,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({ children, visitsInfo, getVisits, ca
className="btn-md-block" className="btn-md-block"
onClick={() => setSelectedVisits([])} onClick={() => setSelectedVisits([])}
> >
Reset selection {highlightedVisits.length > 0 && <>({highlightedVisits.length})</>} Clear selection {highlightedVisits.length > 0 && <>({highlightedVisits.length})</>}
</Button> </Button>
</div> </div>
)} )}