CodebaseForm

tcmts.registry.pages.CodebaseForm · #pb3au7tn · term · runs in the browser

uses useState

The codebase whose libraries are "Libraries I use", as the visitor gave it: a tcm serve URL (React Aria's Form and TextField, which says what's wrong with one the registry can't read), or none.

import { refresh } from "#codebase/tcmts/react";
import { codebaseHere } from "#codebase/tcmts/registry/session";
import { toasts } from "#codebase/tcmts/share";
import { useState } from "react";
import { Button, FieldError, Form, Input, Label, TextField } from "react-aria-components";

export function CodebaseForm({ url }: { url: string }) {
  const [value, setValue] = useState(url);
  const [problem, setProblem] = useState("");
  const [busy, setBusy] = useState(false);
  const use = async (u: string) => {
    setBusy(true);
    setProblem("");
    try {
      await codebaseHere(u);
      toasts.add(
        {
          title: u.trim() ? "Your codebase's libraries are in" : "Your codebase is forgotten",
          tone: "ok",
        },
        { timeout: 4000 },
      );
      refresh();
    } catch (e) {
      setProblem((e as Error).message);
    }
    setBusy(false);
  };
  return (
    <Form className="codebaseform" onSubmit={(e) => (e.preventDefault(), void use(value))}>
      <TextField
        className="textfield"
        name="codebase"
        type="url"
        value={value}
        onChange={(v) => (setValue(v), setProblem(""))}
        isInvalid={!!problem}
      >
        <Label>Your codebase</Label>
        <Input className="field" placeholder="https://tcm.example.dev" />
        <FieldError className="field-error">{problem}</FieldError>
      </TextField>
      <Button type="submit" className="btn primary" isPending={busy}>
        Use it
      </Button>
      {url && (
        <Button className="btn" isDisabled={busy} onPress={() => (setValue(""), void use(""))}>
          Forget it
        </Button>
      )}
    </Form>
  );
}

uses

used by