From 40ed26f5afe35e91378d53ea2057ba264107e854 Mon Sep 17 00:00:00 2001
From: rishav_dml <rishav.jaiswal@digimantra.com>
Date: Thu, 9 Jan 2025 12:05:25 +0530
Subject: [PATCH] Added: Favourite list feature

---
 src/components/Card.jsx                 |  4 +-
 src/components/Star.jsx                 | 10 ++--
 src/hooks/{useFetch.jsx => useFetch.js} |  0
 src/pages/HomePage.jsx                  | 72 +++++++++++++++++++++----
 4 files changed, 67 insertions(+), 19 deletions(-)
 rename src/hooks/{useFetch.jsx => useFetch.js} (100%)

diff --git a/src/components/Card.jsx b/src/components/Card.jsx
index 5bed6ce..ae43117 100644
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -2,10 +2,10 @@ import React from "react";
 import Star from "./Star";
 
 const Card = ({ movie, favouriteList, setFavouriteList }) => {
-    const { Title, Year, imdbID, Poster } = movie;
+    const { Title, Year, Poster } = movie;
     return (
         <div className="relative h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary bg-secondary">
-            {favouriteList?.includes(imdbID) ? (
+            {favouriteList?.includes(movie) ? (
                 <Star
                     fill="#FFD700"
                     favouriteList={favouriteList}
diff --git a/src/components/Star.jsx b/src/components/Star.jsx
index 398b6be..cf6428e 100644
--- a/src/components/Star.jsx
+++ b/src/components/Star.jsx
@@ -22,14 +22,12 @@ const Star = ({
     }
 
     const handleFavouriteList = () => {
-        favouriteList?.includes(movie?.imdbID)
+        favouriteList?.includes(movie)
             ? setFavouriteList((prevList) =>
-                  prevList?.filter((id) => id !== movie?.imdbID)
+                  prevList?.filter((movieItem) => movieItem !== movie)
               )
-            : setFavouriteList((prevList) => [...prevList, movie?.imdbID]);
-        let localStorageData = JSON.parse(window.localStorage.getItem("favouriteMovies"));
-        console.log(localStorageData)
-        window.localStorage.setItem("favouriteMovies", JSON.stringify({movies: [...localStorageData, movie]}));
+            : setFavouriteList((prevList) => [...prevList, movie]);
+        
     };
 
     return (
diff --git a/src/hooks/useFetch.jsx b/src/hooks/useFetch.js
similarity index 100%
rename from src/hooks/useFetch.jsx
rename to src/hooks/useFetch.js
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 2470691..11f8304 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import useFetch from "../hooks/useFetch";
 
 import { Pagination } from "@mui/material";
@@ -11,8 +11,16 @@ const HomePage = () => {
     const [inputValue, setInputValue] = useState("");
     const [searchValue, setSearchValue] = useState("");
     const [page, setPage] = useState(1);
-    const [favouriteList, setFavouriteList] = useState([]);
+    const [favouriteList, setFavouriteList] = useState(
+        JSON.parse(window.localStorage.getItem("favouriteMovies")) ?? []
+    );
     const [showFavourite, setShowFavourite] = useState(false);
+
+    useEffect(() => {
+        window.localStorage.setItem("favouriteMovies", JSON.stringify(favouriteList))
+        console.log(favouriteList);
+    }, [favouriteList]);
+
     const { data, loading, error } = useFetch(
         url + "&s=" + searchValue + "&page=" + page
     );
@@ -57,15 +65,15 @@ const HomePage = () => {
             </div>
             {(showFavourite && (
                 <div className="grid grid-cols-5 gap-4 mb-6 justify-center">
-                {favouriteList?.map((movie) => (
-                    <Card
-                        key={movie?.imdbID}
-                        movie={movie}
-                        setFavouriteList={setFavouriteList}
-                        favouriteList={favouriteList}
-                    />
-                ))}
-            </div>
+                    {favouriteList?.map((movie) => (
+                        <Card
+                            key={movie?.imdbID}
+                            movie={movie}
+                            setFavouriteList={setFavouriteList}
+                            favouriteList={favouriteList}
+                        />
+                    ))}
+                </div>
             )) ||
                 (data?.Search?.length > 0 && (
                     <div className="flex flex-col items-center m-10">
@@ -101,3 +109,45 @@ const HomePage = () => {
 };
 
 export default HomePage;
+
+function SearchBar({
+    inputValue,
+    event,
+    setInputValue,
+    target,
+    value,
+    handleSearch,
+    setShowFavourite,
+    prev,
+}) {
+    return (
+        <div className="flex items-center gap-10">
+            <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-secondary focus:bg-secondary rounded outline-none border border-ternary"
+                />
+                <button
+                    type="button"
+                    className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
+                    onClick={handleSearch}
+                >
+                    Search
+                </button>
+            </form>
+            <div className="">
+                <label htmlFor="favourite">Favourites</label>
+                <input
+                    type="checkbox"
+                    name="favourite"
+                    id="favourite"
+                    onClick={() => setShowFavourite((prev) => !prev)}
+                />
+            </div>
+        </div>
+    );
+}