105 lines
4.7 KiB
JavaScript
105 lines
4.7 KiB
JavaScript
import React, { useState } from 'react'
|
|
import styled from "styled-components"
|
|
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
|
|
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { findRecipeById } from '../../../redux/slices/recipesSlice'
|
|
|
|
//styles
|
|
import {
|
|
StyledModal, ModalHeader, WrapperButtons, VerticalSeperator, Button, Input, WrapperDropdown, ModalDescription, WrapperInput, IconCheck, IconWrong, Wrapper, ButtonText
|
|
} from '../styles/modal'
|
|
import Ingredient from '../../recipes/Ingredient&Button'
|
|
import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
|
|
import Dropdown from '../../Dropdown'
|
|
import theme from '../../../styles/theme';
|
|
import { Text } from 'react-native';
|
|
|
|
const IconList = () => <MaterialCommunityIcons name="format-list-bulleted" color={theme.colors.primaryVar} size={16} />
|
|
|
|
const IconMeal = () => <MaterialCommunityIcons name="food" color={theme.colors.primaryVar} size={16} />
|
|
|
|
const ModalAddIngredients = (props) => {
|
|
const dispatch = useDispatch()
|
|
const recipe = useSelector(state => findRecipeById(state, props.id))
|
|
let amountOfServings = recipe.servings ? recipe.servings : 1
|
|
const lists = useSelector(state => state.lists.entities)
|
|
const [listName, setListName] = useState('')
|
|
const [focused, setFocused] = useState(false)
|
|
const [servings, setServings] = useState(amountOfServings)
|
|
let servingsMultiplier = Math.ceil(servings / amountOfServings)
|
|
const IngredientsList = recipe.ingredients.map((ingredient, index) => {
|
|
return (
|
|
<Ingredient key={index} recipeId={recipe._id} multiplier={servingsMultiplier} ingredient={ingredient} />
|
|
)
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
if (lists.find(list => list.listName === listName) && recipe.ingredients.find(ingredient => ingredient.checked)) {
|
|
console.log('were sending the ingredients baby')
|
|
recipe.ingredients.forEach(ingredient => ingredient.checked === true && dispatch(itemAdded({
|
|
productName: ingredient.productName,
|
|
amount: {
|
|
am: ingredient.amount * servingsMultiplier,
|
|
qt: ingredient.portion,
|
|
},
|
|
|
|
tag: ingredient.tag,
|
|
price: ingredient.price,
|
|
person: '',
|
|
details: `For ${recipe.name} (${ingredient.portion}) `,
|
|
listId: lists.find(list => list.listName === listName)._id
|
|
})))
|
|
props.closeModal()
|
|
}
|
|
else {
|
|
alert('You should fill in a valid grocery list and/or select at least 1 ingredient')
|
|
}
|
|
}
|
|
return (
|
|
<StyledModal isVisible={props.visible} animationIn={'slideInUp'} animationOut={'slideOutDown'}
|
|
onBackdropPress={props.closeModal}
|
|
onBackButtonPress={props.closeModal}
|
|
useNativeDriverForBackdrop
|
|
style={{margin: 0}} >
|
|
<Wrapper>
|
|
<ModalHeader>Add to grocerylist</ModalHeader>
|
|
<ModalDescription>Choose a grocery list and select the ingredients you would like to add to it</ModalDescription>
|
|
<WrapperInput>
|
|
<IconList />
|
|
<Input
|
|
style={{ fontSize: 20 }}
|
|
type="text"
|
|
value={listName}
|
|
onChangeText={(text) => setListName(text)}
|
|
onFocus={() => setFocused(true)} onBlur={() => { setTimeout(() => { setFocused(false) }, 100) }}
|
|
placeholder="Grocery list" />
|
|
{listName ? <IconCheck /> : <IconWrong />}
|
|
</WrapperInput>
|
|
{focused && <WrapperDropdown>
|
|
<Dropdown array={lists.map(list => list.listName)} text={listName} setElement={setListName} />
|
|
</WrapperDropdown>
|
|
}
|
|
<WrapperInput>
|
|
<IconMeal />
|
|
<Input
|
|
style={{ fontSize: 20, width: 100 }}
|
|
keyboardType={"number-pad"}
|
|
value={servings}
|
|
onChangeText={(text) => setServings(text)}
|
|
min={amountOfServings}
|
|
step={amountOfServings}
|
|
placeholder="Multiplier" />
|
|
<Text style={{ marginLeft: 5 }}>servings</Text>
|
|
</WrapperInput>
|
|
{IngredientsList}
|
|
<WrapperButtons>
|
|
<Button onPress={props.closeModal}><ButtonText>Close</ButtonText></Button>
|
|
<VerticalSeperator />
|
|
<Button onPress={() => handleSubmit()}><ButtonText>Add</ButtonText></Button>
|
|
</WrapperButtons>
|
|
</Wrapper>
|
|
</StyledModal >
|
|
)
|
|
}
|
|
export default ModalAddIngredients |