refactor(web): term/authority rows + pages adopt shared CRUD components (#64)

web/src/authorities/authorities-page.tsx

@@ -1,26 +1,16 @@
-import { useState, type FormEvent } from "react";
 import { NavLink, Navigate, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import type { components } from "../api/schema";
 import { useAuthorities, useCreateAuthority } from "../api/queries";
-import { LabelEditor } from "../components/label-editor";
+import { FilteredRecordList } from "../components/filtered-record-list";
-import { MutationError } from "../components/mutation-error";
+import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { PageTitle } from "@/components/ui/page-title";
-import { ListSkeleton } from "@/components/ui/skeletons";
 import { AuthorityRow } from "./authority-row";
-import { byLabel } from "../lib/sort";
-import { labelText } from "../lib/labels";
 import { focusRing } from "../lib/focus-ring";
 import { useDocumentTitle } from "../lib/use-document-title";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
 import { cn } from "@/lib/utils";
 
-type LabelInput = components["schemas"]["LabelInput"];
-
 const KINDS = ["person", "organisation", "place"] as const;
 
 export function AuthoritiesPage() {
@@ -34,36 +24,11 @@ export function AuthoritiesPage() {
   const { data: authorities, isLoading, isError } = useAuthorities(currentKind);
   const create = useCreateAuthority();
 
-  const [labels, setLabels] = useState<LabelInput[]>([]);
-  const [error, setError] = useState(false);
-  const [filter, setFilter] = useState("");
-  const [uri, setUri] = useState("");
-
   useDocumentTitle(t("nav.authorities"));
   useBreadcrumb([{ label: t("nav.authorities") }]);
 
   if (!isValidKind) return <Navigate to="/authorities/person" replace />;
 
-  const onCreate = (event: FormEvent) => {
-    event.preventDefault();
-
-    if (!labels.some((l) => l.label)) {
-      setError(true);
-      return;
-    }
-
-    setError(false);
-    create.mutate(
-      { kind: kind as string, external_uri: uri.trim() || null, labels },
-      {
-        onSuccess: () => {
-          setLabels([]);
-          setUri("");
-        },
-      },
-    );
-  };
-
   return (
     <div className="overflow-auto p-4">
       <PageTitle className="mb-3">{t("nav.authorities")}</PageTitle>
@@ -81,73 +46,24 @@ export function AuthoritiesPage() {
         ))}
       </nav>
 
-      <div className="mb-3">
+      <FilteredRecordList
-        <Input
+        records={authorities}
-          aria-label={t("common.filter")}
+        lang={lang}
-          placeholder={t("common.filter")}
+        isLoading={isLoading}
-          value={filter}
+        isError={isError}
-          onChange={(e) => setFilter(e.target.value)}
+        loadErrorText={t("authorities.loadError")}
+        emptyText={t("authorities.empty")}
+        renderRow={(a) => <AuthorityRow authority={a} kind={currentKind} lang={lang} />}
       />
-      </div>
 
-      {isLoading ? (
+      <LabelledRecordCreateForm
-        <ListSkeleton className="mb-4" rows={5} />
+        heading={`${t("authorities.new")} · ${t(`authorities.${currentKind}`)}`}
-      ) : (
+        submitLabel={t("authorities.create")}
-        (() => {
+        pending={create.isPending}
-          const q = filter.trim().toLowerCase();
+        error={create.error}
-          const rows = [...(authorities ?? [])]
+        onCreate={(labels, uri, reset) =>
-            .filter((a) => !q || labelText(a.labels, lang).toLowerCase().includes(q))
+          create.mutate({ kind: currentKind, external_uri: uri, labels }, { onSuccess: reset })}
-            .sort(byLabel(lang));
-
-          return (
-            <ul className="mb-4">
-              {isError && (
-                <li className="text-sm text-destructive">{t("authorities.loadError")}</li>
-              )}
-              {!isError && authorities?.length === 0 && (
-                <li className="text-sm text-muted-foreground">{t("authorities.empty")}</li>
-              )}
-              {!isError && authorities && authorities.length > 0 && rows.length === 0 && (
-                <li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
-              )}
-              {rows.map((a) => (
-                <AuthorityRow key={a.id} authority={a} kind={currentKind} lang={lang} />
-              ))}
-            </ul>
-          );
-        })()
-      )}
-
-      <form onSubmit={onCreate} className="space-y-2 border-t pt-3">
-        <div className="text-sm font-medium">
-          {t("authorities.new")} · {t(`authorities.${currentKind}`)}
-        </div>
-
-        <LabelEditor value={labels} onChange={setLabels} />
-
-        <div className="space-y-1">
-          <Label htmlFor="auth-create-uri">{t("labels.externalUri")}</Label>
-          <Input
-            id="auth-create-uri"
-            type="url"
-            placeholder={t("labels.uriPlaceholder")}
-            value={uri}
-            onChange={(e) => setUri(e.target.value)}
       />
     </div>
-
-        {error && (
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.required")}
-          </p>
-        )}
-
-        <MutationError error={create.error} />
-
-        <Button type="submit" size="sm" disabled={create.isPending}>
-          {t("authorities.create")}
-        </Button>
-      </form>
-    </div>
   );
 }

web/src/authorities/authority-row.tsx

@@ -1,90 +1,24 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
 import type { components } from "../api/schema";
 import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
-import { LabelEditor } from "../components/label-editor";
+import { LabelledRecordRow } from "../components/labelled-record-row";
-import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
-import { MutationError } from "../components/mutation-error";
-import { ExternalUriLink } from "../components/external-uri-link";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { labelText } from "../lib/labels";
 
 type AuthorityView = components["schemas"]["AuthorityView"];
-type LabelInput = components["schemas"]["LabelInput"];
 
 export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
-  const { t } = useTranslation();
+  const update = useUpdateAuthority();
-
+  const del = useDeleteAuthority();
-  const updateAuthority = useUpdateAuthority();
-  const deleteAuthority = useDeleteAuthority();
-
-  const [editing, setEditing] = useState(false);
-  const [labels, setLabels] = useState<LabelInput[]>(authority.labels as LabelInput[]);
-  const [uri, setUri] = useState(authority.external_uri ?? "");
-
-  if (editing) {
-    return (
-      <li className="space-y-2 border-b py-2">
-        <LabelEditor value={labels} onChange={setLabels} />
-        <div className="space-y-1">
-          <Label htmlFor={`auth-uri-${authority.id}`}>{t("labels.externalUri")}</Label>
-          <Input
-            id={`auth-uri-${authority.id}`}
-            type="url"
-            placeholder={t("labels.uriPlaceholder")}
-            value={uri}
-            onChange={(e) => setUri(e.target.value)}
-          />
-        </div>
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            size="sm"
-            disabled={updateAuthority.isPending}
-            onClick={() =>
-              updateAuthority.mutate(
-                { id: authority.id, kind, external_uri: uri.trim() || null, labels },
-                { onSuccess: () => setEditing(false) },
-              )
-            }
-          >
-            {t("actions.save")}
-          </Button>
-          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
-            {t("form.cancel")}
-          </Button>
-        </div>
-        <MutationError error={updateAuthority.error} />
-      </li>
-    );
-  }
 
   return (
-    <li className="flex items-center gap-2 border-b py-1 text-sm">
+    <LabelledRecordRow
-      <div className="flex-1">
+      record={{ ...authority, external_uri: authority.external_uri ?? null }}
-        <div>{labelText(authority.labels, lang)}</div>
+      lang={lang}
-        {authority.external_uri && <ExternalUriLink uri={authority.external_uri} />}
+      deleteConfirmKey="actions.confirmDeleteAuthority"
-      </div>
+      savePending={update.isPending}
-      <Button
+      saveError={update.error}
-        type="button"
+      onEditOpen={() => update.reset()}
-        variant="ghost"
+      onSave={(labels, uri, done) =>
-        size="sm"
+        update.mutate({ id: authority.id, kind, external_uri: uri, labels }, { onSuccess: done })}
-        onClick={() => {
+      onDelete={() => del.mutateAsync({ id: authority.id, kind })}
-          updateAuthority.reset();
-          setLabels(authority.labels as LabelInput[]);
-          setUri(authority.external_uri ?? "");
-          setEditing(true);
-        }}
-      >
-        {t("actions.edit")}
-      </Button>
-      <DeleteConfirmDialog
-        description={t("actions.confirmDeleteAuthority")}
-        onConfirm={() => deleteAuthority.mutateAsync({ id: authority.id, kind })}
     />
-    </li>
   );
 }

web/src/vocab/term-row.tsx

@@ -1,84 +1,24 @@
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-
 import type { components } from "../api/schema";
 import { useUpdateTerm, useDeleteTerm } from "../api/queries";
-import { LabelEditor } from "../components/label-editor";
+import { LabelledRecordRow } from "../components/labelled-record-row";
-import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
-import { MutationError } from "../components/mutation-error";
-import { ExternalUriLink } from "../components/external-uri-link";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { labelText } from "../lib/labels";
 
 type TermView = components["schemas"]["TermView"];
-type LabelInput = components["schemas"]["LabelInput"];
 
 export function TermRow({ vocabularyId, term, lang }: { vocabularyId: string; term: TermView; lang: string }) {
-  const { t } = useTranslation();
+  const update = useUpdateTerm();
-
+  const del = useDeleteTerm();
-  const updateTerm = useUpdateTerm();
-  const deleteTerm = useDeleteTerm();
-
-  const [editing, setEditing] = useState(false);
-  const [labels, setLabels] = useState<LabelInput[]>(term.labels as LabelInput[]);
-  const [uri, setUri] = useState(term.external_uri ?? "");
-
-  if (editing) {
-    return (
-      <li className="space-y-2 border-b py-2">
-        <LabelEditor value={labels} onChange={setLabels} />
-        <div className="space-y-1">
-          <Label htmlFor={`term-uri-${term.id}`}>{t("labels.externalUri")}</Label>
-          <Input id={`term-uri-${term.id}`} type="url" placeholder={t("labels.uriPlaceholder")} value={uri} onChange={(e) => setUri(e.target.value)} />
-        </div>
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            size="sm"
-            disabled={updateTerm.isPending}
-            onClick={() =>
-              updateTerm.mutate(
-                { vocabularyId, termId: term.id, external_uri: uri.trim() || null, labels },
-                { onSuccess: () => setEditing(false) },
-              )
-            }
-          >
-            {t("actions.save")}
-          </Button>
-          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
-            {t("form.cancel")}
-          </Button>
-        </div>
-        <MutationError error={updateTerm.error} />
-      </li>
-    );
-  }
 
   return (
-    <li className="flex items-center gap-2 border-b py-1 text-sm">
+    <LabelledRecordRow
-      <div className="flex-1">
+      record={{ ...term, external_uri: term.external_uri ?? null }}
-        <div>{labelText(term.labels, lang)}</div>
+      lang={lang}
-        {term.external_uri && <ExternalUriLink uri={term.external_uri} />}
+      deleteConfirmKey="actions.confirmDeleteTerm"
-      </div>
+      savePending={update.isPending}
-      <Button
+      saveError={update.error}
-        type="button"
+      onEditOpen={() => update.reset()}
-        variant="ghost"
+      onSave={(labels, uri, done) =>
-        size="sm"
+        update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
-        onClick={() => {
+      onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
-          updateTerm.reset();
-          setLabels(term.labels as LabelInput[]);
-          setUri(term.external_uri ?? "");
-          setEditing(true);
-        }}
-      >
-        {t("actions.edit")}
-      </Button>
-      <DeleteConfirmDialog
-        description={t("actions.confirmDeleteTerm")}
-        onConfirm={() => deleteTerm.mutateAsync({ vocabularyId, termId: term.id })}
     />
-    </li>
   );
 }

web/src/vocab/vocabulary-terms.tsx

@@ -1,41 +1,20 @@
-import { useState, type FormEvent } from "react";
 import { useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
-import type { components } from "../api/schema";
 import { useTerms, useAddTerm, useVocabularies } from "../api/queries";
-import { byLabel } from "../lib/sort";
-import { labelText } from "../lib/labels";
 import { useBreadcrumb } from "../shell/use-breadcrumb";
-import { LabelEditor } from "../components/label-editor";
+import { FilteredRecordList } from "../components/filtered-record-list";
-import { MutationError } from "../components/mutation-error";
+import { LabelledRecordCreateForm } from "../components/labelled-record-create-form";
 import { TermRow } from "./term-row";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { ListSkeleton } from "@/components/ui/skeletons";
-
-type LabelInput = components["schemas"]["LabelInput"];
 
 export function VocabularyTerms() {
   const { t, i18n } = useTranslation();
-
   const { id } = useParams();
-
   const lang = i18n.language.startsWith("sv") ? "sv" : "en";
 
   const { data: terms, isLoading, isError } = useTerms(id);
-
   const addTerm = useAddTerm();
 
-  const [labels, setLabels] = useState<LabelInput[]>([]);
-
-  const [uri, setUri] = useState("");
-
-  const [filter, setFilter] = useState("");
-
-  const [error, setError] = useState(false);
-
   const { data: vocabularies } = useVocabularies();
   const vocabKey = vocabularies?.find((v) => v.id === id)?.key;
 
@@ -47,81 +26,28 @@ export function VocabularyTerms() {
 
   if (!id) return null;
 
-  const onAdd = (event: FormEvent) => {
-    event.preventDefault();
-
-    if (!labels.some((l) => l.label)) {
-      setError(true);
-      return;
-    }
-
-    setError(false);
-
-    addTerm.mutate(
-      { vocabularyId: id, external_uri: uri.trim() || null, labels },
-      { onSuccess: () => { setLabels([]); setUri(""); } },
-    );
-  };
-
-  const q = filter.trim().toLowerCase();
-  const rows = [...(terms ?? [])]
-    .filter((term) => !q || labelText(term.labels, lang).toLowerCase().includes(q))
-    .sort(byLabel(lang));
-
   return (
     <div className="overflow-auto p-4">
-      <div className="mb-2 label-caption">
+      <div className="mb-2 label-caption">{t("vocab.terms")}</div>
-        {t("vocab.terms")}
+
-      </div>
+      <FilteredRecordList
-      <div className="mb-3">
+        records={terms}
-        <Input
+        lang={lang}
-          aria-label={t("common.filter")}
+        isLoading={isLoading}
-          placeholder={t("common.filter")}
+        isError={isError}
-          value={filter}
+        loadErrorText={t("vocab.loadError")}
-          onChange={(e) => setFilter(e.target.value)}
+        emptyText={t("vocab.noTerms")}
+        renderRow={(term) => <TermRow vocabularyId={id} term={term} lang={lang} />}
       />
-      </div>
+
-      {isLoading ? (
+      <LabelledRecordCreateForm
-        <ListSkeleton className="mb-4" rows={5} />
+        heading={t("vocab.addTerm")}
-      ) : (
+        submitLabel={t("vocab.addTerm")}
-        <ul className="mb-4">
+        pending={addTerm.isPending}
-          {isError && (
+        error={addTerm.error}
-            <li className="text-sm text-destructive">{t("vocab.loadError")}</li>
+        onCreate={(labels, uri, reset) =>
-          )}
+          addTerm.mutate({ vocabularyId: id, external_uri: uri, labels }, { onSuccess: reset })}
-          {!isError && terms?.length === 0 && (
-            <li className="text-sm text-muted-foreground">{t("vocab.noTerms")}</li>
-          )}
-          {!isError && terms && terms.length > 0 && rows.length === 0 && (
-            <li className="text-sm text-muted-foreground">{t("common.noMatches")}</li>
-          )}
-          {rows.map((term) => (
-            <TermRow key={term.id} vocabularyId={id} term={term} lang={lang} />
-          ))}
-        </ul>
-      )}
-      <form onSubmit={onAdd} className="space-y-2 border-t pt-3">
-        <div className="text-sm font-medium">{t("vocab.addTerm")}</div>
-        <LabelEditor value={labels} onChange={setLabels} />
-        <div className="space-y-1">
-          <Label htmlFor="term-uri">{t("labels.externalUri")}</Label>
-          <Input
-            id="term-uri"
-            type="url"
-            placeholder={t("labels.uriPlaceholder")}
-            value={uri}
-            onChange={(e) => setUri(e.target.value)}
       />
     </div>
-        {error && (
-          <p role="alert" className="text-xs text-destructive">
-            {t("form.required")}
-          </p>
-        )}
-        <MutationError error={addTerm.error} />
-        <Button type="submit" size="sm" disabled={addTerm.isPending}>
-          {t("vocab.addTerm")}
-        </Button>
-      </form>
-    </div>
   );
 }