From acca5c387f4924ba4ddd74557415f3332743600d Mon Sep 17 00:00:00 2001
From: cscough <curtiscoughenour0@gmail.com>
Date: Fri, 24 May 2024 15:51:51 -0400
Subject: [PATCH] wip - got context working with favorites page using
 interleaving

---
 .../src/app/Favorites/favoriteList.tsx        | 10 ++++-----
 movie-search/src/app/Favorites/page.tsx       |  3 ++-
 movie-search/src/app/Search/MovieCard.tsx     | 16 +++++++-------
 movie-search/src/app/Search/page.tsx          |  1 +
 movie-search/src/app/layout.tsx               |  3 +++
 movie-search/src/components/FavoriteBtn.tsx   | 13 +++++++++---
 .../src/components/FavoriteContext.tsx        | 21 ++++++++++++++++---
 7 files changed, 48 insertions(+), 19 deletions(-)

diff --git a/movie-search/src/app/Favorites/favoriteList.tsx b/movie-search/src/app/Favorites/favoriteList.tsx
index 8d8e594..9268b58 100644
--- a/movie-search/src/app/Favorites/favoriteList.tsx
+++ b/movie-search/src/app/Favorites/favoriteList.tsx
@@ -1,15 +1,15 @@
+'use client'
+
 import { FavoriteContext } from "@/components/FavoriteContext";
-import { useState } from "react";
+import { useContext } from "react";
 
 export default () => {
-  const [favorites, setFavorites] = useState([]);
+  const {favorites} = useContext(FavoriteContext)
   return (
-    <FavoriteContext.Provider value={{ favorites, setFavorites }}>
       <ul>
         {favorites.map((f, i) => (
-          <li key={i}>{f}</li>
+          <li key={i}>{f.Title}</li>
         ))}
       </ul>
-    </FavoriteContext.Provider>
   );
 };
diff --git a/movie-search/src/app/Favorites/page.tsx b/movie-search/src/app/Favorites/page.tsx
index 5deb551..20b4f85 100644
--- a/movie-search/src/app/Favorites/page.tsx
+++ b/movie-search/src/app/Favorites/page.tsx
@@ -1,9 +1,10 @@
+import FavoriteList from "./favoriteList";
 
 export default () => {
-  // TODO: add context provider
   return (
     <div>
       <h1>Your Favorites!</h1>
+      <FavoriteList/>
     </div>
   );
 };
diff --git a/movie-search/src/app/Search/MovieCard.tsx b/movie-search/src/app/Search/MovieCard.tsx
index 62f569f..8a80729 100644
--- a/movie-search/src/app/Search/MovieCard.tsx
+++ b/movie-search/src/app/Search/MovieCard.tsx
@@ -41,13 +41,15 @@ export default ({ movie }: IMovieCardProps) => {
         <h3 className="mb-2 text-lg font-semibold">{movie.Title}</h3>
         <p className="mb-2 text-sm text-gray-700">Circa: {movie.Year}</p>
       </div>
-      <Link
-        href={`/Movie?i=${movie.imdbID}`}
-        className="block rounded-lg bg-purple-500 px-4 py-2 text-center font-semibold text-white hover:bg-purple-600"
-      >
-        Movie Details
-      </Link>
-      <FavoriteBtn movie={movie} />
+      <div className="flex gap-3">
+        <Link
+          href={`/Movie?i=${movie.imdbID}`}
+          className="block rounded-lg bg-purple-500 px-4 py-2 text-center font-semibold text-white hover:bg-purple-600"
+        >
+          Movie Details
+        </Link>
+        <FavoriteBtn movie={movie} />
+      </div>
     </ImgCard>
   );
 };
diff --git a/movie-search/src/app/Search/page.tsx b/movie-search/src/app/Search/page.tsx
index e4e9a9d..bf4332f 100644
--- a/movie-search/src/app/Search/page.tsx
+++ b/movie-search/src/app/Search/page.tsx
@@ -16,6 +16,7 @@ export const stringifyQueryParams = (searchParams: object) =>
 
 export default async ({ searchParams }: INextJsProps) => {
   const queryParamString = stringifyQueryParams(searchParams!);
+  console.log(queryParamString)
   const { Search } = await queryOMDb(queryParamString);
   const movies = Search || [];
 
diff --git a/movie-search/src/app/layout.tsx b/movie-search/src/app/layout.tsx
index 52e521e..7773a94 100644
--- a/movie-search/src/app/layout.tsx
+++ b/movie-search/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import NavBar from "@/components/navBar";
+import { FavoriteProvider } from "@/components/FavoriteContext";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,7 +20,9 @@ export default function RootLayout({
     <html lang="en">
       <body className={`${inter.className} mb-4`}>
         <NavBar />
+        <FavoriteProvider>
         {children}
+        </FavoriteProvider>
       </body>
     </html>
   );
diff --git a/movie-search/src/components/FavoriteBtn.tsx b/movie-search/src/components/FavoriteBtn.tsx
index 81781a6..d2348a9 100644
--- a/movie-search/src/components/FavoriteBtn.tsx
+++ b/movie-search/src/components/FavoriteBtn.tsx
@@ -5,13 +5,20 @@ import { FavoriteContext } from "./FavoriteContext";
 
 export default ({ movie }: any) => {
   const { favorites, setFavorites } = useContext(FavoriteContext);
-  console.log("favorites", favorites);
+  const filteredFavorites = favorites.filter(f => f.imdbID != movie.imdbID)
+  const isFavorite = favorites.filter(f => f.imdbID == movie.imdbID).length == 1
+
   return (
     <button
       onClick={() => {
-        setFavorites([...favorites, movie]);
+        if (isFavorite) {
+          setFavorites([...filteredFavorites])
+        } else {
+
+          setFavorites([...favorites, movie]);
+        }
       }}
-      className="block text-yellow-500"
+      className={`block text-yellow-500 rounded my-auto w-6 ${isFavorite ? 'bg-black' : 'bg-white'}`}
     >
       ★
     </button>
diff --git a/movie-search/src/components/FavoriteContext.tsx b/movie-search/src/components/FavoriteContext.tsx
index 8c4f0c8..a22e26c 100644
--- a/movie-search/src/components/FavoriteContext.tsx
+++ b/movie-search/src/components/FavoriteContext.tsx
@@ -1,5 +1,20 @@
-import { createContext } from "react";
-export const FavoriteContext = createContext({
+'use client'
+import { IMovieCardItem } from "@/app/Search/MovieCard";
+import { PropsWithChildren, createContext, useState } from "react";
+
+interface IFavoriteContext {
+  favorites: Array<IMovieCardItem>
+  setFavorites: (value: Array<IMovieCardItem>) => void
+}
+export const FavoriteContext = createContext<IFavoriteContext>({
   favorites: [],
-//   setFavorites: () => {},
+  setFavorites: (_value: Array<IMovieCardItem>) => { },
 });
+
+// Using interleaving to render this context provider client-side, but still utilize server-side renderung for children components
+export const FavoriteProvider = ({ children }: PropsWithChildren) => {
+  const [favorites, setFavorites] = useState<Array<IMovieCardItem>>([])
+  return (
+    <FavoriteContext.Provider value={{ favorites, setFavorites }}>{children}</FavoriteContext.Provider>
+  )
+}
\ No newline at end of file