app/components/admin/use-draft-buffer.ts

Functions

Imports

It imports app/lib/editor/draft-buffer.ts, app/lib/editor/feedback.ts. Imported by app/components/admin/post-editor.tsx.

Source

1import { useCallback, useEffect, useRef, useState, type Dispatch, type SetStateAction } from "react";
2
3import {
4  bufferDiffers,
5  clearAllBuffersFor,
6  draftKey,
7  purgeLegacyBuffers,
8  readBuffer,
9  readForm,
10  writeBuffer,
11  type DraftBuffer,
12} from "~/lib/editor/draft-buffer";
13import type { EditorFeedback } from "~/lib/editor/feedback";
14
15// The label reads in whole minutes, so 30s lags by at most half a unit; a 1s tick would re-render sixty times per change.
16const BUFFER_AGE_TICK_MS = 30_000;
17
18/**
19 * The editor's browser-local crash net: the buffer write, the offer to restore an earlier session's
20 * buffer, its clearing once a save lands, and the clock its age label reads.
21 */
22export function useDraftBuffer({
23  formRef,
24  slug,
25  headSha,
26  isNew,
27  feedback,
28  dirty,
29  setDirty,
30  setRestoredFrom,
31}: {
32  formRef: React.RefObject<HTMLFormElement | null>;
33  /** The committed slug, empty for a new post. */
34  slug: string;
35  headSha: string;
36  isNew: boolean;
37  feedback: EditorFeedback | null | undefined;
38  dirty: boolean;
39  setDirty: Dispatch<SetStateAction<boolean>>;
40  setRestoredFrom: Dispatch<SetStateAction<string | null>>;
41}) {
42  const [savedAt, setSavedAt] = useState<string | null>(null);
43  const [ageNow, setAgeNow] = useState(() => Date.now());
44  // writeBuffer returns null both before it has run and when storage refuses, so the attempt is tracked separately.
45  const [bufferTried, setBufferTried] = useState(false);
46  const [offer, setOffer] = useState<DraftBuffer | null>(null);
47
48  const autosaveTimer = useRef<number>(0);
49  const storageKey = draftKey(slug, headSha);
50
51  // Never commits: a browser-local crash net. The save path is the only writer.
52  const persist = useCallback(() => {
53    const form = formRef.current;
54    if (!form) return;
55    setBufferTried(true);
56    setSavedAt(writeBuffer(storageKey, readForm(form)));
57  }, [storageKey, formRef]);
58
59  useEffect(() => {
60    purgeLegacyBuffers();
61  }, []);
62
63  // Restoring is never automatic: replacing committed content with older local text is the surprise this prevents.
64  useEffect(() => {
65    const form = formRef.current;
66    if (!form) return;
67    const stored = readBuffer(storageKey);
68    if (!stored) return;
69    if (!bufferDiffers(stored, readForm(form))) {
70      clearAllBuffersFor(slug);
71      return;
72    }
73    setOffer(stored);
74  }, [storageKey, slug, formRef]);
75
76  useEffect(() => {
77    if (!feedback || feedback.state === "failed") return;
78    clearAllBuffersFor(slug);
79    if (isNew) clearAllBuffersFor("");
80    setOffer(null);
81    setDirty(false);
82    setRestoredFrom(null);
83  }, [feedback, slug, isNew, setDirty, setRestoredFrom]);
84
85  useEffect(() => {
86    if (!dirty || !savedAt) return;
87    setAgeNow(Date.now());
88    const id = window.setInterval(() => setAgeNow(Date.now()), BUFFER_AGE_TICK_MS);
89    return () => window.clearInterval(id);
90  }, [dirty, savedAt]);
91
92  return { offer, setOffer, savedAt, ageNow, bufferTried, persist, autosaveTimer };
93}