favorites

favorites-context.js

import { createContext, useState } from "react";

const FavoritesContext = createContext({
	favorites: [],
	totalFavorites: 0,
	addFavorite: (favoriteMeetup) => {},
	removeFavorite: (meetupId) => {},
	itemIsFavorite: (meetupId) => {}
});

export function FavoritesContextProvider(props) {
	const [userFavorites, setUserFavorites] = useState([]);

	function addFavoriteHander(favoriteMeetup){
		setUserFavorites((prevUserFavorites) => {
			return prevUserFavorites.concat(favoriteMeetup);
		});
	}

	function removeFavoriteHander(meetupId){
		setUserFavorites((prevUserFavorites) => {
			return prevUserFavorites.filter(meetup => meetup.id !== meetupId);
		});
	}

	function itemIsFavoriteHander(meetupId) {
		return userFavorites.some(meetup => meetup.id === meetupId);
	}

	const context = {
		favorites: userFavorites,
		totalFavorites: userFavorites.length,
		addFavorite: addFavoriteHander,
		removeFavorite: removeFavoriteHander,
		itemIsFavorite: itemIsFavoriteHander
	};

	return <FavoritesContext.Provider value={context}>
		{props.children}
	</FavoritesContext.Provider>
}

export default FavoritesContext;

Favorites.js

import { useContext } from 'react';

import FavoritesContext from '../store/favorites-context';
import MeetupList from '../components/meetups/MeetupList';

function FavoritesPage() {
	const favoritesCtx = useContext(FavoritesContext);

	let content;

	if (favoritesCtx.totalFavorites === 0){
		content = <p>you got no favorites yet. start adding some?</p>
	}else {
		content = <MeetupList meetups={favoritesCtx.favorites} />
	}

	return <section>
		<h1>My Favorites</h1>
		{content}
	</section>;
}

export default FavoritesPage;

MeetupItem.js

function MeetupItem(props) {
	const favoritesCtx = useContext(FavoritesContext);

	const itemIsFavorite = favoritesCtx.itemIsFavorite(props.id);

	function toggleFavoritesStatusHander(){
		if (itemIsFavorite) {
			favoritesCtx.removeFavorite(props.id);
		} else {
			favoritesCtx.addFavorite({
				id: props.id,
				title: props.title,
				description: props.description,
				image: props.image,
				address: props.address,
			})
		}
	} 

	return (
		...
        
        className={classes.actions}>
					<button onClick={toggleFavoritesStatusHander}>
						{itemIsFavorite ? 'Remove from Favorites' : 'To Favorites'}
					</button>
				</div>
			</Card>
		</li>
	);
}