app/routes/unpublish.tsx

Functions

Imports

It imports app/components/frame.tsx, app/lib/ai.server.ts, app/lib/content.server.ts, app/lib/context.ts, app/lib/projects.server.ts, app/lib/sites.server.ts. No module of this repo imports it.

Source

1// Where the email after an AI publish sends Dustin: the post, who published it, and one button that
2// returns it to draft. The link opens this page rather than unpublishing on its own, because a GET
3// that changed the site could be set off by anything that fetches links (a mail client's preview).
4
5import { Form, Link, useNavigation } from "react-router";
6import { Alert, Banner } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { Pill } from "capsomer/react/status";
9import { Time } from "capsomer/react/time";
10import { PageHead } from "capsomer/react/page-head";
11
12import { RouterLink } from "~/components/frame";
13
14import { lastAiPublication, publishedByLine } from "~/lib/ai.server";
15import { readDoc, writeToSite } from "~/lib/content.server";
16import { getEnv, getViewer } from "~/lib/context";
17import { requireSiteProject } from "~/lib/projects.server";
18import { siteEntry } from "~/lib/sites.server";
19
20import type { Route } from "./+types/unpublish";
21
22export function meta() {
23  return [{ title: "Unpublish · Carrel" }];
24}
25
26export async function loader({ params, context }: Route.LoaderArgs) {
27  const env = getEnv(context);
28  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "publish");
29  const doc = await readDoc(env, project, params.item);
30  if (!doc) throw new Response("Not found", { status: 404 });
31  const ai = await lastAiPublication(env.DB, project, params.item);
32  return {
33    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name },
34    item: { id: doc.id, title: doc.title || doc.id, status: doc.status, path: doc.path, version: doc.version },
35    publishedBy: ai ? { line: publishedByLine(ai.client), at: ai.publishedAt } : null,
36  };
37}
38
39export async function action({ params, context }: Route.ActionArgs) {
40  const env = getEnv(context);
41  const viewer = getViewer(context);
42  const project = await requireSiteProject(env.DB, viewer, params.project, "publish");
43  const doc = await readDoc(env, project, params.item);
44  if (!doc) throw new Response("Not found", { status: 404 });
45  if (doc.status === "draft") return { ok: true as const, already: true, message: "It is already a draft." };
46  const outcome = await writeToSite(env, project, viewer, params.item, { action: "unpublish", expectedVersion: doc.version });
47  return outcome.ok ? { ok: true as const, already: false, message: "Returned to draft. It is off the site." } : { ok: false as const, already: false, message: outcome.message };
48}
49
50export default function Unpublish({ loaderData, actionData }: Route.ComponentProps) {
51  const { project, item, publishedBy } = loaderData;
52  const done = actionData?.ok;
53  const busy = useNavigation().state !== "idle";
54  return (
55    <div className="app-page" data-narrow>
56      <PageHead
57        renderLink={RouterLink}
58        crumbs={[{ label: project.name, href: `/p/${project.slug}` }, { label: item.title }]}
59        title={item.title}
60        lead={
61          <>
62            {item.status === "published" ? <Pill tone="ok">Published</Pill> : item.status === "scheduled" ? <Pill tone="info">Scheduled</Pill> : <Pill variant="secondary">Draft</Pill>} on {project.site}
63            {item.path ? <span className="cap-mono"> {item.path}</span> : null}
64          </>
65        }
66      />
67      {publishedBy ? (
68        <Banner tone="info">
69          {publishedBy.line} <Time at={publishedBy.at} format="exact" />
70        </Banner>
71      ) : null}
72      {actionData ? actionData.ok ? <Banner tone="ok">{actionData.message}</Banner> : <Alert tone="crit">{actionData.message}</Alert> : null}
73      <div className="app-actions">
74        {!done && item.status !== "draft" ? (
75          <Form method="post">
76            <Button type="submit" variant="danger" pending={busy} autoFocus>
77              Unpublish now
78            </Button>
79          </Form>
80        ) : null}
81        <Link className="cap-btn" to={`/p/${project.slug}/e/${encodeURIComponent(item.id)}`}>
82          Open it in the editor
83        </Link>
84      </div>
85    </div>
86  );
87}