1import { useSyncExternalStore } from "react";
2
3import {
4 formatRelativeElapsed,
5 msUntilRelativeTimeChange,
6 relativeTimeElapsedMs,
7 type RelativeTimeState,
8} from "../timestampFormat";
9
10export function useRelativeTimeState(isoDate: string | null): RelativeTimeState {
11 const subscribe = (onChange: () => void) => {
12 if (isoDate === null) return () => {};
13 let timer: ReturnType<typeof setTimeout> | undefined;
14 const schedule = () => {
15 const delayMs = msUntilRelativeTimeChange(isoDate);
16 if (delayMs === null) return;
17 timer = setTimeout(() => {
18 onChange();
19 schedule();
20 }, delayMs);
21 };
22 schedule();
23 return () => clearTimeout(timer);
24 };
25 const getSnapshot = () => (isoDate === null ? null : relativeTimeElapsedMs(isoDate));
26 const elapsedMs = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
27
28 if (isoDate === null) return { status: "missing" };
29 if (elapsedMs === null) return { status: "invalid" };
30 return { status: "relative", ...formatRelativeElapsed(elapsedMs) };
31}