umami/components/metrics/ActiveUsers.js

39 lines
1.1 KiB
JavaScript
Raw Normal View History

import React, { useMemo } from 'react';
2020-10-09 08:26:05 +02:00
import { FormattedMessage } from 'react-intl';
2020-08-18 09:51:32 +02:00
import classNames from 'classnames';
import useFetch from 'hooks/useFetch';
import Dot from 'components/common/Dot';
2020-10-11 11:29:55 +02:00
import { TOKEN_HEADER } from 'lib/constants';
import useShareToken from 'hooks/useShareToken';
2020-08-18 09:51:32 +02:00
import styles from './ActiveUsers.module.css';
2020-10-11 11:29:55 +02:00
export default function ActiveUsers({ websiteId, className }) {
const shareToken = useShareToken();
2020-10-09 21:39:03 +02:00
const { data } = useFetch(`/api/website/${websiteId}/active`, {
interval: 60000,
2020-10-11 11:29:55 +02:00
headers: { [TOKEN_HEADER]: shareToken?.token },
2020-10-09 21:39:03 +02:00
});
const count = useMemo(() => {
return data?.[0]?.x || 0;
}, [data]);
2020-08-18 09:51:32 +02:00
if (count === 0) {
return null;
}
return (
<div className={classNames(styles.container, className)}>
<Dot />
2020-08-18 09:51:32 +02:00
<div className={styles.text}>
2020-09-06 02:27:01 +02:00
<div>
<FormattedMessage
2020-09-17 07:29:40 +02:00
id="message.active-users"
2020-09-07 10:22:16 +02:00
defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
values={{ x: count }}
2020-09-06 02:27:01 +02:00
/>
</div>
2020-08-18 09:51:32 +02:00
</div>
</div>
);
}