diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 245a292..ae43117 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -1,13 +1,29 @@ import React from "react"; +import Star from "./Star"; -const Card = ({movie}) => { - const { Title, Year, imdbID, Poster } = movie - console.log("Card", Title, Year, imdbID, Poster) +const Card = ({ movie, favouriteList, setFavouriteList }) => { + const { Title, Year, Poster } = movie; return ( -
- {Title} -
{Title}
-

{Year}

+
+ {favouriteList?.includes(movie) ? ( + + ) : ( + + )} + {Title} +
+
{Title}
+

{Year}

+
); }; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 109f016..6bba220 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,9 +1,10 @@ import React from 'react' +import { Link } from 'react-router-dom'; const Header = () => { return ( -
- DigiFlix +
+ DigiFlix
) }; diff --git a/src/components/Star.jsx b/src/components/Star.jsx new file mode 100644 index 0000000..cf6428e --- /dev/null +++ b/src/components/Star.jsx @@ -0,0 +1,54 @@ +import React from "react"; + +const Star = ({ + size = 5, + fill = "#00000000", + stroke = "#DAA520", + favouriteList, + setFavouriteList, + movie, +}) => { + // Calculate points for a five-pointed star + const points = []; + const outerRadius = size / 2; + const innerRadius = outerRadius * 0.382; // Golden ratio + + for (let i = 0; i < 10; i++) { + const radius = i % 2 === 0 ? outerRadius : innerRadius; + const angle = (Math.PI / 5) * i - Math.PI / 2; + const x = radius * Math.cos(angle) + size / 2; + const y = radius * Math.sin(angle) + size / 2; + points.push(`${x},${y}`); + } + + const handleFavouriteList = () => { + favouriteList?.includes(movie) + ? setFavouriteList((prevList) => + prevList?.filter((movieItem) => movieItem !== movie) + ) + : setFavouriteList((prevList) => [...prevList, movie]); + + }; + + return ( + + + + ); +}; + +export default Star; diff --git a/src/hooks/useFetch.jsx b/src/hooks/useFetch.js similarity index 61% rename from src/hooks/useFetch.jsx rename to src/hooks/useFetch.js index a8f8036..abe64ef 100644 --- a/src/hooks/useFetch.jsx +++ b/src/hooks/useFetch.js @@ -3,22 +3,23 @@ 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; diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 1ff1706..11f8304 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -1,25 +1,40 @@ -import React, { useEffect, useState } from "react"; +import React, { useState, useEffect } from "react"; import useFetch from "../hooks/useFetch"; +import { Pagination } from "@mui/material"; + 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 [favouriteList, setFavouriteList] = useState( + JSON.parse(window.localStorage.getItem("favouriteMovies")) ?? [] + ); + const [showFavourite, setShowFavourite] = useState(false); - const url = import.meta.env.VITE_BASE_URL; - const response = useFetch(url + "s=" + searchValue); - console.log(response) - useEffect(() => setData(response), [data]); + useEffect(() => { + window.localStorage.setItem("favouriteMovies", JSON.stringify(favouriteList)) + console.log(favouriteList); + }, [favouriteList]); + + const { data, loading, error } = useFetch( + url + "&s=" + searchValue + "&page=" + page + ); + const handlePageChange = (e) => { + setPage(e?.target?.textContent); + }; const handleSearch = (event) => { event.preventDefault(); setSearchValue(inputValue); }; return ( -
-
-
+
+
+ { onChange={(event) => setInputValue(event?.target?.value) } - className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary" + className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary" /> -
- {data?.Search?.length > 0 && -
- {data?.Search?.map((movie) => )} +
+ + setShowFavourite((prev) => !prev)} + />
- } +
+ {(showFavourite && ( +
+ {favouriteList?.map((movie) => ( + + ))} +
+ )) || + (data?.Search?.length > 0 && ( +
+ {loading && ( + + )} +
+ {data?.Search?.map((movie) => ( + + ))} +
+ +
+ ))}
); }; export default HomePage; + +function SearchBar({ + inputValue, + event, + setInputValue, + target, + value, + handleSearch, + setShowFavourite, + prev, +}) { + return ( +
+
+ setInputValue(event?.target?.value)} + className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary" + /> + +
+
+ + setShowFavourite((prev) => !prev)} + /> +
+
+ ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 73fb346..e21705e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,10 +2,10 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { colors: { - primary: "#191A19", - secondary: "#1E5128", - ternary: "#4E9F3D", - quadnary: "#D8E9A8", + primary: "#6B8A7A", + secondary: "#254336", + ternary: "#B7B597", + quadnary: "#DAD3BE", }, extend: {}, },