app/routes/admin.posts._index.tsx

Functions

Imports

It imports app/components/admin/posts-confirm-dialogs.tsx, app/components/admin/posts-filters.tsx, app/components/admin/posts-table.tsx, app/components/admin/posts-toolbar.tsx, app/db/index.ts, app/lib/admin-actor.server.ts, app/lib/admin/posts-actions.server.ts, app/lib/admin/posts-filters.ts, app/lib/context.ts, app/lib/destructive.mjs, app/lib/editor/delete-left.mjs, app/lib/error-message.mjs, app/lib/search/ask-guard.server.ts, app/lib/search/ask.server.ts, app/lib/timing.ts. No module of this repo imports it.

Source

1import { useEffect, useState } from "react";
2import { Form, Link, data, useNavigation } from "react-router";
3
4import { Alert, Banner } from "capsomer/react/banner";
5import { Button } from "capsomer/react/button";
6import { Empty } from "capsomer/react/empty";
7
8import { PageHead } from "capsomer/react/page-head";
9import { PostsConfirmDialogs } from "~/components/admin/posts-confirm-dialogs";
10import { PostsFilters } from "~/components/admin/posts-filters";
11import { PostsTable } from "~/components/admin/posts-table";
12import { PostsToolbar } from "~/components/admin/posts-toolbar";
13import { listAllPostsForAdmin, listAllPostTagsForAdmin } from "~/db";
14import { adminActorContext } from "~/lib/admin-actor.server";
15import { getEnv } from "~/lib/context";
16import { timed, timedLoader } from "~/lib/timing";
17import { CONFIRM_FIELD, confirmationSatisfied } from "~/lib/destructive.mjs";
18import {
19  askSyncConfirmCount,
20  bulkDeletePosts,
21  bulkTagPosts,
22  duplicatePost,
23  regeneratePosts,
24  resetAskBudgetAndReport,
25  syncAskIndex,
26  unpublishPost,
27} from "~/lib/admin/posts-actions.server";
28import { deleteLeftBehind } from "~/lib/editor/delete-left.mjs";
29import { FILTER_KEYS, postsHref, readFilters } from "~/lib/admin/posts-filters";
30import { askAvailable, askStatusContext } from "~/lib/search/ask.server";
31import { readAskBudget } from "~/lib/search/ask-guard.server";
32import type { Route } from "./+types/admin.posts._index";
33import { errorMessage } from "~/lib/error-message.mjs";
34
35export function meta() {
36  return [{ title: "Posts · Admin" }, { name: "robots", content: "noindex" }];
37}
38
39/**
40 * `scheduled` is derived, not a column: a published row whose `publish_at` is still ahead.
41 * Derived in the loader because it reads the clock.
42 */
43function statusOf(
44  status: string,
45  publishAt: Date | null,
46  now: number,
47): "published" | "scheduled" | "draft" {
48  if (status !== "published") return "draft";
49  if (publishAt && publishAt.getTime() > now) return "scheduled";
50  return "published";
51}
52
53/** Rounded up: a post live in 30 hours is "in 2 days", never a number that has already passed. */
54function daysUntil(publishAt: Date, now: number) {
55  return Math.max(1, Math.ceil((publishAt.getTime() - now) / 86_400_000));
56}
57
58export async function loader({ request, context }: Route.LoaderArgs) {
59  return timedLoader(context, async (timings) => {
60    const env = getEnv(context);
61    const filters = readFilters(new URL(request.url).searchParams);
62    const deleteLeft = deleteLeftBehind(new URL(request.url).searchParams);
63
64    const askPromise = timed(timings, "ask_status_uncached", () =>
65      context.get(askStatusContext)(),
66    );
67    const askOn = askAvailable(env);
68    /*
69     * The catch is attached at creation: a promise that rejects before it is awaited is an unhandled
70     * rejection. A failing budget read must not take the page down, and it renders as a failure.
71     */
72    const budgetPromise: Promise<
73      | { budget: Awaited<ReturnType<typeof readAskBudget>>; budgetError: null }
74      | { budget: null; budgetError: string | null }
75    > = askOn
76      ? timed(timings, "ask_budget_do", () => readAskBudget(env)).then(
77          (budget) => ({ budget, budgetError: null }),
78          (error: unknown) => {
79            console.error(JSON.stringify({ alert: "ask-budget-read-failed", detail: errorMessage(error) }));
80            return {
81              budget: null,
82              budgetError: errorMessage(error),
83            };
84          },
85        )
86      : Promise.resolve({ budget: null, budgetError: null });
87
88    const [rows, tagRows] = await timed(timings, "d1_admin_posts", () =>
89      Promise.all([listAllPostsForAdmin(env), listAllPostTagsForAdmin(env)]),
90    );
91
92    const tagsBySlug = new Map<string, string[]>();
93    for (const row of tagRows) {
94      const list = tagsBySlug.get(row.slug);
95      if (list) list.push(row.tag);
96      else tagsBySlug.set(row.slug, [row.tag]);
97    }
98
99    const now = Date.now();
100    const all = rows.map((post) => {
101      const state = statusOf(post.status, post.publishAt, now);
102      return {
103        ...post,
104        state,
105        tags: tagsBySlug.get(post.slug) ?? [],
106        // A number by the time the component sees it: rendering from a date reads the clock, and server
107        // and hydration would disagree near a day boundary.
108        scheduledInDays:
109          state === "scheduled" && post.publishAt ? daysUntil(post.publishAt, now) : null,
110      };
111    });
112
113    const needle = filters.q.toLowerCase();
114    const posts = all.filter((post) => {
115      if (filters.status && post.state !== filters.status) return false;
116      if (filters.tag && !post.tags.includes(filters.tag)) return false;
117      if (!needle) return true;
118      return (
119        post.title.toLowerCase().includes(needle) || post.slug.toLowerCase().includes(needle)
120      );
121    });
122
123    const filtered = Boolean(filters.q || filters.status || filters.tag);
124
125    // An admin page may await the AI layer; no public route ever does.
126    const ask = await askPromise;
127
128    const { budget, budgetError } = await budgetPromise;
129
130    const payload = {
131      posts,
132      /* With Ask on, a null `ask` is a failed status read, never "up to date". */
133      askOn,
134      /** What a delete from the editor left behind, when it redirected here. */
135      deleteLeft,
136      ask,
137      budget,
138      budgetError,
139      filters,
140      filtered,
141      total: all.length,
142      statusCounts: {
143        all: all.length,
144        published: all.filter((post) => post.state === "published").length,
145        draft: all.filter((post) => post.state === "draft").length,
146        scheduled: all.filter((post) => post.state === "scheduled").length,
147      },
148      tagOptions: [...new Set(tagRows.map((row) => row.tag))].sort(),
149    };
150
151    return data(payload);
152  });
153}
154
155/*
156 * The dispatch stays here and each intent's work is in lib/admin/posts-actions.server.ts. The two
157 * destructive intents check the typed confirmation in their own branch, where check:destructive
158 * reads it, before the handler runs.
159 */
160export async function action({ request, context }: Route.ActionArgs) {
161  const form = await request.formData();
162  const env = getEnv(context);
163  const intent = form.get("intent");
164  /* Required by `savePost` and `deletePost` rather than defaulting to the most privileged principal. */
165  const actor = context.get(adminActorContext);
166
167  if (intent === "regenerate") return regeneratePosts(env);
168
169  // Separate from Regenerate: D1 search must not be held hostage to the AI index, and the AI index
170  // must never be repaired by touching D1.
171  if (intent === "sync-ask") {
172    if (!askAvailable(env)) {
173      return { message: "Ask is not enabled: no AI Search binding.", failed: true as const };
174    }
175    /*
176     * Checked here. "Sync" reads as additive and is not: `pruneAskCorpus` deletes every record this
177     * run did not upload. The count is 1 because how many it removes cannot be known first.
178     */
179    const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
180
181    if (!confirmationSatisfied(typed, 1)) {
182      return { confirmSyncAsk: await askSyncConfirmCount(env) };
183    }
184
185    return syncAskIndex(env);
186  }
187
188  if (intent === "duplicate") return duplicatePost(env, form, actor);
189
190  if (intent === "unpublish") return unpublishPost(env, form, actor);
191
192  /*
193   * Each iterates the per-post writer, so every gate on one post guards all. `expectedHeadSha` is
194   * omitted because each commit advances head.
195   */
196  if (
197    intent === "bulk-delete" ||
198    intent === "bulk-add-tag" ||
199    intent === "bulk-remove-tag"
200  ) {
201    const slugs = form.getAll("slug").map(String).filter(Boolean);
202    if (slugs.length === 0) return { message: "Nothing selected.", failed: true as const };
203
204    if (intent === "bulk-delete") {
205      /*
206       * Enforced here, not only in the UI: with scripting off an `onClick` never runs. The count comes
207       * from this request's slugs, never the form, so a stale page cannot authorize a different-size delete.
208       */
209      const typed = String(form.get(CONFIRM_FIELD) ?? "").trim();
210      if (!confirmationSatisfied(typed, slugs.length)) {
211        return {
212          confirmDelete: { slugs, count: slugs.length, typed },
213          message:
214            `Nothing was deleted. ${slugs.length} post(s) are selected and the ` +
215            `confirmation read ${typed || "(blank)"}. Type the count exactly to confirm.`,
216        };
217      }
218      return bulkDeletePosts(env, slugs, actor);
219    }
220
221    return bulkTagPosts(env, form, slugs, intent, actor);
222  }
223
224  if (intent === "reset-ask-budget") return resetAskBudgetAndReport(env);
225
226  return data(
227    {
228      message: `Nothing was done: ${String(intent ?? "(none)")} is not an action this page knows.`,
229      failed: true as const,
230    },
231    { status: 400 },
232  );
233}
234
235export default function AdminPosts({
236  loaderData,
237  actionData,
238}: Route.ComponentProps) {
239  const {
240    posts,
241    askOn,
242    ask,
243    budget,
244    budgetError,
245    filters,
246    filtered,
247    total,
248    statusCounts,
249    tagOptions,
250  } = loaderData;
251  const scheduledTotal = statusCounts.scheduled;
252  const askUnread = askOn && !ask;
253  /* Narrowed by key: the 400 answer carries only `message`, so the union no longer has these on every arm. */
254  const confirmSyncAsk =
255    actionData && "confirmSyncAsk" in actionData ? actionData.confirmSyncAsk : undefined;
256  const confirmDelete =
257    actionData && "confirmDelete" in actionData ? actionData.confirmDelete : undefined;
258  const message = actionData && "message" in actionData ? actionData.message : undefined;
259  const failed = actionData && "failed" in actionData ? actionData.failed === true : false;
260
261  const navigation = useNavigation();
262  const pending = navigation.state === "loading" && navigation.location != null;
263  const askDrifted = ask ? ask.missing.length > 0 || ask.stale.length > 0 : false;
264
265  /* Keyed by slug, not row index, so a re-render or filter change cannot re-point it at another post. */
266  const [selected, setSelected] = useState<string[]>([]);
267  const visible = posts.map((post) => post.slug);
268  const chosen = selected.filter((slug) => visible.includes(slug));
269  const allShown = chosen.length > 0 && chosen.length === visible.length;
270
271  const toggle = (slug: string) =>
272    setSelected((prev) =>
273      prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug],
274    );
275
276  const cancelHref = postsHref(filters);
277
278  const [hydrated, setHydrated] = useState(false);
279  useEffect(() => setHydrated(true), []);
280
281  const askedFor = [
282    filters.q ? `"${filters.q}"` : null,
283    filters.status ? `status ${filters.status}` : null,
284    filters.tag ? `tag ${filters.tag}` : null,
285  ].filter(Boolean);
286
287  return (
288    <div className="app-page">
289      <PageHead
290        title="Posts"
291        lead={
292          `${statusCounts.all} post${statusCounts.all === 1 ? "" : "s"}, ` +
293          `${statusCounts.published} published and ${statusCounts.draft} draft(s).` +
294          (askDrifted && ask
295            ? ` ${ask.missing.length + ask.stale.length} of them have changed since search last read them.`
296            : askUnread
297              ? " The search index status could not be read, so whether search is up to date is unknown."
298              : ask
299                ? " Search is up to date with all of them."
300                : "")
301        }
302        actions={<PostsToolbar />}
303      />
304
305      <PostsFilters
306        filters={filters}
307        filtered={filtered}
308        statusCounts={statusCounts}
309        tagOptions={tagOptions}
310      />
311
312      {scheduledTotal > 0 ? (
313        <Banner tone="info">
314          {scheduledTotal} post{scheduledTotal === 1 ? " is" : "s are"} scheduled and not yet
315          public. <Link to={`/admin/posts?${FILTER_KEYS.status}=scheduled`}>Show the queue</Link>
316        </Banner>
317      ) : null}
318
319      {loaderData.deleteLeft ? (
320        <Banner tone="neutral">
321          {`Deleted "${loaderData.deleteLeft.slug}". ${loaderData.deleteLeft.problems.join(" ")}`}
322        </Banner>
323      ) : null}
324
325      {/*
326        A live announcement, unlike the drift region: it reports what the submit just did. The
327        status region is always in the DOM, because a region inserted already holding its text is
328        often not read; a failure is an alert, which is read on insertion.
329      */}
330      <div role="status">{message && !failed ? <Banner tone="ok">{message}</Banner> : null}</div>
331      {message && failed ? <Alert tone="crit">{message}</Alert> : null}
332
333      <PostsConfirmDialogs
334        confirmSyncAsk={confirmSyncAsk}
335        confirmDelete={confirmDelete}
336        cancelHref={cancelHref}
337      />
338
339      {/* Surfaced here: a save can succeed while its Ask sync fails, and then it redirects. */}
340      {askDrifted && ask ? (
341        /* A standing condition, so a banner and never an alert. */
342        <Banner
343          tone="warn"
344          title="Search is answering from older text"
345          actions={
346            <Form method="post">
347              <Button type="submit" name="intent" value="sync-ask">
348                Rebuild the answer index
349              </Button>
350            </Form>
351          }
352        >
353          {`${ask.missing.length} post(s) are missing from the answer index and ` +
354            `${ask.stale.length} record(s) in it no longer match the site, so an ` +
355            `answer may quote text that has changed.`}
356        </Banner>
357      ) : null}
358
359      {posts.length === 0 ? (
360        filtered ? (
361          <Empty
362            kind="no-match"
363            action={
364              <Link to="/admin/posts" className="cap-btn">
365                Clear filters
366              </Link>
367            }
368          >
369            No posts match {askedFor.join(", ")}. Searched {total} post
370            {total === 1 ? "" : "s"} by title and slug.
371          </Empty>
372        ) : (
373          <Empty kind="nothing-yet">No posts yet.</Empty>
374        )
375      ) : (
376        <PostsTable
377          posts={posts}
378          visible={visible}
379          chosen={chosen}
380          allShown={allShown}
381          setSelected={setSelected}
382          toggle={toggle}
383          hydrated={hydrated}
384          pending={pending}
385          filtered={filtered}
386          total={total}
387          tagOptions={tagOptions}
388          askOn={askOn}
389          ask={ask}
390          askUnread={askUnread}
391          budget={budget}
392          budgetError={budgetError}
393        />
394      )}
395    </div>
396  );
397}