import { WatchedMediaCard } from "components/media/WatchedMediaCard"; import { SearchBarInput } from "components/SearchBar"; import { MWMedia, MWMediaType, MWQuery, SearchProviders } from "scrapers"; import { useEffect, useState } from "react"; import { ThinContainer } from "components/layout/ThinContainer"; import { SectionHeading } from "components/layout/SectionHeading"; import { Icons } from "components/Icon"; import { Loading } from "components/layout/Loading"; import { Tagline } from "components/Text/Tagline"; import { Title } from "components/Text/Title"; import { useDebounce } from "hooks/useDebounce"; export function SearchView() { const [results, setResults] = useState([]); const [search, setSearch] = useState({ searchQuery: "", type: MWMediaType.MOVIE, }); const debouncedSearch = useDebounce(search, 2000); useEffect(() => { if (debouncedSearch.searchQuery !== "") runSearch(debouncedSearch); }, [debouncedSearch]); useEffect(() => { setResults([]); }, [search]); async function runSearch(query: MWQuery) { const results = await SearchProviders(query); setResults(results); } const isLoading = search.searchQuery !== "" && results.length === 0; const hasResult = results.length > 0; return ( {/* input section */}
Because watching legally is boring What movie do you want to watch?
{/* results */} {hasResult ? ( {results.map((v) => ( ))} ) : null} {/* Loading icon */} {isLoading ? ( ) : null}
); }