Movie_Search/movie-search/src/common/components/FavoriteBtn.tsx

35 lines
921 B
TypeScript

"use client";
import { useContext } from "react";
import { FavoriteContext } from "./FavoriteContext";
export default function FavoriteBtn({ movie }: any) {
const { favorites,
dispatch
// setFavorites
} = useContext(FavoriteContext);
const filteredFavorites = favorites.filter((f) => f.imdbID != movie.imdbID);
const isFavorite =
favorites.filter((f) => f.imdbID == movie.imdbID).length == 1;
return (
<button
onClick={() => {
if (isFavorite) {
dispatch({type:'Remove', payload: movie})
// setFavorites([...filteredFavorites]);
} else {
dispatch({type:'Add', payload: movie})
// setFavorites([...favorites, movie]);
}
}}
className={`block text-yellow-500 rounded my-auto h-8 w-8
${
isFavorite ? " bg-black" : "border-2 border-gray-300 bg-white"
}`}
>
</button>
);
}