66 lines
1.6 KiB
TypeScript
66 lines
1.6 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
|
|
const MinuteInMs = 1_000 * 60;
|
|
const HourInMs = MinuteInMs * 60;
|
|
const DayInMs = HourInMs * 24;
|
|
|
|
export interface NoteTimeProps {
|
|
from: number;
|
|
fallback?: string;
|
|
}
|
|
|
|
export default function NoteTime(props: NoteTimeProps) {
|
|
const [time, setTime] = useState<string>();
|
|
const { from, fallback } = props;
|
|
const absoluteTime = new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: "medium",
|
|
timeStyle: "long",
|
|
}).format(from);
|
|
const fromDate = new Date(from);
|
|
const isoDate = fromDate.toISOString();
|
|
|
|
function calcTime() {
|
|
const fromDate = new Date(from);
|
|
const ago = new Date().getTime() - from;
|
|
const absAgo = Math.abs(ago);
|
|
if (absAgo > DayInMs) {
|
|
return fromDate.toLocaleDateString(undefined, {
|
|
year: "2-digit",
|
|
month: "short",
|
|
day: "2-digit",
|
|
weekday: "short",
|
|
});
|
|
} else if (absAgo > HourInMs) {
|
|
return `${fromDate.getHours().toString().padStart(2, "0")}:${fromDate.getMinutes().toString().padStart(2, "0")}`;
|
|
} else if (absAgo < MinuteInMs) {
|
|
return fallback;
|
|
} else {
|
|
const mins = Math.floor(absAgo / MinuteInMs);
|
|
if (ago < 0) {
|
|
return `in ${mins}m`;
|
|
}
|
|
return `${mins}m`;
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
setTime(calcTime());
|
|
const t = setInterval(() => {
|
|
setTime(s => {
|
|
const newTime = calcTime();
|
|
if (newTime !== s) {
|
|
return newTime;
|
|
}
|
|
return s;
|
|
});
|
|
}, MinuteInMs);
|
|
return () => clearInterval(t);
|
|
}, [from]);
|
|
|
|
return (
|
|
<time dateTime={isoDate} title={absoluteTime}>
|
|
{time}
|
|
</time>
|
|
);
|
|
}
|