components/time/time.react.tsx

Functions

Imports

It imports components/time/time.ts. Imported by components/admin-shell/admin-shell.react.tsx, components/flag-list/flag-list.react.tsx, components/history-list/history-list.react.tsx, components/mentions-list/mentions-list.react.tsx, components/posts-list/posts-list.react.tsx, components/publish-gate/publish-gate.react.tsx.

Source

1import { useEffect, useState } from "react";
2import { REFRESH_MS, exactParts, parse, text, type TimeFormat } from "./time.ts";
3
4export interface TimeProps {
5  // Milliseconds, a Date, or a server timestamp (a zoneless one is read as UTC).
6  at: number | Date | string;
7  // Relative in rows; exact (viewer's zone and UTC) in a detail.
8  format?: TimeFormat;
9  // A fixed "now", for a report or a test, or the server's now when its clock and the
10  // browser's disagree (serverNow). Without it the text refreshes every 30 s.
11  now?: number;
12}
13
14function toMs(at: TimeProps["at"]): number {
15  return typeof at === "number" ? at : at instanceof Date ? at.getTime() : parse(at);
16}
17
18// The clock, ticking every 30 seconds while a relative time is shown.
19function useClock(enabled: boolean): number {
20  const [now, setNow] = useState(() => Date.now());
21  useEffect(() => {
22    if (!enabled) return;
23    setNow(Date.now());
24    const t = window.setInterval(() => setNow(Date.now()), REFRESH_MS);
25    return () => window.clearInterval(t);
26  }, [enabled]);
27  return now;
28}
29
30export function Time({ at, format = "relative", now }: TimeProps) {
31  const t = toMs(at);
32  const clock = useClock(format === "relative" && now === undefined);
33  const iso = Number.isFinite(t) ? new Date(t).toISOString() : undefined;
34  // A time that cannot be read is said in words and is not a <time> (it has no datetime).
35  if (!iso) return <span className="cap-time">{text(t, format)}</span>;
36  // The server's words can differ from the browser's (its clock, its zone); the browser's
37  // win without a warning.
38  const p = format === "exact" ? exactParts(t) : null;
39  return (
40    <time className="cap-time" dateTime={iso} data-format={format === "exact" ? "exact" : undefined} suppressHydrationWarning>
41      {p ? (
42        <>
43          {p.utc ? `${p.local} ` : p.local}
44          {p.utc ? <span className="cap-time-utc">{p.utc}</span> : null}
45        </>
46      ) : (
47        text(t, format, now ?? clock)
48      )}
49    </time>
50  );
51}