Movie_Search/movie-search/src/components/FavoriteContext.tsx

20 lines
797 B
TypeScript

'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: (_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>
)
}