Untitled
unknown
plain_text
a year ago
3.6 kB
5
Indexable
import React, { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; import clipboardCopy from 'clipboard-copy'; import compartilharLink from '../../images/shareIcon.svg'; import { ProfileIco } from '../Header/ProfileIco'; import { Title } from '../Header/Title'; type DoneRecipesType = { id: string; type: string; name: string; category: string; nationality: string; doneDate: string; image: string; tags: string[]; alcoholicOrNot?: string; }; type BoardType = Record<string, boolean>; export default function DoneRecipes() { const [doneRecipes, setDoneRecipes] = useState<DoneRecipesType[]>([]); const [storage, setStorage] = useState<DoneRecipesType[]>([]); const [board, setBoard] = useState<BoardType>({}); const copia = clipboardCopy; useEffect(() => { const getLocalStorage: DoneRecipesType[] = JSON.parse(localStorage.getItem('doneRecipes') || '[]'); setDoneRecipes(getLocalStorage); setStorage(getLocalStorage); const getId = getLocalStorage.reduce((acc: BoardType, curr: DoneRecipesType) => ( { ...acc, [curr.id]: false } ), {}); setBoard(getId); }, []); function getMeals() { const filterMeals = storage.filter((item) => ( item.type === 'meals' )); setDoneRecipes(filterMeals); } function getDrinks() { const filterDrinks = storage.filter((item) => ( item.type === 'drinks' )); setDoneRecipes(filterDrinks); } function getAll() { setDoneRecipes(storage); } async function btnShare(url: string, id: string) { setBoard({ ...board, [id]: true }); await copia(`${window.location.origin}${url}`); } return ( <> <div> <Title>Done Recipes</Title> <ProfileIco /> </div> <div> <button onClick={ getAll } data-testid="filter-by-all-btn">All</button> <button onClick={ getMeals } data-testid="filter-by-meal-btn">Meals</button> <button onClick={ getDrinks } data-testid="filter-by-drink-btn">Drinks</button> {doneRecipes.map((recipe, index: number) => ( <div key={ index }> <Link to={ `/${recipe.type}s/${recipe.id}` }> <img src={ recipe.image } alt="recipe" data-testid={ `${index}-horizontal-image` } /> </Link> <p data-testid={ `${index}-horizontal-top-text` }> {`${recipe.nationality} - ${recipe.category}`} </p> <Link to={ `/${recipe.type}s/${recipe.id}` }> <p data-testid={ `${index}-horizontal-name` }>{recipe.name}</p> </Link> <p data-testid={ `${index}-horizontal-done-date` }>{recipe.doneDate}</p> {recipe.tags.map((tag: string, i: number) => ( <p key={ i } data-testid={ `${index}-${tag}-horizontal-tag` }>{tag}</p> ))} {recipe.alcoholicOrNot && ( <p data-testid={ `${index}-horizontal-top-text` } > {recipe.alcoholicOrNot} </p> )} <button type="button" onClick={ () => btnShare(`/${recipe.type}s/${recipe.id}`, `${recipe.id}`) } > {board[recipe.id] && <h3>Link copied!</h3>} <img data-testid={ `${index}-horizontal-share-btn` } src={ compartilharLink } alt="compartilhar" /> </button> </div> ))} </div> </> ); }
Editor is loading...