feat: set primary artist option for tracks

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

@@ -1,5 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { createAlias, deleteAlias, getAliases, setPrimaryAlias, type Alias } from "api/api";
+import {
+  createAlias,
+  deleteAlias,
+  getAliases,
+  setPrimaryAlias,
+  type Alias,
+} from "api/api";
 import { Modal } from "../Modal";
 import { AsyncButton } from "../../AsyncButton";
 import { useEffect, useState } from "react";
@@ -8,133 +14,149 @@ import SetVariousArtists from "./SetVariousArtist";
 import SetPrimaryArtist from "./SetPrimaryArtist";
 
 interface Props {
-    type: string 
-    id: number
-    open: boolean 
-    setOpen: Function
+  type: string;
+  id: number;
+  open: boolean;
+  setOpen: Function;
 }
 
 export default function EditModal({ open, setOpen, type, id }: Props) {
-    const [input, setInput] = useState('')
-    const [loading, setLoading ] = useState(false)
-    const [err, setError ] = useState<string>()
-    const [displayData, setDisplayData] = useState<Alias[]>([])
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [err, setError] = useState<string>();
+  const [displayData, setDisplayData] = useState<Alias[]>([]);
 
-    const { isPending, isError, data, error } = useQuery({ 
-        queryKey: [
-            'aliases', 
-            {
-                type: type,
-                id: id
-            },
-        ], 
-        queryFn: ({ queryKey }) => {
-            const params = queryKey[1] as { type: string; id: number };
-            return getAliases(params.type, params.id);
-        },
-    });
-
-    useEffect(() => {
-        if (data) {
-            setDisplayData(data)
-        }
-    }, [data])    
+  const { isPending, isError, data, error } = useQuery({
+    queryKey: [
+      "aliases",
+      {
+        type: type,
+        id: id,
+      },
+    ],
+    queryFn: ({ queryKey }) => {
+      const params = queryKey[1] as { type: string; id: number };
+      return getAliases(params.type, params.id);
+    },
+  });
 
-    if (isError) {
-        return (
-            <p className="error">Error: {error.message}</p>
-        )
-    }
-    if (isPending) {
-        return (
-            <p>Loading...</p>
-        )
+  useEffect(() => {
+    if (data) {
+      setDisplayData(data);
     }
+  }, [data]);
 
-    const handleSetPrimary = (alias: string) => {
-        setError(undefined)
-        setLoading(true)
-        setPrimaryAlias(type, id, alias)
-        .then(r => {
-            if (r.ok) {
-                window.location.reload()
-            } else {
-                r.json().then((r) => setError(r.error))
-            }
-        })
-        setLoading(false)
-    }
+  if (isError) {
+    return <p className="error">Error: {error.message}</p>;
+  }
+  if (isPending) {
+    return <p>Loading...</p>;
+  }
 
-    const handleNewAlias = () => {
-        setError(undefined)
-        if (input === "") {
-            setError("alias must be provided")
-            return
-        }
-        setLoading(true)
-        createAlias(type, id, input)
-        .then(r => {
-            if (r.ok) {
-                setDisplayData([...displayData, {alias: input, source: "Manual", is_primary: false, id: id}])
-            } else {
-                r.json().then((r) => setError(r.error))
-            }
-        })
-        setLoading(false)
-    }
+  const handleSetPrimary = (alias: string) => {
+    setError(undefined);
+    setLoading(true);
+    setPrimaryAlias(type, id, alias).then((r) => {
+      if (r.ok) {
+        window.location.reload();
+      } else {
+        r.json().then((r) => setError(r.error));
+      }
+    });
+    setLoading(false);
+  };
 
-    const handleDeleteAlias = (alias: string) => {
-        setError(undefined)
-        setLoading(true)
-        deleteAlias(type, id, alias)
-        .then(r => {
-            if (r.ok) {
-                setDisplayData(displayData.filter((v) => v.alias != alias))
-            } else {
-                r.json().then((r) => setError(r.error))
-            }
-        })
-        setLoading(false)
+  const handleNewAlias = () => {
+    setError(undefined);
+    if (input === "") {
+      setError("alias must be provided");
+      return;
     }
+    setLoading(true);
+    createAlias(type, id, input).then((r) => {
+      if (r.ok) {
+        setDisplayData([
+          ...displayData,
+          { alias: input, source: "Manual", is_primary: false, id: id },
+        ]);
+      } else {
+        r.json().then((r) => setError(r.error));
+      }
+    });
+    setLoading(false);
+  };
 
-    const handleClose = () => {
-        setOpen(false)
-        setInput('')
-    }
+  const handleDeleteAlias = (alias: string) => {
+    setError(undefined);
+    setLoading(true);
+    deleteAlias(type, id, alias).then((r) => {
+      if (r.ok) {
+        setDisplayData(displayData.filter((v) => v.alias != alias));
+      } else {
+        r.json().then((r) => setError(r.error));
+      }
+    });
+    setLoading(false);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+    setInput("");
+  };
 
-    return (
-        <Modal maxW={1000} isOpen={open} onClose={handleClose}>
-            <div className="flex flex-col items-start gap-6 w-full">
-                <div className="w-full">
-                    <h2>Alias Manager</h2>
-                    <div className="flex flex-col gap-4">
-                        {displayData.map((v) => (
-                            <div className="flex gap-2">
-                                <div className="bg p-3 rounded-md flex-grow" key={v.alias}>{v.alias} (source: {v.source})</div>
-                                <AsyncButton loading={loading} onClick={() => handleSetPrimary(v.alias)} disabled={v.is_primary}>Set Primary</AsyncButton>
-                                <AsyncButton loading={loading} onClick={() => handleDeleteAlias(v.alias)} confirm disabled={v.is_primary}><Trash size={16} /></AsyncButton>
-                            </div>
-                        ))}
-                        <div className="flex gap-2 w-3/5">
-                            <input
-                                type="text"
-                                placeholder="Add a new alias"
-                                className="mx-auto fg bg rounded-md p-3 flex-grow"
-                                value={input}
-                                onChange={(e) => setInput(e.target.value)}
-                            />
-                            <AsyncButton loading={loading} onClick={handleNewAlias}>Submit</AsyncButton>
-                        </div>
-                        {err && <p className="error">{err}</p>}
-                    </div>
+  return (
+    <Modal maxW={1000} isOpen={open} onClose={handleClose}>
+      <div className="flex flex-col items-start gap-6 w-full">
+        <div className="w-full">
+          <h2>Alias Manager</h2>
+          <div className="flex flex-col gap-4">
+            {displayData.map((v) => (
+              <div className="flex gap-2">
+                <div className="bg p-3 rounded-md flex-grow" key={v.alias}>
+                  {v.alias} (source: {v.source})
                 </div>
-                { type.toLowerCase() === "album" &&
-                    <>
-                    <SetVariousArtists id={id} />
-                    <SetPrimaryArtist id={id} type="album" />
-                    </>
-                }
+                <AsyncButton
+                  loading={loading}
+                  onClick={() => handleSetPrimary(v.alias)}
+                  disabled={v.is_primary}
+                >
+                  Set Primary
+                </AsyncButton>
+                <AsyncButton
+                  loading={loading}
+                  onClick={() => handleDeleteAlias(v.alias)}
+                  confirm
+                  disabled={v.is_primary}
+                >
+                  <Trash size={16} />
+                </AsyncButton>
+              </div>
+            ))}
+            <div className="flex gap-2 w-3/5">
+              <input
+                type="text"
+                placeholder="Add a new alias"
+                className="mx-auto fg bg rounded-md p-3 flex-grow"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+              />
+              <AsyncButton loading={loading} onClick={handleNewAlias}>
+                Submit
+              </AsyncButton>
             </div>
-        </Modal>
-    )
+            {err && <p className="error">{err}</p>}
+          </div>
+        </div>
+        {type.toLowerCase() === "album" && (
+          <>
+            <SetVariousArtists id={id} />
+            <SetPrimaryArtist id={id} type="album" />
+          </>
+        )}
+        {type.toLowerCase() === "track" && (
+          <SetPrimaryArtist id={id} type="track" />
+        )}
+      </div>
+    </Modal>
+  );
 }