Support i18n.

This commit is contained in:
Mike Cao 2020-09-07 01:22:16 -07:00
parent f0ac9b6522
commit e8538f6e23
14 changed files with 372 additions and 36 deletions

View file

@ -1,5 +1,4 @@
import React, { useMemo } from 'react';
import { useSpring, animated } from 'react-spring';
import classNames from 'classnames';
import useFetch from 'hooks/useFetch';
import styles from './ActiveUsers.module.css';
@ -11,11 +10,6 @@ export default function ActiveUsers({ websiteId, className }) {
return data?.[0]?.x || 0;
}, [data]);
const props = useSpring({
x: count,
from: { x: 0 },
});
if (count === 0) {
return null;
}
@ -24,14 +18,11 @@ export default function ActiveUsers({ websiteId, className }) {
<div className={classNames(styles.container, className)}>
<div className={styles.dot} />
<div className={styles.text}>
<animated.div className={styles.value}>
{props.x.interpolate(x => x.toFixed(0))}
</animated.div>
<div>
<FormattedMessage
id="active-users.message"
defaultMessage="current {count, plural, one {visitor} other {visitors}}"
values={{ count }}
defaultMessage="{x} current {x, plural, one {visitor} other {visitors}}"
values={{ x: count }}
/>
</div>
</div>