blob: 35b8432ef9086f5e9b7a65ac524dd683f8b8e5f8 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
"use client";
import { useState } from "react";
import { Input, Progress } from "@nextui-org/react";
import { SearchMovie } from "./requestsHandler";
import MovieSearchFormatter from "./searchFormatter";
const MovieSearchBar = () => {
const [movieTitle, setMovieTitle] = useState("");
const [loading, setLoading] = useState(<></>);
const [movieResults, setMovieResults] = useState(<></>);
async function handleInputChange() {
setLoading(
<Progress
size="sm"
isIndeterminate
aria-label="Loading..."
className="w-full"
/>
);
const data = await SearchMovie(movieTitle);
setLoading(<></>);
setMovieResults(await MovieSearchFormatter(data));
}
return (
<section>
<div className="flex flex-col w-full md:flex-nowrap gap-2 lg:w-1/2">
<Input
type="text"
label="Search for movie"
placeholder="Enter movie title"
onChange={(event) => {
if (event.target.value.trim() !== "") {
setMovieTitle(event.target.value);
}
}}
onKeyDown={async (event) => {
if (event.key === "Enter" || event.code === "Enter") {
await handleInputChange();
}
}}
/>
{loading}
</div>
<div className="mt-2">{movieResults}</div>
</section>
);
};
export default MovieSearchBar;
|