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 ( - - ); }; 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 (

Your Favorites!

+
); }; 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) => {

{movie.Title}

Circa: {movie.Year}

- - Movie Details - - +
+ + Movie Details + + +
); }; 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({ + {children} + ); 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 ( 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 + setFavorites: (value: Array) => void +} +export const FavoriteContext = createContext({ favorites: [], -// setFavorites: () => {}, + setFavorites: (_value: Array) => { }, }); + +// 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>([]) + return ( + {children} + ) +} \ No newline at end of file