umami/components/pages/websites/WebsiteDetails.js

48 lines
1.4 KiB
JavaScript
Raw Normal View History

2023-02-04 17:59:52 +01:00
import { useState } from 'react';
import { Loading } from 'react-basics';
import Page from 'components/layout/Page';
import WebsiteChart from 'components/metrics/WebsiteChart';
import useApi from 'hooks/useApi';
import usePageQuery from 'hooks/usePageQuery';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
2023-02-04 17:59:52 +01:00
import WebsiteTableView from './WebsiteTableView';
import WebsiteMenuView from './WebsiteMenuView';
2020-10-11 11:29:55 +02:00
export default function WebsiteDetails({ websiteId }) {
const { get, useQuery } = useApi();
2023-02-04 17:59:52 +01:00
const { data, isLoading, error } = useQuery(['websites', websiteId], () =>
get(`/websites/${websiteId}`),
);
const [chartLoaded, setChartLoaded] = useState(false);
2023-02-04 17:59:52 +01:00
const {
2020-09-26 07:31:18 +02:00
query: { view },
} = usePageQuery();
function handleDataLoad() {
2020-08-31 23:11:30 +02:00
if (!chartLoaded) {
2020-10-10 05:37:24 +02:00
setTimeout(() => setChartLoaded(true), DEFAULT_ANIMATION_DURATION);
2020-08-31 23:11:30 +02:00
}
2020-08-01 04:05:14 +02:00
}
return (
2023-02-04 17:59:52 +01:00
<Page loading={isLoading} error={error}>
2022-12-10 23:26:52 +01:00
<WebsiteChart
websiteId={websiteId}
2023-02-04 17:59:52 +01:00
title={data?.name}
domain={data?.domain}
2022-12-10 23:26:52 +01:00
onDataLoad={handleDataLoad}
showLink={false}
2023-02-09 08:14:11 +01:00
stickyHeader={true}
2022-12-10 23:26:52 +01:00
/>
2023-03-24 18:55:20 +01:00
{!chartLoaded && <Loading icon="dots" style={{ minHeight: 300 }} />}
2023-02-04 17:59:52 +01:00
{chartLoaded && (
<>
2023-02-04 17:59:52 +01:00
{!view && <WebsiteTableView websiteId={websiteId} />}
{view && <WebsiteMenuView websiteId={websiteId} />}
</>
)}
2020-08-06 04:04:02 +02:00
</Page>
2020-08-01 04:05:14 +02:00
);
}