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/pages/recipes/AddRecipe.js
+++ b/src/pages/recipes/AddRecipe.js
@@ -0,0 +1,113 @@
+import { Text, View } from 'react-native'
+//components
+import Header from "../../components/Header"
+import { ArrowBack } from "../styles/page";
+import { Ingredients } from "../../components/recipes/addRecipe/Inputs";
+//styling
+import { Wrapper, WrapperRecipe, Input, InputInstructions, IconRecipe, IconPot, IconMeal, IconImage, IconCheck } from "./styles/addRecipe"
+import { useState } from "react";
+import { addRecipe, findRecipeById, updateRecipe } from "../../redux/slices/recipesSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { StyledImage } from "./styles/recipe";
+import HeaderPadding from '../../components/Header';
+
+const AddRecipe = () => {
+    let { id } = useParams()
+    const foundRecipe = useSelector(state => findRecipeById(state, id))
+    let recipe = foundRecipe ? foundRecipe : { name: '', prepTime: '', servings: '', image: '', ingredients: [], instructions: '' }
+    const dispatch = useDispatch()
+    const [name, setName] = useState(recipe.name)
+    const [prepTime, setPrepTime] = useState(recipe.prepTime)
+    const [servings, setServings] = useState(recipe.servings)
+    const [image, setImage] = useState(recipe.image)
+    const [ingredients, setIngredients] = useState(recipe.ingredients)
+    const [instructions, setInstructions] = useState(recipe.instructions)
+
+    const handleImageInput = (input) => {
+        if (input.target.files && input.target.files[0] && input.target.files[0].size < 1000000) {
+            let reader = new FileReader()
+            reader.onload = function (e) {
+                setImage(e.target.result)
+            };
+            reader.readAsDataURL(input.target.files[0])
+        }
+        else {
+            alert("That file is too big! Choose an image with a size lower than 1MB")
+        }
+    }
+    const submitRecipe = () => {
+        if (name && ingredients && instructions) {
+            foundRecipe ? dispatch(updateRecipe({ _id: foundRecipe._id, name, prepTime: Number(prepTime), servings: Number(servings), image, ingredients, instructions }))
+                : dispatch(addRecipe({ name, prepTime: Number(prepTime), servings: Number(servings), image, ingredients, instructions }))
+            console.log(typeof (image))
+        }
+        else {
+            alert("You should add a name, at least one ingredient and the instructions")
+        }
+    }
+    const handleInput = (event) => {
+        let lastChar = event.target.value.substr(-1).charCodeAt(0);
+        let penultimateChar = event.target.value.substr(-2).charCodeAt(0);
+
+        if (instructions === '') {
+            setInstructions("- " + event.target.value)
+            return
+        }
+        else if (penultimateChar === 10 && lastChar === 45) {
+            setInstructions(instructions.slice(0, instructions.length - 3))
+            return
+        }
+        else if (lastChar === 10) {
+            setInstructions(event.target.value + "- ")
+            return
+        }
+        setInstructions(event.target.value)
+    }
+    return (
+        <>
+            <HeaderPadding/>
+            <Wrapper >
+                {image && <StyledImage src={image} alt="Recipe" />}
+                <WrapperRecipe>
+                    <View id="row">
+                        <IconRecipe />
+                        <Input
+                            type="text"
+                            value={name}
+                            onChange={(text) => setName(text.target.value)}
+                            placeholder="Recipe name" />
+                    </View>
+                    <View id="row">
+                        <IconPot />
+                        <Input
+                            type="number"
+                            value={prepTime}
+                            onChange={(text) => setPrepTime(text.target.value)}
+                            placeholder="Prep time (min)" />
+                        <IconMeal />
+                        <Input
+                            type="number"
+                            value={servings}
+                            onChange={(text) => setServings(text.target.value)}
+                            placeholder="Servings" />
+                    </View>
+                    <View id="row">
+                        <IconImage />
+                        <Input
+                            style={{ borderBottom: 'none' }}
+                            type="file" accept="image/*"
+                            onChange={input => handleImageInput(input)} />
+                    </View>
+                    <Ingredients ingredients={ingredients} setIngredients={setIngredients} />
+                    <InputInstructions
+                        type="text"
+                        value={instructions}
+                        onChange={(text) => handleInput(text)}
+                        placeholder='Instructions' />
+                </WrapperRecipe>
+            </Wrapper>
+        </>
+    )
+}
+
+export default AddRecipe