shlink-web-client/src/visits/ShortUrlVisits.tsx

64 lines
2.6 KiB
TypeScript
Raw Normal View History

2020-11-14 00:44:26 +03:00
import { useEffect } from 'react';
2022-02-06 22:07:18 +03:00
import { useLocation, useParams } from 'react-router-dom';
2023-02-18 13:11:01 +03:00
import type { ReportExporter } from '../common/services/ReportExporter';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { Topics } from '../mercure/helpers/Topics';
2023-02-18 13:11:01 +03:00
import type { ShortUrlIdentifier } from '../short-urls/data';
import { urlDecodeShortCode } from '../short-urls/helpers';
2023-02-18 12:40:37 +03:00
import type { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
2022-02-06 22:07:18 +03:00
import { useGoBack } from '../utils/helpers/hooks';
2023-02-18 13:11:01 +03:00
import { parseQuery } from '../utils/helpers/query';
2023-02-18 12:40:37 +03:00
import type { LoadShortUrlVisits, ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
import { ShortUrlVisitsHeader } from './ShortUrlVisitsHeader';
2023-02-18 12:40:37 +03:00
import type { NormalizedVisit, VisitsParams } from './types';
import type { CommonVisitsProps } from './types/CommonVisitsProps';
import { toApiParams } from './types/helpers';
2023-02-18 13:11:01 +03:00
import { VisitsStats } from './VisitsStats';
2022-02-06 22:07:18 +03:00
export interface ShortUrlVisitsProps extends CommonVisitsProps {
getShortUrlVisits: (params: LoadShortUrlVisits) => void;
shortUrlVisits: ShortUrlVisitsState;
getShortUrlDetail: (shortUrl: ShortUrlIdentifier) => void;
shortUrlDetail: ShortUrlDetail;
2020-09-05 09:49:18 +03:00
cancelGetShortUrlVisits: () => void;
}
export const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercureHub(({
shortUrlVisits,
shortUrlDetail,
getShortUrlVisits,
getShortUrlDetail,
cancelGetShortUrlVisits,
2021-03-06 12:56:49 +03:00
settings,
}: ShortUrlVisitsProps) => {
2022-02-06 22:07:18 +03:00
const { shortCode = '' } = useParams<{ shortCode: string }>();
const { search } = useLocation();
const goBack = useGoBack();
2020-12-20 21:28:09 +03:00
const { domain } = parseQuery<{ domain?: string }>(search);
const loadVisits = (params: VisitsParams, doIntervalFallback?: boolean) => getShortUrlVisits({
shortCode: urlDecodeShortCode(shortCode),
query: { ...toApiParams(params), domain },
doIntervalFallback,
});
2021-03-14 14:49:12 +03:00
const exportCsv = (visits: NormalizedVisit[]) => exportVisits(
`short-url_${shortUrlDetail.shortUrl?.shortUrl.replace(/https?:\/\//g, '')}_visits.csv`,
visits,
);
useEffect(() => {
getShortUrlDetail({ shortCode: urlDecodeShortCode(shortCode), domain });
}, []);
return (
2020-12-20 21:28:09 +03:00
<VisitsStats
getVisits={loadVisits}
cancelGetVisits={cancelGetShortUrlVisits}
visitsInfo={shortUrlVisits}
2021-03-06 12:56:49 +03:00
settings={settings}
2021-03-14 14:49:12 +03:00
exportCsv={exportCsv}
2020-12-20 21:28:09 +03:00
>
<ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />
</VisitsStats>
);
}, (_, params) => (params.shortCode ? [Topics.shortUrlVisits(urlDecodeShortCode(params.shortCode))] : []));