remake app ohome setup /notworking

2021-10-24 22:18:31 +02:00
parent 4568076445
commit 55c6704d1b
76 changed files with 22173 additions and 749 deletions
--- a/src/components/modals/recipes/ModalAddIngredients.js
+++ b/src/components/modals/recipes/ModalAddIngredients.js
@@ -0,0 +1,104 @@
+import React, { useState } from 'react'
+import styled from "styled-components"
+import { CgFile } from "react-icons/cg"
+import { GiMeal } from "react-icons/gi"
+
+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
+} from '../styles/modal'
+import Ingredient from '../../recipes/Ingredient&Button'
+import { itemAdded } from '../../../redux/slices/groceryList/itemsSlice'
+import Dropdown from '../../Dropdown'
+
+const IconList = styled(CgFile)`
+    font-size: 16px;
+    color: ${({ theme }) => theme.colors.primaryVar};
+`
+const IconMeal = styled(GiMeal)`
+    font-size: 16px;
+    color: ${({ theme }) => theme.colors.primaryVar};
+`
+
+
+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 show={props.visible} centered={true} onHide={props.closeModal} animation={false}>
+            <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}
+                    onChange={(text) => setListName(text.target.value)}
+                    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 }}
+                    type="number"
+                    value={servings}
+                    onChange={(text) => setServings(Number(text.target.value))}
+                    min={amountOfServings}
+                    step={amountOfServings}
+                    placeholder="Multiplier" />
+                <p style={{ marginLeft: 5 }}>servings</p>
+            </WrapperInput>
+            {IngredientsList}
+            <WrapperButtons>
+                <Button onClick={props.closeModal}>Close</Button>
+                <VerticalSeperator />
+                <Button onClick={() => handleSubmit()}>Add</Button>
+            </WrapperButtons>
+        </StyledModal >
+    )
+}
+export default ModalAddIngredients