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,24 +14,24 @@ import SetVariousArtists from "./SetVariousArtist";
 import SetPrimaryArtist from "./SetPrimaryArtist";
 
 interface Props {
-    type: string 
+  type: string;
-    id: number
+  id: number;
-    open: boolean 
+  open: boolean;
-    setOpen: Function
+  setOpen: Function;
 }
 
 export default function EditModal({ open, setOpen, type, id }: Props) {
-    const [input, setInput] = useState('')
+  const [input, setInput] = useState("");
-    const [loading, setLoading ] = useState(false)
+  const [loading, setLoading] = useState(false);
-    const [err, setError ] = useState<string>()
+  const [err, setError] = useState<string>();
-    const [displayData, setDisplayData] = useState<Alias[]>([])
+  const [displayData, setDisplayData] = useState<Alias[]>([]);
 
   const { isPending, isError, data, error } = useQuery({
     queryKey: [
-            'aliases', 
+      "aliases",
       {
         type: type,
-                id: id
+        id: id,
       },
     ],
     queryFn: ({ queryKey }) => {
@@ -36,71 +42,67 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
 
   useEffect(() => {
     if (data) {
-            setDisplayData(data)
+      setDisplayData(data);
     }
-    }, [data])    
+  }, [data]);
 
   if (isError) {
-        return (
+    return <p className="error">Error: {error.message}</p>;
-            <p className="error">Error: {error.message}</p>
-        )
   }
   if (isPending) {
-        return (
+    return <p>Loading...</p>;
-            <p>Loading...</p>
-        )
   }
 
   const handleSetPrimary = (alias: string) => {
-        setError(undefined)
+    setError(undefined);
-        setLoading(true)
+    setLoading(true);
-        setPrimaryAlias(type, id, alias)
+    setPrimaryAlias(type, id, alias).then((r) => {
-        .then(r => {
       if (r.ok) {
-                window.location.reload()
+        window.location.reload();
       } else {
-                r.json().then((r) => setError(r.error))
+        r.json().then((r) => setError(r.error));
-            }
-        })
-        setLoading(false)
       }
+    });
+    setLoading(false);
+  };
 
   const handleNewAlias = () => {
-        setError(undefined)
+    setError(undefined);
     if (input === "") {
-            setError("alias must be provided")
+      setError("alias must be provided");
-            return
+      return;
     }
-        setLoading(true)
+    setLoading(true);
-        createAlias(type, id, input)
+    createAlias(type, id, input).then((r) => {
-        .then(r => {
       if (r.ok) {
-                setDisplayData([...displayData, {alias: input, source: "Manual", is_primary: false, id: id}])
+        setDisplayData([
+          ...displayData,
+          { alias: input, source: "Manual", is_primary: false, id: id },
+        ]);
       } else {
-                r.json().then((r) => setError(r.error))
+        r.json().then((r) => setError(r.error));
-            }
-        })
-        setLoading(false)
       }
+    });
+    setLoading(false);
+  };
 
   const handleDeleteAlias = (alias: string) => {
-        setError(undefined)
+    setError(undefined);
-        setLoading(true)
+    setLoading(true);
-        deleteAlias(type, id, alias)
+    deleteAlias(type, id, alias).then((r) => {
-        .then(r => {
       if (r.ok) {
-                setDisplayData(displayData.filter((v) => v.alias != alias))
+        setDisplayData(displayData.filter((v) => v.alias != alias));
       } else {
-                r.json().then((r) => setError(r.error))
+        r.json().then((r) => setError(r.error));
-            }
-        })
-        setLoading(false)
       }
+    });
+    setLoading(false);
+  };
 
   const handleClose = () => {
-        setOpen(false)
+    setOpen(false);
-        setInput('')
+    setInput("");
-    }
+  };
 
   return (
     <Modal maxW={1000} isOpen={open} onClose={handleClose}>
@@ -110,9 +112,24 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
           <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>
+                <div className="bg p-3 rounded-md flex-grow" key={v.alias}>
-                                <AsyncButton loading={loading} onClick={() => handleSetPrimary(v.alias)} disabled={v.is_primary}>Set Primary</AsyncButton>
+                  {v.alias} (source: {v.source})
-                                <AsyncButton loading={loading} onClick={() => handleDeleteAlias(v.alias)} confirm disabled={v.is_primary}><Trash size={16} /></AsyncButton>
+                </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">
@@ -123,18 +140,23 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
               />
-                            <AsyncButton loading={loading} onClick={handleNewAlias}>Submit</AsyncButton>
+              <AsyncButton loading={loading} onClick={handleNewAlias}>
+                Submit
+              </AsyncButton>
             </div>
             {err && <p className="error">{err}</p>}
           </div>
         </div>
-                { type.toLowerCase() === "album" &&
+        {type.toLowerCase() === "album" && (
           <>
             <SetVariousArtists id={id} />
             <SetPrimaryArtist id={id} type="album" />
           </>
-                }
+        )}
+        {type.toLowerCase() === "track" && (
+          <SetPrimaryArtist id={id} type="track" />
+        )}
       </div>
     </Modal>
-    )
+  );
 }