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';
|
2020-09-06 20:41:15 +03:00
|
|
|
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
|
2020-12-22 11:49:13 +03:00
|
|
|
import { ShlinkVisitsParams } from '../api/types';
|
2020-12-20 21:28:09 +03:00
|
|
|
import { parseQuery } from '../utils/helpers/query';
|
2021-02-28 12:12:30 +03:00
|
|
|
import { Topics } from '../mercure/helpers/Topics';
|
2021-03-05 18:04:02 +03:00
|
|
|
import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
|
2022-02-06 22:07:18 +03:00
|
|
|
import { useGoBack } from '../utils/helpers/hooks';
|
2022-03-13 20:56:42 +03:00
|
|
|
import { ReportExporter } from '../common/services/ReportExporter';
|
2020-09-04 20:05:41 +03:00
|
|
|
import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
|
2022-05-28 12:16:59 +03:00
|
|
|
import { ShortUrlVisitsHeader } from './ShortUrlVisitsHeader';
|
2022-05-28 11:34:12 +03:00
|
|
|
import { VisitsStats } from './VisitsStats';
|
2021-06-30 04:23:45 +03:00
|
|
|
import { NormalizedVisit, VisitsParams } from './types';
|
2021-06-13 12:07:32 +03:00
|
|
|
import { CommonVisitsProps } from './types/CommonVisitsProps';
|
2021-06-30 04:23:45 +03:00
|
|
|
import { toApiParams } from './types/helpers';
|
2020-09-04 20:05:41 +03:00
|
|
|
|
2022-02-06 22:07:18 +03:00
|
|
|
export interface ShortUrlVisitsProps extends CommonVisitsProps {
|
2021-12-23 12:51:13 +03:00
|
|
|
getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams, doIntervalFallback?: boolean) => void;
|
2020-09-04 20:05:41 +03:00
|
|
|
shortUrlVisits: ShortUrlVisitsState;
|
|
|
|
getShortUrlDetail: Function;
|
|
|
|
shortUrlDetail: ShortUrlDetail;
|
2020-09-05 09:49:18 +03:00
|
|
|
cancelGetShortUrlVisits: () => void;
|
2020-09-04 20:05:41 +03:00
|
|
|
}
|
|
|
|
|
2022-05-28 12:16:59 +03:00
|
|
|
export const ShortUrlVisits = ({ exportVisits }: ReportExporter) => boundToMercureHub(({
|
2020-09-04 20:05:41 +03:00
|
|
|
shortUrlVisits,
|
|
|
|
shortUrlDetail,
|
|
|
|
getShortUrlVisits,
|
|
|
|
getShortUrlDetail,
|
|
|
|
cancelGetShortUrlVisits,
|
2021-03-06 12:56:49 +03:00
|
|
|
settings,
|
2021-06-13 12:07:32 +03:00
|
|
|
selectedServer,
|
2020-09-04 20:05:41 +03:00
|
|
|
}: 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);
|
2021-12-23 12:51:13 +03:00
|
|
|
const loadVisits = (params: VisitsParams, doIntervalFallback?: boolean) =>
|
|
|
|
getShortUrlVisits(shortCode, { ...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,
|
|
|
|
);
|
2020-09-04 20:05:41 +03:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
getShortUrlDetail(shortCode, domain);
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
return (
|
2020-12-20 21:28:09 +03:00
|
|
|
<VisitsStats
|
|
|
|
getVisits={loadVisits}
|
|
|
|
cancelGetVisits={cancelGetShortUrlVisits}
|
|
|
|
visitsInfo={shortUrlVisits}
|
|
|
|
domain={domain}
|
2021-03-06 12:56:49 +03:00
|
|
|
settings={settings}
|
2021-03-14 14:49:12 +03:00
|
|
|
exportCsv={exportCsv}
|
2021-06-13 12:07:32 +03:00
|
|
|
selectedServer={selectedServer}
|
2020-12-20 21:28:09 +03:00
|
|
|
>
|
2020-09-04 20:05:41 +03:00
|
|
|
<ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />
|
|
|
|
</VisitsStats>
|
|
|
|
);
|
2022-03-26 14:17:42 +03:00
|
|
|
}, (_, params) => [Topics.shortUrlVisits(params.shortCode)]);
|