72 lines
3.1 KiB
JavaScript
72 lines
3.1 KiB
JavaScript
import { useSelector } from "react-redux"
|
|
import { useParams } from "react-router"
|
|
//redux
|
|
import { findRecipeById } from "../../redux/slices/recipesSlice"
|
|
|
|
import Header from "../../components/Header"
|
|
import { ArrowBack } from "../styles/page"
|
|
import { Wrapper, WrapperRecipe } from "./styles/addRecipe"
|
|
import { Ingredient } from "../../components/recipes/addRecipe/Ingredient"
|
|
import { Title, InstructionWrapper, InstructionNumber, StyledImage, TextPrep, TextTime, TextMinutes, WrapperServings, TextServings, IconPotLarge, IconMeal, Hr } from "./styles/recipe"
|
|
import { OptionsButtonRecipe, AddIngredientsButton } from "../../components/recipes/addRecipe/Buttons"
|
|
import { Text, View } from "react-native"
|
|
import HeaderPadding from "../../components/Header"
|
|
|
|
const Recipe = () => {
|
|
let { id } = useParams()
|
|
const recipe = useSelector(state => findRecipeById(state, id))
|
|
const IngredientList = recipe.ingredients.map((ingredient, index) => {
|
|
return (<Ingredient ingredient={ingredient} index={index} key={index} />)
|
|
}
|
|
)
|
|
|
|
let strArr = recipe.instructions.split("- ")
|
|
const InstructionList = strArr.map((instruction, index) => {
|
|
return index !== 0 && (<InstructionWrapper key={index} >
|
|
<View><InstructionNumber>{index}</InstructionNumber></View>
|
|
<Text id="instruction">{instruction}</Text>
|
|
</InstructionWrapper>)
|
|
})
|
|
return (
|
|
<>
|
|
<HeaderPadding/>
|
|
<Wrapper >
|
|
{recipe.image && <StyledImage src={recipe.image} />}
|
|
<WrapperRecipe>
|
|
<Text>{recipe.name}</Text>
|
|
<Hr />
|
|
{recipe.prepTime !== 0 && recipe.prepTime && <>
|
|
<View id="row" style={{ position: 'relative', marginTop: 0 }} >
|
|
{/* <IconPotLarge /> */}
|
|
<TextPrep>READY IN:</TextPrep>
|
|
<View id="column" >
|
|
<TextTime>{recipe.prepTime}</TextTime>
|
|
<TextMinutes>minutes</TextMinutes>
|
|
</View>
|
|
{recipe.servings !== 0 && recipe.servings && <>
|
|
<WrapperServings>
|
|
{/* <IconMeal /> */}
|
|
<View>
|
|
<TextTime>{recipe.servings}</TextTime>
|
|
<TextServings>servings</TextServings>
|
|
</View>
|
|
</WrapperServings>
|
|
</>}
|
|
</View>
|
|
<Hr />
|
|
</>}
|
|
|
|
<View style={{ width: '100%' }}>
|
|
<Title>Ingredients</Title>
|
|
{IngredientList}
|
|
<Hr />
|
|
<Title>Instructions</Title>
|
|
{InstructionList}
|
|
</View>
|
|
</WrapperRecipe>
|
|
</Wrapper>
|
|
<AddIngredientsButton id={id} />
|
|
</>
|
|
)
|
|
}
|
|
export default Recipe |