app/routes/manuscripts.tsx

Functions

Imports

It imports app/lib/context.ts, app/lib/google/drive.server.ts, app/lib/google/service-account.server.ts. No module of this repo imports it.

Source

1// Manuscripts (design section 5, "for finding research writing"): the Drive folder Dustin shares with
2// the service account, listed from Carrel's metadata index and searched through Drive's own full-text
3// search. Open goes to Google Docs; Carrel never edits a manuscript and never holds its text.
4
5import { Form, Link, useNavigation } from "react-router";
6import { Alert, Banner } from "capsomer/react/banner";
7import { Button } from "capsomer/react/button";
8import { Empty } from "capsomer/react/empty";
9import { Field } from "capsomer/react/field";
10import { Panel } from "capsomer/react/panel";
11import { Time } from "capsomer/react/time";
12import { PageHead } from "capsomer/react/page-head";
13
14import { getEnv, getViewer } from "~/lib/context";
15import { listManuscripts, manuscriptsFolder, refreshManuscripts, searchManuscripts } from "~/lib/google/drive.server";
16import { GoogleNotConnected, saConnection } from "~/lib/google/service-account.server";
17
18import type { Route } from "./+types/manuscripts";
19
20export function meta() {
21  return [{ title: "Manuscripts · Carrel" }];
22}
23
24export async function loader({ request, context }: Route.LoaderArgs) {
25  const env = getEnv(context);
26  const viewer = getViewer(context);
27  if (!viewer.isOwner) throw new Response("Not found", { status: 404 });
28  const q = new URL(request.url).searchParams.get("q")?.trim() ?? "";
29  const sa = saConnection(env);
30  const setup = sa.state !== "connected" ? sa.detail : manuscriptsFolder(env) ? null : "GOOGLE_MANUSCRIPTS_FOLDER_ID is not set to the shared folder's id.";
31  let error: string | null = null;
32  let files = await listManuscripts(env.DB, viewer);
33  let titlesOnly = false;
34  if (q && !setup) {
35    try {
36      const result = await searchManuscripts(env, viewer, q);
37      files = result.files;
38      titlesOnly = result.searched === "titles";
39    } catch (e) {
40      error = e instanceof GoogleNotConnected ? e.detail : `Drive did not answer the search: ${e instanceof Error ? e.message : String(e)}`;
41    }
42  }
43  return { q, files, setup, error, titlesOnly };
44}
45
46export async function action({ context }: Route.ActionArgs) {
47  const env = getEnv(context);
48  if (!getViewer(context).isOwner) throw new Response("Not found", { status: 404 });
49  try {
50    return { refreshed: await refreshManuscripts(env), error: null };
51  } catch (e) {
52    return { refreshed: null, error: e instanceof GoogleNotConnected ? e.detail : e instanceof Error ? e.message : String(e) };
53  }
54}
55
56const KIND: Record<string, string> = {
57  "application/vnd.google-apps.document": "Google Doc",
58  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "Word",
59  "application/pdf": "PDF",
60  "application/vnd.google-apps.spreadsheet": "Sheet",
61};
62
63export default function Manuscripts({ loaderData, actionData }: Route.ComponentProps) {
64  const { q, files, setup, error, titlesOnly } = loaderData;
65  const refreshing = useNavigation().state === "submitting";
66  return (
67    <div className="app-page">
68      <PageHead
69        title="Manuscripts"
70        lead="The shared Drive folder, read-only. Open goes to Google Docs; search runs in Drive, so the text stays there."
71        actions={
72          !setup ? (
73            <Form method="post">
74              <Button type="submit" pending={refreshing}>
75                {refreshing ? "Refreshing" : "Refresh from Drive"}
76              </Button>
77            </Form>
78          ) : null
79        }
80      />
81
82      {setup ? (
83        <Banner tone="warn" title="Not set up yet">
84          {setup}
85        </Banner>
86      ) : null}
87      {error || actionData?.error ? (
88        <Alert tone="crit">{error ?? actionData?.error}</Alert>
89      ) : actionData?.refreshed ? (
90        <Banner tone="ok">
91          {actionData.refreshed.files} files in {actionData.refreshed.folders} folders, {actionData.refreshed.removed} gone
92          {actionData.refreshed.more ? "; more folders on the next refresh" : ""}.
93        </Banner>
94      ) : null}
95      {titlesOnly ? <Banner tone="info">Drive would not search the text with the service account's metadata-only access, so these are title matches.</Banner> : null}
96
97      <Panel title="Manuscripts" count={files.length} src="Carrel's index of the Drive folder" flush>
98        <div className="cap-panel-pad">
99          <Form method="get" role="search" aria-label="Search manuscripts" className="app-filters">
100            <Field label="Search the text">
101              <input className="cap-input" type="search" name="q" defaultValue={q} placeholder="Words in a manuscript" />
102            </Field>
103            <div className="app-actions">
104              <Button type="submit" variant="primary">
105                Search
106              </Button>
107              {q ? (
108                <Link to="." className="cap-btn">
109                  Clear
110                </Link>
111              ) : null}
112            </div>
113          </Form>
114        </div>
115        {files.length === 0 ? (
116          <Empty kind={q ? "no-match" : "nothing-yet"} flush title={q ? "No manuscript matches" : "No manuscripts in the index yet"} action={q ? <Link to="." className="cap-btn">Clear the search</Link> : undefined}>
117            {q ? "Try other words, or fewer of them." : "Refresh from Drive to read the shared folder."}
118          </Empty>
119        ) : (
120          <div className="cap-table-wrap" role="region" aria-labelledby="manuscripts-caption" tabIndex={0}>
121            <table className="cap-table">
122              <caption id="manuscripts-caption" className="cap-sr-only">
123                Manuscripts
124              </caption>
125              <thead>
126                <tr>
127                  <th scope="col">Title</th>
128                  <th scope="col" data-drop="1">People</th>
129                  <th scope="col">Changed</th>
130                </tr>
131              </thead>
132              <tbody>
133                {files.map((f) => (
134                  <tr key={f.fileId}>
135                    <th scope="row">
136                      <a className="cap-table-open" href={f.webViewLink} target="_blank" rel="noreferrer">
137                        {f.name}
138                        <span className="cap-sr-only"> (opens in a new tab)</span>
139                      </a>
140                      <span className="cap-table-aside">
141                        {KIND[f.mimeType] ?? f.mimeType}
142                        {f.folder ? ` · ${f.folder}` : ""}
143                      </span>
144                    </th>
145                    <td data-drop="1">{f.people.join(", ")}</td>
146                    <td>{f.modifiedTime ? <Time at={f.modifiedTime} /> : null}</td>
147                  </tr>
148                ))}
149              </tbody>
150            </table>
151          </div>
152        )}
153      </Panel>
154    </div>
155  );
156}