app/routes/project.tsx

Functions

Imports

It imports app/components/project-tabs.tsx, app/lib/content.server.ts, app/lib/context.ts, app/lib/index.server.ts, app/lib/kind-words.ts, app/lib/projects.server.ts, app/lib/roles.ts, app/lib/sites.server.ts, app/lib/waiting.server.ts. No module of this repo imports it.

Source

1// The one view for a site: every post the site reports, filtered by status and kind, searched with
2// FTS5 over title and body. The list is Carrel's index; Refresh asks the site again.
3
4import { ContentStatus } from "@dustinedwards/site-api";
5import { useEffect, useRef, useState } from "react";
6import { Form, Link, useNavigation, useRevalidator } from "react-router";
7import { Alert, Banner } from "capsomer/react/banner";
8import { BulkBar } from "capsomer/react/bulk-bar";
9import { Button } from "capsomer/react/button";
10import { Empty } from "capsomer/react/empty";
11import { Field } from "capsomer/react/field";
12import { Panel } from "capsomer/react/panel";
13import { Select } from "capsomer/react/select";
14import { Pill, Status } from "capsomer/react/status";
15import { Time } from "capsomer/react/time";
16import { PageHead } from "capsomer/react/page-head";
17
18import { ProjectTabs } from "~/components/project-tabs";
19
20import { getEnv, getViewer } from "~/lib/context";
21import { contentDeleteOffered } from "~/lib/content.server";
22import { kindsIn, refreshIndex, searchItems } from "~/lib/index.server";
23import { kindPlural } from "~/lib/kind-words";
24import { requireSiteProject } from "~/lib/projects.server";
25import { can } from "~/lib/roles";
26import { siteConnection, siteEntry } from "~/lib/sites.server";
27import { waitingWork, withWaitingWork } from "~/lib/waiting.server";
28
29import type { Route } from "./+types/project";
30
31export function meta({ loaderData: data }: Route.MetaArgs) {
32  return [{ title: data ? `${data.project.name} · Carrel` : "Carrel" }];
33}
34
35export async function loader({ params, request, context }: Route.LoaderArgs) {
36  const env = getEnv(context);
37  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
38  const url = new URL(request.url);
39  const status = ContentStatus.safeParse(url.searchParams.get("status"));
40  const filters = {
41    q: url.searchParams.get("q")?.trim() || undefined,
42    status: status.success ? status.data : undefined,
43    kind: url.searchParams.get("kind")?.trim() || undefined,
44  };
45  const viewer = getViewer(context);
46  const [indexed, kinds, waiting] = await Promise.all([
47    searchItems(env.DB, project.id, filters),
48    kindsIn(env.DB, project.id),
49    waitingWork(env.DB, project, viewer),
50  ]);
51  const items = withWaitingWork(indexed, waiting, filters);
52  const connection = siteConnection(env, project.site);
53  // Delete is the Owner's, and a site may not offer it. The Owner is told which, and why, beside the actions.
54  const canDelete = can(project.role, "delete_content");
55  const deleteSupport = canDelete && connection.state === "connected" ? await contentDeleteOffered(env, project) : null;
56  return {
57    canDelete,
58    deleteOffered: deleteSupport?.offered === true,
59    deleteReason: deleteSupport && !deleteSupport.offered ? deleteSupport.reason : null,
60    project: { slug: project.slug, name: project.name, site: siteEntry(project.site).name, mentions: can(project.role, "read_mentions") },
61    canEdit: can(project.role, "edit"),
62    canCreate: can(project.role, "edit") && siteEntry(project.site).newSource !== undefined,
63    connected: connection.state === "connected",
64    connectionDetail: connection.state === "connected" ? null : connection.detail,
65    filters,
66    kinds,
67    items,
68  };
69}
70
71export async function action({ params, request, context }: Route.ActionArgs) {
72  const env = getEnv(context);
73  const project = await requireSiteProject(env.DB, getViewer(context), params.project, "read");
74  const form = await request.formData();
75  if (form.get("intent") !== "refresh") throw new Response("Bad request", { status: 400 });
76  try {
77    const result = await refreshIndex(env, { id: project.id, site: project.site });
78    return { refreshed: result, error: null };
79  } catch (error) {
80    return { refreshed: null, error: error instanceof Error ? error.message : String(error) };
81  }
82}
83
84function when(iso: string | null): string {
85  if (!iso) return "";
86  const date = new Date(iso);
87  return Number.isNaN(date.getTime()) ? iso : date.toISOString().slice(0, 10);
88}
89
90type BulkOutcome = { id: string; title: string; ok: boolean; message: string; copyId?: string };
91type BulkOp = "tag-add" | "tag-remove" | "duplicate" | "delete";
92
93const DONE = "Done. The result for each post is listed below the table.";
94
95export default function Project({ loaderData, actionData }: Route.ComponentProps) {
96  const { project, canEdit, canCreate, canDelete, deleteOffered, deleteReason, connected, connectionDetail, filters, kinds, items } = loaderData;
97  const navigation = useNavigation();
98  const revalidator = useRevalidator();
99  // The selection is by post id; a post no longer listed (a filter, a delete) drops out of it.
100  const [selected, setSelected] = useState<string[]>([]);
101  const [tag, setTag] = useState("");
102  const [result, setResult] = useState<{ what: string; outcomes: BulkOutcome[] } | null>(null);
103  const resultRef = useRef<HTMLElement>(null);
104  // Only a post the site holds can be acted on; one that exists only in Carrel (an AI draft for a new post) cannot.
105  const selectable = items.filter((i) => !i.isNew);
106  const chosen = selectable.filter((i) => selected.includes(i.itemId));
107  useEffect(() => {
108    if (!result) return;
109    const el = resultRef.current;
110    if (el) {
111      el.tabIndex = -1;
112      el.focus();
113    }
114  }, [result]);
115
116  const run = (op: BulkOp, what: string) => async (picked: readonly { id: string; label: string }[]) => {
117    if ((op === "tag-add" || op === "tag-remove") && tag.trim() === "") throw new Error("Type a tag first.");
118    const form = new FormData();
119    form.set("op", op);
120    if (op === "tag-add" || op === "tag-remove") form.set("tag", tag);
121    for (const p of picked) form.append("id", p.id);
122    const response = await fetch(`/p/${encodeURIComponent(project.slug)}/bulk`, { method: "POST", body: form, headers: { accept: "application/json" } });
123    const body = (await response.json().catch(() => null)) as { results?: BulkOutcome[]; error?: string } | null;
124    if (!response.ok || !body?.results) throw new Error(body?.error ?? `The server answered ${response.status}.`);
125    setResult({ what, outcomes: body.results });
126    void revalidator.revalidate();
127  };
128  const refreshing = navigation.state !== "idle" && navigation.formData?.get("intent") === "refresh";
129  const filtered = Boolean(filters.q || filters.status || filters.kind);
130
131  return (
132    <div className="app-page">
133      <PageHead
134        title={project.name}
135        lead={`Everything on ${project.site}, from Carrel's index of the site.`}
136        actions={
137          <>
138            {connected ? (
139              <Form method="post">
140                <Button type="submit" name="intent" value="refresh" pending={refreshing}>
141                  {refreshing ? "Refreshing" : "Refresh from the site"}
142                </Button>
143              </Form>
144            ) : null}
145            {canCreate && connected ? (
146              <Link to="new" className="cap-btn" data-variant="primary">
147                New post
148              </Link>
149            ) : null}
150          </>
151        }
152      />
153
154      <ProjectTabs slug={project.slug} current="posts" mentions={project.mentions} />
155
156      {!connected ? (
157        <Banner tone="warn" title="This site is not connected yet">
158          {connectionDetail} Posts appear here once the site's key is set.
159        </Banner>
160      ) : null}
161
162      {actionData?.error ? (
163        <Alert tone="crit">The site could not be read: {actionData.error}</Alert>
164      ) : actionData?.refreshed ? (
165        <Banner tone="ok">
166          {actionData.refreshed.listed} posts listed, {actionData.refreshed.fetched} read in full
167          {actionData.refreshed.pending > 0 ? `, ${actionData.refreshed.pending} more on the next refresh` : ""}.
168        </Banner>
169      ) : null}
170
171      {result ? (
172        <Panel
173          title="Result"
174          id="bulk-result"
175          ref={resultRef}
176          src={`${result.what}: ${result.outcomes.filter((o) => o.ok).length} of ${result.outcomes.length} done`}
177          actions={
178            <Button size="sm" onClick={() => setResult(null)}>
179              Clear this result
180            </Button>
181          }
182        >
183          <ul className="app-flags" aria-label="Result for each post">
184            {result.outcomes.map((o) => (
185              <li key={o.id}>
186                {o.ok ? <Status tone="ok">Done</Status> : <Status tone="crit">Left as it was</Status>}
187                <span>
188                  <strong>{o.title}</strong> <span className="cap-mono cap-muted">{o.id}</span>
189                  <br />
190                  {o.message}
191                  {o.copyId ? (
192                    <>
193                      {" "}
194                      <Link to={`e/${encodeURIComponent(o.copyId)}`}>Open the copy</Link>
195                    </>
196                  ) : null}
197                </span>
198              </li>
199            ))}
200          </ul>
201        </Panel>
202      ) : null}
203
204      <Panel title="Posts" count={items.length} src={`Carrel's index of ${project.site}`} flush>
205        <div className="cap-panel-pad">
206          <Form method="get" className="app-filters" role="search" aria-label="Filter posts">
207            <Field label="Search">
208              <input className="cap-input" type="search" name="q" defaultValue={filters.q ?? ""} placeholder="Words in the title or text" />
209            </Field>
210            <Field label="Status">
211              <Select
212                name="status"
213                defaultValue={filters.status ?? ""}
214                options={[
215                  { value: "", label: "Any" },
216                  { value: "draft", label: "Draft" },
217                  { value: "scheduled", label: "Scheduled" },
218                  { value: "published", label: "Published" },
219                ]}
220              />
221            </Field>
222            {kinds.length > 1 ? (
223              <Field label="Kind">
224                <Select name="kind" defaultValue={filters.kind ?? ""} options={[{ value: "", label: "Any" }, ...kinds.map((k) => ({ value: k, label: k }))]} />
225              </Field>
226            ) : null}
227            <div className="app-actions">
228              <Button type="submit" variant="primary">
229                Filter
230              </Button>
231              {filtered ? (
232                <Link to="." className="cap-btn">
233                  Clear
234                </Link>
235              ) : null}
236            </div>
237          </Form>
238        </div>
239
240        {items.length === 0 ? (
241          <Empty kind={filtered ? "no-match" : "nothing-yet"} flush title={filtered ? `No ${filters.kind ? kindPlural(filters.kind).toLowerCase() : "items"} match` : "Nothing in the index yet"} action={filtered ? <Link to="." className="cap-btn">Clear the filter</Link> : undefined}>
242            {filtered ? "Nothing on this site fits the search and filters above." : "Refresh from the site to read what it has."}
243          </Empty>
244        ) : (
245          <div className="cap-table-wrap" role="region" aria-labelledby="posts-caption" tabIndex={0}>
246            <table className="cap-table">
247              <caption id="posts-caption" className="cap-sr-only">
248                {filters.kind ? kindPlural(filters.kind) : kinds.length > 1 ? "Everything" : "Posts"} on {project.site}
249              </caption>
250              <thead>
251                <tr>
252                  {canEdit ? (
253                    <th scope="col">
254                      <span className="cap-sr-only">Select</span>
255                    </th>
256                  ) : null}
257                  <th scope="col">Title</th>
258                  {kinds.length > 1 ? <th scope="col">Kind</th> : null}
259                  <th scope="col">Status</th>
260                  <th scope="col">Updated</th>
261                </tr>
262              </thead>
263              <tbody>
264                {items.map((item) => (
265                  <tr key={item.itemId} data-state={selected.includes(item.itemId) ? "selected" : undefined}>
266                    {canEdit ? (
267                      <td>
268                        <label className="cap-check">
269                          <input
270                            type="checkbox"
271                            checked={selected.includes(item.itemId)}
272                            disabled={item.isNew}
273                            onChange={(event) => setSelected((now) => (event.target.checked ? [...now, item.itemId] : now.filter((id) => id !== item.itemId)))}
274                          />
275                          <span className="cap-sr-only">
276                            Select {item.title || item.itemId}
277                            {item.isNew ? " (only in Carrel, so it cannot be acted on in bulk)" : ""}
278                          </span>
279                        </label>
280                      </td>
281                    ) : null}
282                    <th scope="row">
283                      <Link className="cap-table-open" to={`e/${encodeURIComponent(item.itemId)}`}>
284                        {item.title || item.itemId}
285                      </Link>
286                      <span className="cap-table-aside">{item.path ?? item.itemId}</span>
287                    </th>
288                    {kinds.length > 1 ? <td>{item.kind}</td> : null}
289                    <td>
290                      {item.status === "published" ? (
291                        <Pill tone="ok">Published</Pill>
292                      ) : item.status === "scheduled" ? (
293                        <Pill tone="info">Scheduled{item.publishAt ? ` ${when(item.publishAt)}` : ""}</Pill>
294                      ) : (
295                        <Pill variant="secondary">{item.isNew ? "New draft" : "Draft"}</Pill>
296                      )}
297                      {item.aiDrafts > 0 ? (
298                        <Pill tone="info">
299                          {item.aiDrafts === 1 ? "1 AI draft waiting" : `${item.aiDrafts} AI drafts waiting`}
300                        </Pill>
301                      ) : null}
302                    </td>
303                    <td>{item.updatedAt ? <Time at={item.updatedAt} /> : null}</td>
304                  </tr>
305                ))}
306              </tbody>
307            </table>
308          </div>
309        )}
310      </Panel>
311
312      {canEdit ? (
313        <BulkBar
314          items={chosen.map((i) => ({ id: i.itemId, label: `${i.title || i.itemId} (${i.itemId})` }))}
315          total={selectable.length}
316          onSelectAll={() => setSelected(selectable.map((i) => i.itemId))}
317          onClear={() => setSelected([])}
318          actions={[
319            { id: "tag-add", label: "Add tag", said: DONE, run: run("tag-add", "Add tag") },
320            { id: "tag-remove", label: "Remove tag", said: DONE, run: run("tag-remove", "Remove tag") },
321            { id: "duplicate", label: "Duplicate", said: DONE, run: run("duplicate", "Duplicate") },
322            ...(canDelete && deleteOffered
323              ? [
324                  {
325                    id: "delete",
326                    label: "Delete",
327                    destructive: true,
328                    confirmTitle: "Delete {n} post{s} from the site?",
329                    confirmLead: `Each post below is removed from ${project.site}. Carrel cannot bring one back; the site's own history may still hold its text. Your working drafts of them stay in Carrel.`,
330                    confirmAction: "Delete {n} post{s}",
331                    said: DONE,
332                    run: run("delete", "Delete"),
333                  },
334                ]
335              : []),
336          ]}
337        >
338          <span className="cap-bulk-field">
339            <label htmlFor="bulk-tag">Tag</label>
340            <input className="cap-input" id="bulk-tag" value={tag} onChange={(event) => setTag(event.target.value)} autoComplete="off" />
341          </span>
342          {canDelete && deleteReason ? <span className="cap-bulk-detail">Delete is not offered: {deleteReason}</span> : null}
343        </BulkBar>
344      ) : null}
345    </div>
346  );
347}