34 lines
789 B
TypeScript
34 lines
789 B
TypeScript
import type { Movie } from "../types";
|
|
import DebounceInput from "./DebouceInput";
|
|
|
|
interface TmdbSearchInputProps {
|
|
onSearch: (movies: Movie[]) => void;
|
|
}
|
|
|
|
export default function TmdbSearchInput({ onSearch }: TmdbSearchInputProps) {
|
|
function handleOnSearchInputDebounce(value: string) {
|
|
fetch(`/api/tmdb/movies/search?query=${value}`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
Accept: "application/json",
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((res) => res.json())
|
|
.then((json) => {
|
|
onSearch(json.movies);
|
|
})
|
|
.catch((err) => console.log(err));
|
|
onSearch([]);
|
|
}
|
|
|
|
return (
|
|
<DebounceInput
|
|
className="form-control"
|
|
placeholder="Search here"
|
|
onDebounce={handleOnSearchInputDebounce}
|
|
debouceDelay={1000}
|
|
/>
|
|
);
|
|
}
|