Function SearchInput

webapp/src/components/nav/SearchInput.tsx:11–85

()

import {Spinner} from "@heroui/spinner";

export default function SearchInput() {
    const [query, setQuery] = useState('');
    const [loading, setLoading] = useState(false);
    const [results, setResults] = useState<Question[] | null>(null);
    const [showDropdown, setShowDropdown] = useState(false);
    const timeoutRef = useRef<NodeJS.Timeout | null>(null);

    useEffect(() => {
        if (timeoutRef.current) clearTimeout(timeoutRef.current);

        if (!query) {
            // eslint-disable-next-line react-hooks/set-state-in-effect
            setResults(null);
            setShowDropdown(false);
            return;
        }

        timeoutRef.current = setTimeout(async () => {
            setLoading(true);
            const {data: questions} = await searchQuestions(query);
            setResults(questions);
            setLoading(false);
            setShowDropdown(true);
        }, 300)
    }, [query]);

    const onAction = () => {
        setQuery('');
        setResults(null);
    }
    
    return (
        <div className='flex flex-col w-full'>
            <Input
                startContent={<MagnifyingGlassIcon className='size-6' />}
                className="ml-6"
                type='search'
                placeholder='Search'
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                endContent={loading && <Spinner size='sm' />}
            />
            {showDropdown && results && (
                <div className='absolute top-full z-50 bg-white dark:bg-default-50 shadow-lg border-2 border-default-500 w-[50%]'>
                    <Listbox
                        onAction={onAction}
                        items={results}
                        className='flex flex-col overflow-y-auto'
                    >
                        {(question) => (
                            <ListboxItem
                                href={`/questions/${question.id}`}
                                key={question.id}
                                startContent={
                                    <div className='flex flex-col h-14 min-w-14 justify-center items-center border border-success rounded-md'>
                                        <span>{question.answerCount}</span>
                                        <span className='text-xs'>answers</span>
                                    </div>