Claro, Rafael!
CONTEXTOS ->Favorito.js
:
import { createContext, useContext, useState } from 'react'
export const FavoritosContext = createContext()
FavoritosContext.displayName = 'Favoritos'
export default function FavoritosProvider({ children }) {
const [favorito, setFavorito] = useState([])
return (
<FavoritosContext.Provider
value= {{ favorito, setFavorito }}>
{children}
</FavoritosContext.Provider>
)
}
export function useFavoritoContext() {
const { favorito, setFavorito } = useContext(FavoritosContext)
function adicionarFavorito(novoFavorito) {
const favoritoRepetido = favorito.some(item => item.id === novoFavorito.id)
let novaLista = [...favorito]
if(!favoritoRepetido) {
novaLista.push(novoFavorito)
return setFavorito(novaLista)
}
novaLista.splice(novaLista.indexOf(novoFavorito), 1)
return setFavorito(novaLista)
}
return {
favorito,
adicionarFavorito
}
}
CARD -> index.js
:
import { useFavoritoContext } from 'contextos/Favoritos'
import styles from './Card.module.css'
import iconeFavoritar from './favoritar.png'
import iconeDesfavoritar from './desfavoritar.png'
export default function Card({ id, titulo, capa }) {
const { favorito, adicionarFavorito } = useFavoritoContext()
const ehFavorito = favorito.some((fav) => fav.id === id)
const icone = !ehFavorito ? iconeFavoritar : iconeDesfavoritar
return (
<div className={styles.container}>
<img
src={capa}
alt={titulo}
className={styles.capa}
/>
<h2>{titulo}</h2>
<img
src={icone}
alt="Favoritar filme"
className={styles.favoritar}
onClick={() => {
adicionarFavorito({ id, titulo, capa })
}}
/>
</div>
)
}