feat: v0.0.8

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

@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
-import { createAlias, deleteAlias, getAliases, getAlbum, setPrimaryAlias, type Album, type Alias } from "api/api";
-import { Modal } from "./Modal";
-import { AsyncButton } from "../AsyncButton";
+import { createAlias, deleteAlias, getAliases, setPrimaryAlias, type Alias } from "api/api";
+import { Modal } from "../Modal";
+import { AsyncButton } from "../../AsyncButton";
 import { useEffect, useState } from "react";
 import { Trash } from "lucide-react";
 import SetVariousArtists from "./SetVariousArtist";
+import SetPrimaryArtist from "./SetPrimaryArtist";
 
 interface Props {
     type: string 
@@ -18,7 +19,6 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
     const [loading, setLoading ] = useState(false)
     const [err, setError ] = useState<string>()
     const [displayData, setDisplayData] = useState<Alias[]>([])
-    const [variousArtists, setVariousArtists] = useState(false)
         
     const { isPending, isError, data, error } = useQuery({ 
         queryKey: [
@@ -125,7 +125,10 @@ export default function EditModal({ open, setOpen, type, id }: Props) {
                     </div>
                 </div>
                 { type.toLowerCase() === "album" &&
+                    <>
                     <SetVariousArtists id={id} />
+                    <SetPrimaryArtist id={id} type="album" />
+                    </>
                 }
             </div>
         </Modal>

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

@@ -0,0 +1,99 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAlbum, type Artist } from "api/api";
+import { useEffect, useState } from "react"
+
+interface Props {
+    id: number
+    type: string
+}
+
+export default function SetPrimaryArtist({ id, type }: Props) {
+    const [err, setErr] = useState('')
+    const [primary, setPrimary] = useState<Artist>()
+    const [success, setSuccess] = useState('')
+            
+    const { isPending, isError, data, error } = useQuery({ 
+        queryKey: [
+            'get-artists-'+type.toLowerCase(), 
+            {
+                id: id
+            },
+        ], 
+        queryFn: () => {
+            return fetch('/apis/web/v1/artists?'+type.toLowerCase()+'_id='+id).then(r => r.json()) as Promise<Artist[]>;
+        },
+    });
+
+    useEffect(() => {
+        if (data) {
+            for (let a of data) {
+                if (a.is_primary) {
+                    setPrimary(a)
+                    break
+                }
+            }
+        }
+    }, [data]) 
+
+    if (isError) {
+        return (
+            <p className="error">Error: {error.message}</p>
+        )
+    }
+    if (isPending) {
+        return (
+            <p>Loading...</p>
+        )
+    }
+
+    const updatePrimary = (artist: number, val: boolean) => {
+        setErr('');
+        setSuccess('');
+        fetch(`/apis/web/v1/artists/primary?artist_id=${artist}&${type.toLowerCase()}_id=${id}&is_primary=${val}`, { 
+            method: 'POST',
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            }
+        })
+            .then(r => {
+                if (r.ok) {
+                    setSuccess('successfully updated primary artists');
+                } else {
+                    r.json().then(r => setErr(r.error));
+                }
+            });
+    }
+    
+    return (
+        <div className="w-full">
+            <h2>Set Primary Artist</h2>
+            <div className="flex flex-col gap-4">
+                <select
+                    name="mark-various-artists"
+                    id="mark-various-artists"
+                    className="w-60 px-3 py-2 rounded-md"
+                    value={primary?.name || ""}
+                    onChange={(e) => {
+                        for (let a of data) {
+                            if (a.name === e.target.value) {
+                                setPrimary(a);
+                                updatePrimary(a.id, true);
+                            }
+                        }
+                    }}
+                >
+                    <option value="" disabled>
+                        Select an artist
+                    </option>
+                    {data.map((a) => (
+                        <option key={a.id} value={a.name}>
+                            {a.name}
+                        </option>
+                    ))}
+                </select>
+                {err && <p className="error">{err}</p>}
+                {success && <p className="success">{success}</p>}
+            </div>
+        </div>
+    );
+}

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

@@ -73,6 +73,7 @@ export default function SetVariousArtists({ id }: Props) {
                 <option value="false">False</option>
             </select>
                 {err && <p className="error">{err}</p>}
+                {success && <p className="success">{success}</p>}
             </div>
         </div>
     )

client/app/components/modals/MergeModal.tsx

@@ -34,15 +34,11 @@ export default function MergeModal(props: Props) {
     }
 
     const toggleSelect = ({title, id}: {title: string, id: number}) => {
-        if (mergeTarget.id === 0) {
-            setMergeTarget({title: title, id: id})
-        } else {
-            setMergeTarget({title:"", id: 0})
-        }
+        setMergeTarget({title: title, id: id})
     }
 
     useEffect(() => {
-        console.log(mergeTarget)
+        console.log("mergeTarget",mergeTarget)
     }, [mergeTarget])
 
     const doMerge = () => {