app/components/admin/revision-list.tsx

Functions

Imports

It imports app/lib/editor/frontmatter.ts, app/lib/error-message.mjs. Imported by app/components/admin/post-editor.tsx, app/routes/admin.posts.$slug.history.tsx.

Source

1import { Fragment, useState } from "react";
2import { Alert } from "capsomer/react/banner";
3
4import type { PostFields } from "~/lib/editor/frontmatter";
5import { errorMessage } from "~/lib/error-message.mjs";
6
7export type Revision = {
8  sha: string;
9  message: string;
10  author: string;
11  date: string;
12};
13
14// Diffs load on demand: a post with fifty commits would otherwise pull fifty patches to show none.
15export function RevisionList({
16  slug,
17  revisions,
18  onRestore,
19}: {
20  slug: string;
21  revisions: Revision[];
22  onRestore: (fields: PostFields, sha: string) => void;
23}) {
24  const [openSha, setOpenSha] = useState<string | null>(null);
25  const [patches, setPatches] = useState<Record<string, string | null>>({});
26  /* Per sha: one shared flag let a finished load clear another's, and read an unloaded diff as "No diff". */
27  const [restoring, setRestoring] = useState<Record<string, boolean>>({});
28  const [error, setError] = useState<string | null>(null);
29  /* Announced inside the drawer: the drawer is modal, so the editor's own notice behind it is inert
30     and a load would otherwise finish in silence. */
31  const [status, setStatus] = useState("");
32
33  const toggle = async (sha: string) => {
34    setError(null);
35    if (openSha === sha) {
36      setOpenSha(null);
37      return;
38    }
39    setOpenSha(sha);
40    if (sha in patches) return;
41    const short = sha.slice(0, 7);
42    setStatus(`Loading the diff for ${short}.`);
43    try {
44      const response = await fetch(
45        `/admin/posts/${slug}/revisions?sha=${encodeURIComponent(sha)}`,
46      );
47      if (!response.ok) throw new Error(`Could not read that commit (${response.status}).`);
48      const body = (await response.json()) as { patch: string | null };
49      setPatches((prev) => ({ ...prev, [sha]: body.patch }));
50      setStatus(body.patch ? `Diff for ${short} loaded.` : `No diff recorded for ${short}.`);
51    } catch (cause) {
52      setStatus("");
53      setError(errorMessage(cause));
54      setOpenSha(null);
55    }
56  };
57
58  const restore = async (sha: string) => {
59    setError(null);
60    setRestoring((prev) => ({ ...prev, [sha]: true }));
61    const short = sha.slice(0, 7);
62    setStatus(`Loading ${short} into the editor.`);
63    try {
64      const response = await fetch(
65        `/admin/posts/${slug}/revisions?sha=${encodeURIComponent(sha)}&want=content`,
66      );
67      if (!response.ok) {
68        const detail = (await response.json().catch(() => ({}))) as { error?: string };
69        throw new Error(detail.error ?? `Could not read that revision (${response.status}).`);
70      }
71      const body = (await response.json()) as { fields: PostFields };
72      onRestore(body.fields, sha);
73      setStatus(`Loaded ${short} into the editor. Nothing is written until you save.`);
74    } catch (cause) {
75      setStatus("");
76      setError(errorMessage(cause));
77    } finally {
78      setRestoring((prev) => {
79        const next = { ...prev };
80        delete next[sha];
81        return next;
82      });
83    }
84  };
85
86  if (revisions.length === 0) {
87    return <p className="cap-muted">No commits found for this post.</p>;
88  }
89
90  return (
91    <>
92      <p className="cap-muted">
93        Restoring LOADS that version into the editor as unsaved changes. Nothing
94        is written until you save, and saving lands a new commit on top; history
95        is never rewritten.
96      </p>
97
98      {error ? <Alert tone="crit">{error}</Alert> : null}
99
100      <p className="cap-sr-only" role="status">
101        {status}
102      </p>
103
104      <ol className="cap-rows" role="list" aria-label="Versions">
105        {revisions.map((revision, index) => (
106          <Fragment key={revision.sha}>
107            <li className="cap-row">
108              <div className="cap-row-title">{revision.message}</div>
109              <p className="cap-row-detail">
110                <code className="cap-mono">{revision.sha.slice(0, 7)}</code>
111                {" · "}
112                {revision.author}
113                {" · "}
114                {/* UTC, so the server render and hydration agree on which day a commit landed. */}
115                {new Date(revision.date).toLocaleString("en-US", { timeZone: "UTC" })}
116                {index === 0 ? " · current" : ""}
117              </p>
118              <div className="cap-row-actions">
119                <button
120                  type="button"
121                  className="cap-btn"
122                  data-size="sm"
123                  data-variant="quiet"
124                  aria-expanded={openSha === revision.sha}
125                  aria-controls={openSha === revision.sha ? `diff-${revision.sha}` : undefined}
126                  onClick={() => void toggle(revision.sha)}
127                >
128                  {openSha === revision.sha ? "Hide diff" : "View diff"}
129                </button>
130
131                {/* Not for the newest commit: that revision is the editor's current content. */}
132                {index > 0 ? (
133                  <button
134                    type="button"
135                    className="cap-btn"
136                    data-size="sm"
137                    data-variant="quiet"
138                    aria-disabled={restoring[revision.sha] === true || undefined}
139                    onClick={() => {
140                      if (restoring[revision.sha] !== true) void restore(revision.sha);
141                    }}
142                  >
143                    {restoring[revision.sha] ? "Loading..." : "Load into editor"}
144                  </button>
145                ) : null}
146              </div>
147            </li>
148
149            {openSha === revision.sha ? (
150              <li id={`diff-${revision.sha}`}>
151                {!(revision.sha in patches) ? (
152                  <p className="cap-muted">Loading diff...</p>
153                ) : patches[revision.sha] ? (
154                  <DiffBlock
155                    patch={patches[revision.sha] ?? ""}
156                    label={`Diff for ${revision.sha.slice(0, 7)}`}
157                  />
158                ) : (
159                  <p className="cap-muted">No diff recorded for this commit.</p>
160                )}
161              </li>
162            ) : null}
163          </Fragment>
164        ))}
165      </ol>
166    </>
167  );
168}
169
170/**
171 * A unified patch, each line tagged for the add, delete and hunk colors. A focusable named region,
172 * because it scrolls both ways and a keyboard can only scroll what it can focus (2.1.1).
173 */
174export function DiffBlock({ patch, label = "Diff" }: { patch: string; label?: string }) {
175  return (
176    <pre className="history-diff" tabIndex={0} role="region" aria-label={label}>
177      {patch.split("\n").map((line, i) => (
178        <span key={i} data-diff={diffKind(line)}>
179          {line}
180          {"\n"}
181        </span>
182      ))}
183    </pre>
184  );
185}
186
187function diffKind(line: string) {
188  if (line.startsWith("+") && !line.startsWith("+++")) return "add";
189  if (line.startsWith("-") && !line.startsWith("---")) return "del";
190  if (line.startsWith("@@")) return "hunk";
191  return undefined;
192}