Partial Done
This commit is contained in:
parent
2f57426444
commit
1624cb4428
13
package-lock.json
generated
13
package-lock.json
generated
|
|
@ -14,7 +14,8 @@
|
|||
"axios": "^1.7.9",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.1.1"
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-spinners": "^0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
@ -5219,6 +5220,16 @@
|
|||
"react-dom": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/react-spinners": {
|
||||
"version": "0.15.0",
|
||||
"resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.15.0.tgz",
|
||||
"integrity": "sha512-ZO3/fNB9Qc+kgpG3SfdlMnvTX6LtLmTnOogb3W6sXIaU/kZ1ydEViPfZ06kSOaEsor58C/tzXw2wROGQu3X2pA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
"axios": "^1.7.9",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^7.1.1"
|
||||
"react-router-dom": "^7.1.1",
|
||||
"react-spinners": "^0.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.17.0",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
import React from "react";
|
||||
|
||||
const Card = ({ movie }) => {
|
||||
const { Title, Year, imdbID, Poster } = movie
|
||||
console.log("Card", Title, Year, imdbID, Poster)
|
||||
const { Title, Year, imdbID, Poster } = movie;
|
||||
return (
|
||||
<div className="h-16 w-10">
|
||||
<img src={Poster} alt={Title} className="h-12 w-full" />
|
||||
<div className="h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary">
|
||||
<img src={Poster} alt={Title} className="h-[85%] w-full" />
|
||||
<div className="flex justify-between px-3 pt-1 text-sm">
|
||||
<h6 className="text-quadnary">{Title}</h6>
|
||||
<p className="text-quadnary">{Year}</p>
|
||||
<p className="text-quadnary font-semibold">{Year}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from 'react'
|
|||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="fixed w-full h-[5vh] py-3 px-6 bg-secondary">
|
||||
<header className="fixed z-20 w-full h-[5vh] py-3 px-6 bg-secondary">
|
||||
<a href="/">DigiFlix</a>
|
||||
</header>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -3,22 +3,24 @@ import { useState, useEffect } from "react";
|
|||
|
||||
const useFetch = (url) => {
|
||||
const [data, setData] = useState({});
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState({})
|
||||
useEffect(() => {
|
||||
// console.log("Inside fetch")
|
||||
const fetch = async () => {
|
||||
let response;
|
||||
try {
|
||||
setLoading(true);
|
||||
response = await axios.get(url);
|
||||
// console.log("USEFETCH:", response?.data);
|
||||
setData(response?.data);
|
||||
} catch {
|
||||
console.log("Error in useFetch: ");
|
||||
return "Error Fetching Data";
|
||||
setLoading(false);
|
||||
} catch(error) {
|
||||
setError(error)
|
||||
}
|
||||
};
|
||||
fetch();
|
||||
}, [url]);
|
||||
return data;
|
||||
return { data, loading, error};
|
||||
};
|
||||
|
||||
export default useFetch;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,34 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
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 [data, setData] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const { data, loading, error } = useFetch(
|
||||
url + "&s=" + searchValue + "&page=" + page
|
||||
);
|
||||
|
||||
const url = import.meta.env.VITE_BASE_URL;
|
||||
const response = useFetch(url + "s=" + searchValue);
|
||||
console.log(response)
|
||||
useEffect(() => setData(response), [data]);
|
||||
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 justify-center">
|
||||
<div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
|
||||
<div>
|
||||
<form className="">
|
||||
<form className="flex gap-3 items-center">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
|
|
@ -32,18 +41,31 @@ const HomePage = () => {
|
|||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="text-quadnary"
|
||||
className="px-4 h-full border border-quadnary text-quadnary"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{data?.Search?.length > 0 &&
|
||||
<div>
|
||||
{data?.Search?.map((movie) => <Card key={movie?.imdbID} movie={movie}/>)}
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue