app/routes/book.new.tsx

Functions

Imports

It imports app/components/frame.tsx, app/lib/books.server.ts, app/lib/context.ts. No module of this repo imports it.

Source

1// A new book is a project whose folder in the writing repository is named here. Nothing is written to
2// Git until the first file is saved; the folder appears then.
3
4import { Form, redirect, useNavigation } from "react-router";
5import { Button } from "capsomer/react/button";
6import { Field } from "capsomer/react/field";
7import { Panel } from "capsomer/react/panel";
8import { PageHead } from "capsomer/react/page-head";
9
10import { RouterLink } from "~/components/frame";
11
12import { createBook } from "~/lib/books.server";
13import { getEnv, getViewer } from "~/lib/context";
14
15import type { Route } from "./+types/book.new";
16
17export function meta() {
18  return [{ title: "New book · Carrel" }];
19}
20
21export async function loader({ context }: Route.LoaderArgs) {
22  if (!getViewer(context).isOwner) throw new Response("Not found", { status: 404 });
23  return null;
24}
25
26export async function action({ request, context }: Route.ActionArgs) {
27  const form = await request.formData();
28  const result = await createBook(getEnv(context).DB, getViewer(context), {
29    name: String(form.get("name") ?? ""),
30    folder: String(form.get("folder") ?? "").trim(),
31  });
32  return result.ok ? redirect(`/b/${result.slug}`) : { error: result.error };
33}
34
35export default function NewBook({ actionData }: Route.ComponentProps) {
36  const busy = useNavigation().state !== "idle";
37  return (
38    <div className="app-page" data-narrow>
39      <PageHead renderLink={RouterLink} crumbs={[{ label: "Home", href: "/" }, { label: "New book" }]} title="New book" lead="A book is a folder in the writing repository. Nothing is written to Git until its first file is saved." />
40      <Panel title="The book">
41        <Form method="post" className="app-form">
42          <Field label="Name" required>
43            <input className="cap-input" name="name" required maxLength={120} autoComplete="off" />
44          </Field>
45          <Field
46            label="Folder in the writing repository"
47            required
48            help="Lower-case letters, digits and single hyphens, such as paluxy-portal. An existing folder is picked up at the first refresh."
49            error={actionData?.error}
50            announce
51          >
52            <input className="cap-input" name="folder" required pattern="[a-z0-9]+(-[a-z0-9]+)*" autoComplete="off" spellCheck={false} data-error-pattern-mismatch="Use lower-case letters, digits and single hyphens, such as paluxy-portal." />
53          </Field>
54          <div className="app-actions">
55            <Button type="submit" variant="primary" pending={busy}>
56              Create the book
57            </Button>
58          </div>
59        </Form>
60      </Panel>
61    </div>
62  );
63}