blob: 492b30e03d1f6dd906b83f110968cbe9355dff55 (
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
54
55
|
"use client";
import { useState } from "react";
import { Input, Progress } from "@nextui-org/react";
import { SEARCH_TV } from "./data-fetch";
import SeriesSearchFormatter from "./seriesSearchFormatter";
import PreFecthSeriesInfo from "./cacher";
const SeriesSearchBar = () => {
const [seriesTitle, setSeriesTitle] = useState("");
const [loading, setLoading] = useState(<></>);
const [seriesResults, setSeriesResults] = useState(<></>);
async function handleInputChange() {
setLoading(
<Progress
size="sm"
isIndeterminate
aria-label="Loading..."
className="w-full"
/>,
);
const data = await SEARCH_TV(seriesTitle);
PreFecthSeriesInfo(data);
setLoading(<></>);
setSeriesResults(await SeriesSearchFormatter(data));
}
return (
<section>
<div className="flex w-full flex-col gap-2 md:flex-nowrap lg:w-1/2">
<Input
type="text"
label="Search for series"
placeholder="Enter series title"
onChange={(event) => {
if (event.target.value.trim() !== "") {
setSeriesTitle(event.target.value);
}
}}
onKeyDown={async (event) => {
if (event.key === "Enter" || event.code === "Enter") {
await handleInputChange();
}
}}
/>
{loading}
</div>
<div className="mt-2">{seriesResults}</div>
</section>
);
};
export default SeriesSearchBar;
|