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

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