Koito/client/app/components/modals/SearchModal.tsx

import { useEffect, useState } from "react";
import { Modal } from "./Modal";
import { search, type SearchResponse } from "api/api";
import SearchResults from "../SearchResults";

interface Props {
    open: boolean 
    setOpen: Function
}

export default function SearchModal({ open, setOpen }: Props) {
    const [query, setQuery] = useState('');
    const [data, setData] = useState<SearchResponse>();
    const [debouncedQuery, setDebouncedQuery] = useState(query);

    const closeSearchModal = () => {
        setOpen(false)
        setQuery('')
        setData(undefined)
    }

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedQuery(query);
            if (query === '') {
                setData(undefined)
            }
        }, 300);

        return () => {
            clearTimeout(handler);
        };
    }, [query]);

    useEffect(() => {
        if (debouncedQuery) {
            search(debouncedQuery).then((r) => {
                setData(r);
            });
        }
    }, [debouncedQuery]);

    return (
        <Modal isOpen={open} onClose={closeSearchModal}>
            <h2>Search</h2>
            <div className="flex flex-col items-center">
                <input
                    type="text"
                    autoFocus
                    placeholder="Search for an artist, album, or track"
                    className="w-full mx-auto fg bg rounded p-2"
                    onChange={(e) => setQuery(e.target.value)}
                />
                <div className="h-3/4 w-full">
                <SearchResults data={data} onSelect={closeSearchModal}/>
                </div>
            </div>
        </Modal>
    )
}