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

63 lines
2.3 KiB
TypeScript
Raw Normal View History

2020-11-14 00:44:26 +03:00
import { useEffect } from 'react';
import { RouteComponentProps } from 'react-router';
import { boundToMercureHub } from '../mercure/helpers/boundToMercureHub';
import { ShlinkVisitsParams } from '../api/types';
2020-12-20 21:28:09 +03:00
import { parseQuery } from '../utils/helpers/query';
import { Topics } from '../mercure/helpers/Topics';
import { ShortUrlDetail } from '../short-urls/reducers/shortUrlDetail';
2021-03-06 12:56:49 +03:00
import { Settings } from '../settings/reducers/settings';
import { ShortUrlVisits as ShortUrlVisitsState } from './reducers/shortUrlVisits';
import ShortUrlVisitsHeader from './ShortUrlVisitsHeader';
2020-09-05 09:49:18 +03:00
import VisitsStats from './VisitsStats';
2021-03-14 14:49:12 +03:00
import { VisitsExporter } from './services/VisitsExporter';
import { NormalizedVisit } from './types';
export interface ShortUrlVisitsProps extends RouteComponentProps<{ shortCode: string }> {
getShortUrlVisits: (shortCode: string, query?: ShlinkVisitsParams) => void;
shortUrlVisits: ShortUrlVisitsState;
getShortUrlDetail: Function;
shortUrlDetail: ShortUrlDetail;
2020-09-05 09:49:18 +03:00
cancelGetShortUrlVisits: () => void;
2021-03-06 12:56:49 +03:00
settings: Settings;
}
2021-03-14 14:49:12 +03:00
const ShortUrlVisits = ({ exportVisits }: VisitsExporter) => boundToMercureHub(({
history: { goBack },
2020-12-20 21:28:09 +03:00
match: { params, url },
location: { search },
shortUrlVisits,
shortUrlDetail,
getShortUrlVisits,
getShortUrlDetail,
cancelGetShortUrlVisits,
2021-03-06 12:56:49 +03:00
settings,
}: ShortUrlVisitsProps) => {
const { shortCode } = params;
2020-12-20 21:28:09 +03:00
const { domain } = parseQuery<{ domain?: string }>(search);
2020-09-05 09:49:18 +03:00
const loadVisits = (params: Partial<ShlinkVisitsParams>) => getShortUrlVisits(shortCode, { ...params, domain });
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, domain);
}, []);
return (
2020-12-20 21:28:09 +03:00
<VisitsStats
getVisits={loadVisits}
cancelGetVisits={cancelGetShortUrlVisits}
visitsInfo={shortUrlVisits}
baseUrl={url}
domain={domain}
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>
);
}, ({ match }) => [ Topics.shortUrlVisits(match.params.shortCode) ]);
export default ShortUrlVisits;