watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-09 15:17:23 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

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/metrics/ActiveUsers.js
View file

@ -1,15 +1,17 @@
import React, { useMemo } from 'react';
import { useMemo } from 'react';
import { StatusLight } from 'react-basics';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import useFetch from 'hooks/useFetch';
import Dot from 'components/common/Dot';
import useApi from 'hooks/useApi';
import styles from './ActiveUsers.module.css';
export default function ActiveUsers({ websiteId, className, value, interval = 60000 }) {
export default function ActiveUsers({ websiteId, className, value, refetchInterval = 60000 }) {
const url = websiteId ? `/websites/${websiteId}/active` : null;
const { data } = useFetch(url, {
interval,
const { get, useQuery } = useApi();
const { data } = useQuery(['websites:active', websiteId], () => get(url), {
refetchInterval,
});
const count = useMemo(() => {
if (websiteId) {
return data?.[0]?.x || 0;
@ -24,7 +26,7 @@ export default function ActiveUsers({ websiteId, className, value, interval = 60
return (
<div className={classNames(styles.container, className)}>
<Dot />
<StatusLight variant="success" />
<div className={styles.text}>
<div>
<FormattedMessage