Untitled
unknown
plain_text
22 days ago
1.7 kB
2
Indexable
Never
import { useEffect, useState } from 'react'; import { Container, Header, HeaderTitle, IconButton, LogoHeader, WrapperButtons, WrapperIconsFavorite, WrapperHeaderTitle, } from './styles'; import shareImg from '../../images/share.svg'; import likeImg from '../../images/like.svg'; import dessertImg from '../../images/dessert.svg'; const initialStateRecipe = { strMeal: '', strInstructions: '', strMealThumb: '', }; export function RecipeInProgress() { const [recipe, setRecipe] = useState(initialStateRecipe); function getRecipeById(id: number) { fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`) .then((response) => { if (response.ok) { return response.json(); } throw new Error('Erro ao buscar as refeições'); }) .then((data) => { const { meals } = data; const { strMeal, strInstructions, strMealThumb } = meals[0]; setRecipe({ strMeal, strInstructions, strMealThumb }); }).catch((error) => { console.error('Erro ao buscar as refeições:', error); }); } useEffect(() => { getRecipeById(52772); }, []); const { strMeal, strInstructions, strMealThumb } = recipe; return ( <Container> <Header imgSrc={ strMealThumb }> <WrapperIconsFavorite> <LogoHeader src={ dessertImg } /> <WrapperButtons> <IconButton imgSrc={ shareImg } /> <IconButton imgSrc={ likeImg } /> </WrapperButtons> </WrapperIconsFavorite> <WrapperHeaderTitle> <HeaderTitle>{strMeal}</HeaderTitle> </WrapperHeaderTitle> </Header> </Container> ); }