/
dropdown.js
92 lines (67 loc) · 2.17 KB
/
dropdown.js
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { useEffect, useState } from "react";
import { BASE_URL } from "../secrets";
import "../components/dropdown.css";
import Movie from "./movie";
function Dropdown() {
const [data, setData] = useState([]);
const [movieslist, setmovieslist] = useState([]);
const [show, handleShow] = useState(false);
useEffect(() => {
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
handleShow(true);
} else {
handleShow(false);
setData([]);
document.getElementById("movie").value = "";
}
});
if (data.length === 0) {
fetch(BASE_URL + "/all").then((res) =>
res
.json()
.then((data) => {
console.table("data", data);
})
, fetch(BASE_URL+"/all").then(res=>res.json().then(
data=>{
console.table("data",data);
setmovieslist(data)
}
).catch((err)=>console.log(err))
))}
return () => {
window.removeEventListener("scroll",()=>{ handleShow(false)})
}
},[data.length]);
const submit= function sumbit(){
if(document.getElementById("movie").value!==""){
if(window.scrollY<100)
window.scrollBy(0, 101);
fetch(BASE_URL+"/processed_data/"+document.getElementById("movie").value).then(res=>res.json().then(
data=>{
console.table("data",data);
setData(data)
}
).catch((err)=>console.log(err)))
}
}
return (
<div className="Wrapper">
{/* <label>Choose your browser from the list:</label> */}
<input className="input" list="movies" name="movie" id="movie" onSubmit={submit} onSelect={submit} placeholder="Search Movie..." />
<datalist id="movies" >{
movieslist.map((movie,i)=>{
return (<option key={i} value={movie}/>);
})
}</datalist>
<div className={show ? "row-posters":'hide'}>{data.map((movie,i)=>{
return <div key={i} className="row_div">
<Movie movie_id={movie}></Movie>
</div>
})}
</div>
</div>
)
}
export default Dropdown;