finished lesson 72

src/App.js

@@ -14,7 +14,7 @@ function App() {
   const dispatch = useDispatch()
   useEffect(() => {
     dispatch(getIngredients())
-}, [])
+  }, [])
   return (
     <BrowserRouter>
         <Routes>

src/api/apiBurger.js

@@ -31,6 +31,13 @@ class ApiBurger {
             console.log(err)
         }
     }
+    updateIngredient = async (id, ingredient) => {
+        try {
+            await burgerInstance.put(`/ingredients/${id}.json`, ingredient)
+        } catch (err) {
+            console.log(err)
+        }
+    }
 }
 
 export const apiBurger = new ApiBurger()
\ No newline at end of file

src/containers/Ingredients/Ingredients.js

-import React from "react";
-import { useSelector } from "react-redux";
-
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import Button from '../../components/UI/Button/Button'
+import Modal from "../../components/UI/Modal/Modal";
+import {updateIngredient} from '../../store/ingredients.slice'
 
 const Ingredients = () => {
     const ingredients = useSelector(state => state.ingredients.ingredients)
+    const [showUpdateModal, setShowUpdateModal] = useState(false)
+    const [currentIngredient, setCurrentIngredient] = useState({})
+
+    const [currentKey, setCurrentKey] = useState('')
+    const dispatch = useDispatch()
+
+    const closeModal = () => {
+        setShowUpdateModal(false)
+        console.log(currentIngredient)
+    }
+    const openModal = (ingredient, key) => {
+        setCurrentIngredient(ingredient)
+        setCurrentKey(key)
+        setShowUpdateModal(true)
+    }
+    const inputHandler = (e) => {
+        setCurrentIngredient(prevState => {
+            if (e.target.name in prevState) {
+                return {...prevState, [e.target.name]: e.target.value}
+            } 
+            return {...prevState, style: {...prevState.style, [e.target.name]: e.target.value}}
+        })
+    }
+
+    const createForm = (obj, arr = []) => {
+        Object.keys(obj).forEach((key) => {
+            if (typeof obj[key] === 'object') {
+                createForm(obj[key], arr)
+            } else {
+                arr.push(<div key={key}><input name={key} value={obj[key]} onChange={inputHandler} /></div>)
+            }
+        })
+        return arr
+    }
+
+    const submitUpdate = (e) => {
+        e.preventDefault()
+        dispatch(updateIngredient({id: currentKey, ingredient: currentIngredient}))
+        setShowUpdateModal(false)
+    }
+
     return (
         <div>
+            <Modal
+                show={showUpdateModal}
+                closed={closeModal}
+            >
+                <form onSubmit={submitUpdate}>
+                    {createForm(currentIngredient)}
+                    <Button
+                        btnType={'Success'}
+                    >Accept</Button>
+                </form>
+            </Modal>
             {Object.keys(ingredients).map((key) => {
-                return <div key={key}>
+                return <div key={key}
+                    style={{border: '1px solid black', margin: '20px', padding: '20px'}}
+                >
                         <p>Name: {ingredients[key].name}</p>
                         <p>Price {ingredients[key].price}</p>
-                        <p>{JSON.stringify(ingredients[key].style)}</p>
+                        
                         <br/>
+                        <Button
+                            clicked={() => openModal(ingredients[key], key)}
+                            btnType={'Success'}
+                        >
+                            Update
+                        </Button>
                     </div>
             })}
         </div>

src/store/ingredients.slice.js

@@ -17,6 +17,14 @@ export const addNewIngredient = createAsyncThunk(
     }
 )
 
+export const updateIngredient = createAsyncThunk(
+    `${namespace}/updateIngredient`,
+    async (data, {dispatch}) => {
+        await apiBurger.updateIngredient(data.id, data.ingredient)
+        dispatch(getIngredients())
+    }
+)
+
 export const ingredientsSlice = createSlice({
     name: namespace,
     initialState: {
@@ -83,6 +91,15 @@ export const ingredientsSlice = createSlice({
         .addCase(addNewIngredient.fulfilled, (state) => {
             state.loading = false
         })
+        .addCase(updateIngredient.pending, (state) => {
+            state.loading = true
+        })
+        .addCase(updateIngredient.rejected, (state) => {
+            state.loading = false
+        })
+        .addCase(updateIngredient.fulfilled, (state) => {
+            state.loading = false
+        })
     }
 })