feat: add endpoint and ui to update mbz id (#125)

* wip

* wip

* feat: add endpoint and ui to update mbz id

client/api/api.ts

@@ -270,6 +270,19 @@ function setPrimaryAlias(
     body: form,
   });
 }
+function updateMbzId(
+  type: string,
+  id: number,
+  mbzid: string
+): Promise<Response> {
+  const form = new URLSearchParams();
+  form.append(`${type}_id`, String(id));
+  form.append("mbz_id", mbzid);
+  return fetch(`/apis/web/v1/mbzid`, {
+    method: "PATCH",
+    body: form,
+  });
+}
 function getAlbum(id: number): Promise<Album> {
   return fetch(`/apis/web/v1/album?id=${id}`).then(
     (r) => r.json() as Promise<Album>
@@ -318,6 +331,7 @@ export {
   createAlias,
   deleteAlias,
   setPrimaryAlias,
+  updateMbzId,
   getApiKeys,
   createApiKey,
   deleteApiKey,

client/app/components/modals/EditModal/EditModal.tsx

@@ -4,6 +4,7 @@ import {
   deleteAlias,
   getAliases,
   setPrimaryAlias,
+  updateMbzId,
   type Alias,
 } from "api/api";
 import { Modal } from "../Modal";
@@ -12,6 +13,7 @@ import { useEffect, useState } from "react";
 import { Trash } from "lucide-react";
 import SetVariousArtists from "./SetVariousArtist";
 import SetPrimaryArtist from "./SetPrimaryArtist";
+import UpdateMbzID from "./UpdateMbzID";
 
 interface Props {
   type: string;
@@ -69,7 +71,7 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
   const handleNewAlias = () => {
     setError(undefined);
     if (input === "") {
-      setError("alias must be provided");
+      setError("no input");
       return;
     }
     setLoading(true);
@@ -156,6 +158,7 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
         {type.toLowerCase() === "track" && (
           <SetPrimaryArtist id={id} type="track" />
         )}
+        <UpdateMbzID type={type} id={id} />
       </div>
     </Modal>
   );

client/app/components/modals/EditModal/UpdateMbzID.tsx

@@ -0,0 +1,53 @@
+import { updateMbzId } from "api/api";
+import { useState } from "react";
+import { AsyncButton } from "~/components/AsyncButton";
+
+interface Props {
+  type: string;
+  id: number;
+}
+
+export default function UpdateMbzID({ type, id }: Props) {
+  const [err, setError] = useState<string | undefined>();
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [mbzid, setMbzid] = useState<"">();
+  const [success, setSuccess] = useState("");
+
+  const handleUpdateMbzID = () => {
+    setError(undefined);
+    if (input === "") {
+      setError("no input");
+      return;
+    }
+    setLoading(true);
+    updateMbzId(type, id, input).then((r) => {
+      if (r.ok) {
+        setSuccess("successfully updated MusicBrainz ID");
+      } else {
+        r.json().then((r) => setError(r.error));
+      }
+    });
+    setLoading(false);
+  };
+
+  return (
+    <div className="w-full">
+      <h3>Update MusicBrainz ID</h3>
+      <div className="flex gap-2 w-3/5">
+        <input
+          type="text"
+          placeholder="Update MusicBrainz ID"
+          className="mx-auto fg bg rounded-md p-3 flex-grow"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+        />
+        <AsyncButton loading={loading} onClick={handleUpdateMbzID}>
+          Submit
+        </AsyncButton>
+      </div>
+      {err && <p className="error">{err}</p>}
+      {success && <p className="success">{success}</p>}
+    </div>
+  );
+}