74 lines
2.5 KiB
JavaScript
74 lines
2.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import useFetch from "../hooks/useFetch";
|
|
|
|
import { Pagination } from "@mui/material";
|
|
import { ClipLoader } from "react-spinners";
|
|
|
|
import Card from "../components/Card";
|
|
|
|
const HomePage = () => {
|
|
const url = import.meta.env.VITE_BASE_URL;
|
|
|
|
const [inputValue, setInputValue] = useState("");
|
|
const [searchValue, setSearchValue] = useState("");
|
|
const [page, setPage] = useState(1);
|
|
const { data, loading, error } = useFetch(
|
|
url + "&s=" + searchValue + "&page=" + page
|
|
);
|
|
|
|
console.log(page);
|
|
|
|
const handlePageChange = (e) => {
|
|
setPage(e?.target?.textContent);
|
|
};
|
|
const handleSearch = (event) => {
|
|
event.preventDefault();
|
|
setSearchValue(inputValue);
|
|
};
|
|
return (
|
|
<div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
|
|
<div>
|
|
<form className="flex gap-3 items-center">
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
id="search"
|
|
value={inputValue}
|
|
onChange={(event) =>
|
|
setInputValue(event?.target?.value)
|
|
}
|
|
className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary"
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="px-4 h-full border border-quadnary text-quadnary"
|
|
onClick={handleSearch}
|
|
>
|
|
Search
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{data?.Search?.length > 0 && (
|
|
<div className="flex flex-col items-center m-10">
|
|
<ClipLoader color="#fff" loading={loading} size={100} />
|
|
<div className="flex flex-wrap gap-4 mb-6 justify-center">
|
|
{data?.Search?.map((movie) => (
|
|
<Card key={movie?.imdbID} movie={movie} />
|
|
))}
|
|
</div>
|
|
<Pagination
|
|
sx={{ bgcolor: "#fff" }}
|
|
onChange={handlePageChange}
|
|
page={Number(page)}
|
|
count={Math.ceil(data?.totalResults / 10)}
|
|
variant="outlined"
|
|
shape="rounded"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomePage;
|