Untitled
unknown
plain_text
10 months ago
4.0 kB
2
Indexable
Never
import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import shareIcon from '../../images/shareIcon.svg'; import blackHeartIcon from '../../images/blackHeartIcon.svg'; type CategoryRecipeType = 'meal' | 'drink' | 'all'; type RecipeType = 'meal' | 'drink'; type Recipe = { id: number; name: string; type: RecipeType; image: string; category: string; nationality: string; alcoholicOrNot: string; }; function FavoriteRecipes() { const [favoriteRecipes, setFavoriteRecipes] = useState<Recipe[]>([]); const [filter, setFilter] = useState<CategoryRecipeType>(); const [linkCopied, setLinkCopied] = useState(false); useEffect(() => { const getFavoriteRecipes = () => { const storedFavoriteRecipes = localStorage.getItem('favoriteRecipes'); if (storedFavoriteRecipes) { const favoritedRecipes = JSON.parse(storedFavoriteRecipes); setFavoriteRecipes(favoritedRecipes); } }; getFavoriteRecipes(); setFilter('all'); }, []); const handleFilterChange = (selectedFilter: CategoryRecipeType) => { setFilter(selectedFilter); }; const removeFavoriteRecipe = (index: number) => { const storedFavoriteRecipes = localStorage.getItem('favoriteRecipes'); if (storedFavoriteRecipes) { const favoritedRecipes = JSON.parse(storedFavoriteRecipes); favoritedRecipes.splice(index, 1); localStorage.setItem('favoriteRecipes', JSON.stringify(favoritedRecipes)); setFavoriteRecipes(favoritedRecipes); } }; const copyFavoriteRecipeLink = (url: string) => { navigator.clipboard.writeText(url) .then(() => { setLinkCopied(true); window.alert('Link copied!'); }) .catch((error) => { console.error('Error copying to clipboard:', error); }); }; const filteredRecipes = filter === 'all' ? favoriteRecipes : favoriteRecipes.filter((recipe) => recipe.type === filter); return ( <div> <div> <button onClick={ () => handleFilterChange('all') } data-testid="filter-by-all-btn" > ALL </button> <button onClick={ () => handleFilterChange('meal') } data-testid="filter-by-meal-btn" > meals </button> <button onClick={ () => handleFilterChange('drink') } data-testid="filter-by-drink-btn" > drinks </button> </div> {filteredRecipes.map((recipe, index) => ( <div key={ recipe.id }> <Link to={ `/${recipe.type}s/${recipe.id}` } key={ recipe.id } > <h3 data-testid={ `${index}-horizontal-name` }>{recipe.name}</h3> <img src={ recipe.image } alt={ recipe.name } data-testid={ `${index}-horizontal-image` } style={ { width: '150px' } } /> </Link> <p data-testid={ `${index}-horizontal-top-text` }> { recipe.type === 'meal' ? `${recipe.nationality} - ${recipe.category}` : `${recipe.alcoholicOrNot}` } </p> <button onClick={ () => copyFavoriteRecipeLink(`http://localhost:3000/${recipe.type}s/${recipe.id}`) }> {linkCopied ? 'Link copied!' : ( <img data-testid={ `${index}-horizontal-share-btn` } src={ shareIcon } alt="Share" /> )} </button> <button onClick={ () => removeFavoriteRecipe(index) }> <img data-testid={ `${index}-horizontal-favorite-btn` } src={ blackHeartIcon } alt="Favorite" /> </button> </div> ))} </div> ); } export default FavoriteRecipes;