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

import { useQuery } from "@tanstack/react-query";
import { getAlbum } from "api/api";
import { useEffect, useState } from "react"

interface Props {
    id: number
}

export default function SetVariousArtists({ id }: Props) {
    const [err, setErr] = useState('')
    const [va, setVA] = useState(false)
    const [success, setSuccess] = useState('')
            
    const { isPending, isError, data, error } = useQuery({ 
        queryKey: [
            'get-album', 
            {
                id: id
            },
        ], 
        queryFn: ({ queryKey }) => {
            const params = queryKey[1] as { id: number };
            return getAlbum(params.id);
        },
    });

    useEffect(() => {
        if (data) {
            setVA(data.is_various_artists)
        }
    }, [data]) 

    if (isError) {
        return (
            <p className="error">Error: {error.message}</p>
        )
    }
    if (isPending) {
        return (
            <p>Loading...</p>
        )
    }

    const updateVA = (val: boolean) => {
        setErr('');
        setSuccess('');
        fetch(`/apis/web/v1/album?id=${id}&is_various_artists=${val}`, { method: 'PATCH' })
            .then(r => {
                if (r.ok) {
                    setSuccess('Successfully updated album');
                } else {
                    r.json().then(r => setErr(r.error));
                }
            });
    }
    
    return (
        <div className="w-full">
            <h2>Mark as Various Artists</h2>
            <div className="flex flex-col gap-4">
            <select
                name="mark-various-artists"
                id="mark-various-artists"
                className="w-30 px-3 py-2 rounded-md"
                value={va.toString()}
                onChange={(e) => {
                    const val = e.target.value === 'true';
                    setVA(val);
                    updateVA(val);
                }}
            >
                <option value="true">True</option>
                <option value="false">False</option>
            </select>
                {err && <p className="error">{err}</p>}
                {success && <p className="success">{success}</p>}
            </div>
        </div>
    )
}