35 lines
921 B
TypeScript
35 lines
921 B
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { getSelectedLocale } from '@/state/localizationSelectors';
|
|
|
|
import { formatRelativeTime } from '@/lib/dateTime';
|
|
|
|
export const RelativeTime = ({
|
|
timestamp,
|
|
format,
|
|
resolution = 2,
|
|
}: {
|
|
timestamp?: number;
|
|
format: 'long' | 'short' | 'narrow' | 'singleCharacter';
|
|
resolution?: number;
|
|
}) => {
|
|
const locale = useSelector(getSelectedLocale);
|
|
|
|
const [now, setNow] = useState(Date.now());
|
|
|
|
useEffect(() => {
|
|
const i = setInterval(() => setNow(Date.now()), 60_000);
|
|
return () => clearInterval(i);
|
|
}, []);
|
|
|
|
return timestamp && new Date(timestamp).valueOf() ? (
|
|
<time
|
|
dateTime={new Date(timestamp).toISOString()}
|
|
title={new Date(timestamp).toLocaleString(locale)}
|
|
>
|
|
{formatRelativeTime(new Date(timestamp).valueOf(), { locale, format, resolution })}
|
|
</time>
|
|
) : null;
|
|
};
|