watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 16:45:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactored fetching to use react-query.

Browse source
This commit is contained in:
Mike Cao 2022-12-28 15:43:22 -08:00
parent 7bbed0e12b
commit c56f02c475
112 changed files with 255 additions and 492 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/pages/WebsiteDetails.js
View file

@ -1,5 +1,5 @@
import { useState } from 'react';
import { Column } from 'react-basics';
import { Column, Loading } from 'react-basics';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import classNames from 'classnames';
import WebsiteChart from 'components/metrics/WebsiteChart';
@ -8,7 +8,6 @@ import Page from 'components/layout/Page';
import GridRow from 'components/layout/GridRow';
import MenuLayout from 'components/layout/MenuLayout';
import Link from 'components/common/Link';
import Loading from 'components/common/Loading';
import PagesTable from 'components/metrics/PagesTable';
import ReferrersTable from 'components/metrics/ReferrersTable';
import BrowsersTable from 'components/metrics/BrowsersTable';
@ -18,8 +17,8 @@ import CountriesTable from 'components/metrics/CountriesTable';
import LanguagesTable from 'components/metrics/LanguagesTable';
import ScreenTable from 'components/metrics/ScreenTable';
import QueryParametersTable from 'components/metrics/QueryParametersTable';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
import useApi from 'hooks/useApi';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteDetails.module.css';
@ -49,7 +48,10 @@ const views = {
};
export default function WebsiteDetails({ websiteId }) {
const { data } = useFetch(`/websites/${websiteId}`);
const { get, useQuery } = useApi();
const { data, isLoading } = useQuery(['websites', websiteId], () =>
get(`/websites/${websiteId}`),
);
const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState();
const {
@ -122,6 +124,10 @@ export default function WebsiteDetails({ websiteId }) {
}
}
if (isLoading) {
return <Loading />;
}
if (!data) {
return null;
}
@ -136,7 +142,7 @@ export default function WebsiteDetails({ websiteId }) {
showLink={false}
stickyHeader
/>
{!chartLoaded && <Loading />}
{!chartLoaded && <Loading variant="dots" />}
{chartLoaded && !view && (
<>
<GridRow>