watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-15 10:05:36 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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

24
components/pages/RealtimeDashboard.js
View file

@ -1,4 +1,4 @@
import React, { useState, useEffect, useMemo, useCallback } from 'react';
import { useState, useEffect, useMemo, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { subMinutes, startOfMinute } from 'date-fns';
import firstBy from 'thenby';
@ -10,7 +10,7 @@ import RealtimeHeader from 'components/metrics/RealtimeHeader';
import WorldMap from 'components/common/WorldMap';
import DataTable from 'components/metrics/DataTable';
import RealtimeViews from 'components/metrics/RealtimeViews';
import useFetch from 'hooks/useFetch';
import useApi from 'hooks/useApi';
import useLocale from 'hooks/useLocale';
import useCountryNames from 'hooks/useCountryNames';
import { percentFilter } from 'lib/filters';
@ -33,13 +33,17 @@ export default function RealtimeDashboard() {
const countryNames = useCountryNames(locale);
const [data, setData] = useState();
const [websiteId, setWebsiteId] = useState(null);
const { data: init, loading } = useFetch('/realtime/init');
const { data: updates } = useFetch('/realtime/update', {
params: { startAt: data?.timestamp },
disabled: !init?.websites?.length || !data,
interval: REALTIME_INTERVAL,
headers: { [SHARE_TOKEN_HEADER]: init?.token },
});
const { get, useQuery } = useApi();
const { data: init, isLoading } = useQuery(['realtime:init'], () => get('/realtime/init'));
const { data: updates } = useQuery(
['realtime:updates'],
() =>
get('/realtime/update', { startAt: data?.timestamp }, { [SHARE_TOKEN_HEADER]: init?.token }),
{
disabled: !init?.websites?.length || !data,
retryInterval: REALTIME_INTERVAL,
},
);
const renderCountryName = useCallback(
({ x }) => <span className={locale}>{countryNames[x]}</span>,
@ -108,7 +112,7 @@ export default function RealtimeDashboard() {
}
}, [updates]);
if (!init || !data || loading) {
if (!init || !data || isLoading) {
return null;
}