components/history-list/examples.tsx

Functions

Imports

It imports components/history-list/history-list.react.tsx, components/message/message.react.tsx. No module of this repo imports it.

Source

1// Mounts the React specimen: the same contract as the HTML above, from the wrapper, with the
2// app's part written out (it adds the new line when a restore happens, and removes it on Undo).
3import { StrictMode, useState } from "react";
4import { createRoot } from "react-dom/client";
5import { MessageProvider } from "../message/message.react.tsx";
6import { HistoryList, type HistoryEntry } from "./history-list.react.tsx";
7
8const NOW = Date.parse("2026-10-02T15:00:00Z");
9
10const ENTRIES: HistoryEntry[] = [
11  { id: "r-5", kind: "edit", who: "Dustin Edwards", at: "2026-10-02T14:52:00Z", words: 1954, summary: "Added the 2019 burst size paper and its caveat" },
12  { id: "r-4", kind: "publish", who: "Dustin Edwards", at: "2026-10-02T14:45:00Z", words: 1912, summary: "Published the reading list", destinations: [{ name: "dustinedwards.info", status: "live" }, { name: "TXASM newsletter", status: "queued" }] },
13  { id: "r-3", kind: "autosave", who: "Dustin Edwards", at: "2026-10-02T14:40:00Z", words: 1912, summary: "Autosaved after a pause" },
14  { id: "r-2", kind: "autosave", who: "Dustin Edwards", at: "2026-10-02T14:20:00Z", words: 1890, summary: "Autosaved while typing" },
15  { id: "r-1", kind: "named", who: "Rosa Park", at: "2026-10-01T16:10:00Z", words: 1854, summary: "Cut the duplicate paragraph on prophage induction", name: "Before the rewrite", delta: -30 },
16];
17
18function Demo() {
19  const [entries, setEntries] = useState(ENTRIES);
20  return (
21    <HistoryList
22      entries={entries}
23      label="History, from the React wrapper"
24      user="Dustin Edwards"
25      compareBase="/posts/phage-lambda/compare"
26      now={NOW}
27      olderHref="?before=r-1"
28      onRestore={({ entry }) => setEntries((cur) => [entry, ...cur])}
29      onUndoRestore={({ entry }) => setEntries((cur) => cur.filter((e) => e.id !== entry.id))}
30    />
31  );
32}
33
34const mount = document.getElementById("react-history");
35if (mount) {
36  createRoot(mount).render(
37    <StrictMode>
38      <MessageProvider>
39        <Demo />
40      </MessageProvider>
41    </StrictMode>,
42  );
43}