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

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 { 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";
+import { LabelledRecordRow } from "../components/labelled-record-row";
 
 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 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>
-    );
-  }
+  const update = useUpdateTerm();
+  const del = useDeleteTerm();
 
   return (
-    <li className="flex items-center gap-2 border-b py-1 text-sm">
-      <div className="flex-1">
-        <div>{labelText(term.labels, lang)}</div>
-        {term.external_uri && <ExternalUriLink uri={term.external_uri} />}
-      </div>
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={() => {
-          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>
+    <LabelledRecordRow
+      record={{ ...term, external_uri: term.external_uri ?? null }}
+      lang={lang}
+      deleteConfirmKey="actions.confirmDeleteTerm"
+      savePending={update.isPending}
+      saveError={update.error}
+      onEditOpen={() => update.reset()}
+      onSave={(labels, uri, done) =>
+        update.mutate({ vocabularyId, termId: term.id, external_uri: uri, labels }, { onSuccess: done })}
+      onDelete={() => del.mutateAsync({ vocabularyId, termId: term.id })}
+    />
   );
 }