app/routes/admin.posts.$slug.edit.tsx

Functions

Imports

It imports app/components/admin/confirm-dialog.tsx, app/components/admin/post-editor.tsx, app/components/admin/preview-links.tsx, app/lib/admin-actor.server.ts, app/lib/content/slug.mjs, app/lib/context.ts, app/lib/destructive.mjs, app/lib/editor/action.server.ts, app/lib/editor/delete-left.mjs, app/lib/editor/feedback.ts, app/lib/editor/frontmatter.ts, app/lib/editor/github.server.ts, app/lib/editor/head.server.ts, app/lib/editor/link-targets.server.ts, app/lib/editor/preview-link-action.server.ts, app/lib/editor/publish.server.ts, app/lib/error-message.mjs, app/lib/preview-links.server.ts, app/lib/preview-token.mjs, app/lib/timing.ts. No module of this repo imports it.

Source

1import { Form, Link, data, redirect } from "react-router";
2
3import { timed, timingsContext } from "~/lib/timing";
4
5import { Alert } from "capsomer/react/banner";
6
7import { ConfirmDialog } from "~/components/admin/confirm-dialog";
8import { PostEditor } from "~/components/admin/post-editor";
9import {
10  CREATE_FORM_ID,
11  PreviewLinks,
12  revokeFormId,
13  type PreviewLinkView,
14} from "~/components/admin/preview-links";
15import { adminActorContext, adminSessionContext } from "~/lib/admin-actor.server";
16import { getEnv } from "~/lib/context";
17import { listPreviewLinks } from "~/lib/preview-links.server";
18import { previewUrl } from "~/lib/preview-token.mjs";
19import { loadEditorOptions } from "~/lib/editor/link-targets.server";
20import { handleEditorAction } from "~/lib/editor/action.server";
21import { previewLinkAction } from "~/lib/editor/preview-link-action.server";
22import { CONFIRM_FIELD, confirmationSatisfied } from "~/lib/destructive.mjs";
23import { feedbackFromSearch, savedRedirectPath } from "~/lib/editor/feedback";
24import { parsePost } from "~/lib/editor/frontmatter";
25import { stateOf } from "capsomer/publish-transition";
26import { currentHead, deletePost, EditorError, GitHubError } from "~/lib/editor/publish.server";
27import { readHead } from "~/lib/editor/head.server";
28import { postPath } from "~/lib/content/slug.mjs";
29import { DELETE_LEFT_PARAM } from "~/lib/editor/delete-left.mjs";
30import { listCommitsForPath, readFile } from "~/lib/editor/github.server";
31import type { Route } from "./+types/admin.posts.$slug.edit";
32import { errorMessage } from "~/lib/error-message.mjs";
33
34/*
35 * A handle, not a loader field: the flag other readers use reflects what is saved, and the
36 * author is typing something that has not been.
37 */
38export const handle = { math: true };
39
40export function meta({ params }: Route.MetaArgs) {
41  return [{ title: `Edit ${params.slug} · Admin` }, { name: "robots", content: "noindex" }];
42}
43
44export async function loader({ params, request, context }: Route.LoaderArgs) {
45  const timings = context.get(timingsContext).timings;
46  const env = getEnv(context);
47  /* Each read below is non-fatal, so an outage cannot blank the editor, but its failure is shown, never an empty list. */
48  const settled = <T,>(what: string, read: Promise<T[]>) =>
49    read.then(
50      (value) => ({ value, error: null as string | null }),
51      (error: unknown) => {
52        console.error(JSON.stringify({ alert: "editor-read-failed", what, detail: errorMessage(error) }));
53        return { value: [] as T[], error: errorMessage(error) };
54      },
55    );
56
57  /* The reads below do not depend on the file, only the preview links do (they wait on the post's state), so they start
58     with it and run together: the page takes as long as the slowest GitHub call, not the sum of all of them. */
59  const filePromise = timed(timings, "gh_read_file", () => readFile(env, postPath(params.slug)));
60  const headPromise = timed(timings, "gh_head", () => readHead(env));
61  const optionsPromise = loadEditorOptions(env, timings);
62  const revisionsPromise = timed(timings, "gh_commits", () =>
63    settled("revisions", listCommitsForPath(env, postPath(params.slug))),
64  );
65  const file = await filePromise;
66  if (!file) {
67    /* The others have nothing to show for a missing post; let them finish rather than leave them floating. */
68    await Promise.allSettled([headPromise, optionsPromise, revisionsPromise]);
69    throw data("Not found", { status: 404 });
70  }
71
72  const fields = parsePost(file.content);
73  const state = stateOf(fields, Date.now());
74  const origin = new URL(request.url).origin;
75
76  const links =
77    state === "draft"
78      ? await timed(timings, "kv_preview_links", () =>
79          settled("preview links", listPreviewLinks(env, params.slug)),
80        )
81      : { value: [], error: null };
82
83  const [{ headSha, headError }, options, revisions] = await Promise.all([headPromise, optionsPromise, revisionsPromise]);
84
85  return {
86    fields,
87    headSha,
88    headError,
89    slug: params.slug,
90    saved: feedbackFromSearch(new URL(request.url).searchParams, params.slug),
91    // Derived here because `stateOf` reads the clock: recomputed in the component, a post scheduled
92    // seconds away would render one word on the server and hydrate another.
93    state,
94    previewLinks: links.value.map((link) => ({ ...link, url: previewUrl(origin, link.token) })),
95    previewLinksError: links.error,
96    // Only `first_published` in the committed file tells a brand-new draft from a withdrawn one.
97    everPublished: fields.firstPublished.trim() !== "",
98    tagOptions: options.tagOptions,
99    loadProblems: options.problems,
100    linkTargets: options.linkTargets,
101    revisions: revisions.value,
102    revisionsError: revisions.error,
103  };
104}
105
106export async function action({ request, params, context }: Route.ActionArgs) {
107  const env = getEnv(context);
108  const clone = request.clone();
109  const form = await clone.formData();
110
111  const intent = form.get("intent");
112
113  /* After a failed action the page keeps the head it was loaded with; a failed re-read is logged, not shown as a missing token. */
114  const headAfterProblem = () =>
115    currentHead(env).catch((error: unknown) => {
116      console.error(JSON.stringify({ alert: "editor-head-reread-failed", detail: errorMessage(error) }));
117      return String(form.get("headSha") ?? "");
118    });
119
120  if (intent === "preview-link" || intent === "revoke-preview-link") {
121    return previewLinkAction(env, {
122      intent,
123      slug: params.slug,
124      origin: new URL(request.url).origin,
125      form,
126      createdBy: () => context.get(adminSessionContext).user.email,
127      headAfterProblem,
128    });
129  }
130
131  if (intent === "delete") {
132    /*
133     * The confirmation is checked here, not in onSubmit: with scripting off the handler never runs.
134     * `expectedHeadSha` is concurrency, not consent.
135     */
136    const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
137    if (!confirmationSatisfied(typed, 1)) {
138      return { kind: "confirm-delete" as const, slug: params.slug };
139    }
140    /* Without the head the page was loaded at, a change made since could not be detected, so no delete. */
141    const expectedHeadSha = String(form.get("headSha") ?? "");
142    if (!expectedHeadSha) {
143      return {
144        kind: "problem" as const,
145        fields: undefined,
146        problem: {
147          message:
148            "Delete refused: this page has no repository head, so a change made since it loaded could not be detected. Reload and try again.",
149          conflict: false,
150          field: undefined,
151          line: undefined,
152        },
153        headSha: await headAfterProblem(),
154      };
155    }
156    try {
157      const { purged, askRemoval } = await deletePost(env, {
158        slug: params.slug,
159        expectedHeadSha,
160        actor: context.get(adminActorContext),
161      });
162      /* The delete landed, so it redirects; what it left behind travels to the list page to be said there. */
163      const left = new URLSearchParams();
164      if (askRemoval && !askRemoval.ok) left.append(DELETE_LEFT_PARAM, "ask");
165      if (purged === false) left.append(DELETE_LEFT_PARAM, "purge");
166      if (!left.has(DELETE_LEFT_PARAM)) return redirect("/admin/posts");
167      left.set("deleted", params.slug);
168      return redirect(`/admin/posts?${left}`);
169    } catch (error) {
170      const message =
171        error instanceof EditorError || error instanceof GitHubError
172          ? error.message
173          : String(error);
174      return {
175        kind: "problem" as const,
176        fields: undefined,
177        problem: {
178          message,
179          conflict: error instanceof GitHubError && error.conflict,
180          field: undefined,
181          line: undefined,
182        },
183        headSha: await headAfterProblem(),
184      };
185    }
186  }
187
188  const result = await handleEditorAction(env, request, context.get(adminActorContext));
189  if (result.kind === "saved") return redirect(savedRedirectPath(result));
190  return result;
191}
192
193export default function EditPost({ loaderData, actionData }: Route.ComponentProps) {
194  const problemData = actionData?.kind === "problem" ? actionData : null;
195  const previewData = actionData?.kind === "preview" ? actionData : null;
196  /*
197   * An unconfirmed first publication re-renders around the submitted body: the confirming submit
198   * posts this same form again, so it must carry what the author typed.
199   */
200  const confirmPublishData = actionData?.kind === "confirm-publish" ? actionData : null;
201  const fields =
202    problemData?.fields ?? previewData?.fields ?? confirmPublishData?.fields ?? loaderData.fields;
203  const headSha =
204    problemData?.headSha ??
205    previewData?.headSha ??
206    confirmPublishData?.headSha ??
207    loaderData.headSha;
208
209  const feedback =
210    actionData?.kind === "problem"
211      ? {
212          state: "failed" as const,
213          message: actionData.problem.message,
214          conflict: Boolean(actionData.problem.conflict),
215          field: actionData.problem.field,
216          line: actionData.problem.line,
217        }
218      : actionData
219        ? null
220        : loaderData.saved;
221
222  // A failed save's fields can disagree with the loader's; the transition must describe what is
223  // committed, so it stays the loader's.
224  const state = loaderData.state;
225
226  const previewLinkSlot =
227    state === "draft" ? (
228      <PreviewLinks
229        links={loaderData.previewLinks as PreviewLinkView[]}
230        error={loaderData.previewLinksError}
231        created={
232          actionData?.kind === "preview-link"
233            ? { url: actionData.url, expiresAt: actionData.expiresAt }
234            : null
235        }
236      />
237    ) : undefined;
238
239  return (
240    <>
241      <PostEditor
242        fields={fields}
243        isNew={false}
244        headSha={headSha}
245        headError={headSha ? null : loaderData.headError}
246        loadProblems={loaderData.loadProblems}
247        previewHtml={actionData?.kind === "preview" ? actionData.previewHtml : null}
248        feedback={feedback}
249        state={state}
250        everPublished={loaderData.everPublished}
251        tagOptions={loaderData.tagOptions}
252        linkTargets={loaderData.linkTargets}
253        revisions={loaderData.revisions}
254        awaitingPublishConfirmation={confirmPublishData !== null}
255        previewLinkSlot={previewLinkSlot}
256        historySlot={
257          <>
258            <p className="cap-muted">
259              Every save is a commit. Nothing is ever rewritten, and a restore
260              lands as a new commit on top.
261            </p>
262            {loaderData.revisionsError ? (
263              <Alert tone="warn">
264                The version list could not be read, so no revisions are shown: {loaderData.revisionsError}
265              </Alert>
266            ) : null}
267            <div>
268              <Link to={`/admin/posts/${loaderData.slug}/history`} className="cap-btn" data-size="sm">
269                Open version history
270              </Link>
271            </div>
272          </>
273        }
274        dangerSlot={
275          <>
276            <p className="cap-muted">
277              Removes content/posts/{loaderData.slug}.md, its entry in the
278              generated artifact, and its rows, in one commit.
279            </p>
280            {/* Associated by the `form` attribute: nested forms are invalid and the browser drops the inner one. */}
281            <div>
282              <button
283                type="submit"
284                form="delete-post"
285                name="intent"
286                value="delete"
287                className="cap-btn"
288                data-variant="danger"
289              >
290                Delete post
291              </button>
292            </div>
293          </>
294        }
295      />
296
297      {actionData?.kind === "confirm-delete" ? (
298        <ConfirmDialog
299          title={`Delete "${actionData.slug}"?`}
300          body={
301            <p>
302              This removes the file and its rows. It is recoverable only through
303              git.
304            </p>
305          }
306          requireTyped="1"
307          confirmLabel="Delete permanently"
308          cancelHref={`/admin/posts/${actionData.slug}/edit`}
309        >
310          <input type="hidden" name="intent" value="delete" />
311          <input type="hidden" name="headSha" value={headSha} />
312        </ConfirmDialog>
313      ) : null}
314
315      {/* Submits no confirmation, so the action answers with the typed one above, script or not. */}
316      <Form id="delete-post" method="post">
317        <input type="hidden" name="headSha" value={headSha} />
318      </Form>
319
320      {/* Outside the editing form: the drawer is a `<dialog>` inside it, and a form inside a form is dropped. */}
321      {state === "draft" ? (
322        <>
323          <Form id={CREATE_FORM_ID} method="post" />
324          {loaderData.previewLinks.map((link) => (
325            <Form
326              key={link.token}
327              id={revokeFormId(link.token)}
328              method="post"
329             
330            >
331              <input type="hidden" name="token" value={link.token} />
332            </Form>
333          ))}
334        </>
335      ) : null}
336    </>
337  );
338}