71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
export interface NoteTimeProps {
|
|
from: number;
|
|
fallback?: string;
|
|
}
|
|
|
|
const secondsInAMinute = 60;
|
|
const secondsInAnHour = secondsInAMinute * 60;
|
|
const secondsInADay = secondsInAnHour * 24;
|
|
|
|
export default function NoteTime(props: NoteTimeProps) {
|
|
const [time, setTime] = useState<string | JSX.Element>();
|
|
const { from, fallback } = props;
|
|
|
|
const absoluteTime = new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: "medium",
|
|
timeStyle: "long",
|
|
}).format(from);
|
|
|
|
const isoDate = new Date(from).toISOString();
|
|
|
|
function calcTime() {
|
|
const fromDate = new Date(from);
|
|
const currentTime = new Date();
|
|
const timeDifference = Math.floor((currentTime.getTime() - fromDate.getTime()) / 1000);
|
|
|
|
if (timeDifference < secondsInAMinute) {
|
|
return <FormattedMessage defaultMessage="now" id="kaaf1E" />;
|
|
} else if (timeDifference < secondsInAnHour) {
|
|
return `${Math.floor(timeDifference / secondsInAMinute)}m`;
|
|
} else if (timeDifference < secondsInADay) {
|
|
return `${Math.floor(timeDifference / secondsInAnHour)}h`;
|
|
} else {
|
|
if (fromDate.getFullYear() === currentTime.getFullYear()) {
|
|
return fromDate.toLocaleDateString(undefined, {
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
} else {
|
|
return fromDate.toLocaleDateString(undefined, {
|
|
year: "numeric",
|
|
month: "short",
|
|
day: "numeric",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setTime(calcTime());
|
|
const t = setInterval(() => {
|
|
setTime(s => {
|
|
const newTime = calcTime();
|
|
if (newTime !== s) {
|
|
return newTime;
|
|
}
|
|
return s;
|
|
});
|
|
}, 60_000); // update every minute
|
|
return () => clearInterval(t);
|
|
}, [from]);
|
|
|
|
return (
|
|
<time dateTime={isoDate} title={absoluteTime}>
|
|
{time || fallback}
|
|
</time>
|
|
);
|
|
}
|