cscough/Movie_Search
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip - got context working with favorites page using interleaving

Browse Source
This commit is contained in:
cscough 2024-05-24 15:51:51 -04:00
parent 9acb10e643
commit acca5c387f
7 changed files with 48 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
movie-search/src/app/Favorites/favoriteList.tsx
View File

@ -1,15 +1,15 @@
'use client'
import { FavoriteContext } from "@/components/FavoriteContext"; import { FavoriteContext } from "@/components/FavoriteContext";
import { useState } from "react"; import { useContext } from "react";
export default () => { export default () => {
const [favorites, setFavorites] = useState([]); const {favorites} = useContext(FavoriteContext)
return ( return (
<FavoriteContext.Provider value={{ favorites, setFavorites }}>
<ul> <ul>
{favorites.map((f, i) => ( {favorites.map((f, i) => (
<li key={i}>{f}</li> <li key={i}>{f.Title}</li>
))} ))}
</ul> </ul>
</FavoriteContext.Provider>
); );
}; };

3
movie-search/src/app/Favorites/page.tsx
View File

@ -1,9 +1,10 @@
import FavoriteList from "./favoriteList";
export default () => { export default () => {
// TODO: add context provider
return ( return (
<div> <div>
<h1>Your Favorites!</h1> <h1>Your Favorites!</h1>
<FavoriteList/>
</div> </div>
); );
}; };

16
movie-search/src/app/Search/MovieCard.tsx
View File

@ -41,13 +41,15 @@ export default ({ movie }: IMovieCardProps) => {
<h3 className="mb-2 text-lg font-semibold">{movie.Title}</h3> <h3 className="mb-2 text-lg font-semibold">{movie.Title}</h3>
<p className="mb-2 text-sm text-gray-700">Circa: {movie.Year}</p> <p className="mb-2 text-sm text-gray-700">Circa: {movie.Year}</p>
</div> </div>
<Link <div className="flex gap-3">
href={`/Movie?i=${movie.imdbID}`} <Link
className="block rounded-lg bg-purple-500 px-4 py-2 text-center font-semibold text-white hover:bg-purple-600" 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> Movie Details
<FavoriteBtn movie={movie} /> </Link>
<FavoriteBtn movie={movie} />
</div>
</ImgCard> </ImgCard>
); );
}; };

1
movie-search/src/app/Search/page.tsx
View File

@ -16,6 +16,7 @@ export const stringifyQueryParams = (searchParams: object) =>
export default async ({ searchParams }: INextJsProps) => { export default async ({ searchParams }: INextJsProps) => {
const queryParamString = stringifyQueryParams(searchParams!); const queryParamString = stringifyQueryParams(searchParams!);
console.log(queryParamString)
const { Search } = await queryOMDb(queryParamString); const { Search } = await queryOMDb(queryParamString);
const movies = Search || []; const movies = Search || [];

3
movie-search/src/app/layout.tsx
View File

@ -2,6 +2,7 @@ import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import NavBar from "@/components/navBar"; import NavBar from "@/components/navBar";
import { FavoriteProvider } from "@/components/FavoriteContext";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -19,7 +20,9 @@ export default function RootLayout({
<html lang="en"> <html lang="en">
<body className={`${inter.className} mb-4`}> <body className={`${inter.className} mb-4`}>
<NavBar /> <NavBar />
<FavoriteProvider>
{children} {children}
</FavoriteProvider>
</body> </body>
</html> </html>
); );

13
movie-search/src/components/FavoriteBtn.tsx
View File

@ -5,13 +5,20 @@ import { FavoriteContext } from "./FavoriteContext";
export default ({ movie }: any) => { export default ({ movie }: any) => {
const { favorites, setFavorites } = useContext(FavoriteContext); 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 ( return (
<button <button
onClick={() => { 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> </button>

21
movie-search/src/components/FavoriteContext.tsx
View File

@ -1,5 +1,20 @@
import { createContext } from "react"; 'use client'
export const FavoriteContext = createContext({ 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: [], 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>
)
}