fix adding/removing items

client/src/app.js

@@ -12,7 +12,6 @@ function App() {
   const [boxDescription, setBoxDescription] = useState('');
   const [showFormBox, setShowFormBox] = useState(false);
   const [showBox, setShowBox] = useState(false);
-
   //fetch all box data
   useEffect(() => {
     const fetchData = async () => {
@@ -99,36 +98,43 @@ function App() {
   const createItem = async (id, itemData) => {
       try {
           const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
+          const boxData = [...data];
+          boxData.splice(boxData.findIndex(box => box._id === id),1,response.data);
+          setData(boxData);
       }
       catch (error) {
           console.log(error);
       }
   }
 
-  const removeItem = async (id) => {
+  const removeItem = async (boxID, itemID) => {
       try {
-          const response = await axios.delete(`${api.baseApiUrl}/${data._id}/item/${id}`);
-          //box data copy
-          let boxData = Object.assign({}, data);
-          boxData = Object.assign(boxData, {item: response.data})
+          const boxData = [...data];
+          const response = await axios.delete(`${api.baseApiUrl}/${boxID}/item/${itemID}`);
+          boxData.splice(boxData.findIndex(box => box._id === boxID),1,response.data);
+          setData(boxData);
       }
       catch (error) {
           console.log(error);
       }
   }
-  const handleAddItem = () => {
-      //setShowFormItem(true);
+  const handleAddItem = (id) => {
+    const boxData = [...data];
+    const index = boxData.findIndex(box => box._id === id);
+    boxData.forEach((box, boxIndex) => box.showItemForm = index === boxIndex);
+    setData(boxData);
   }
-  const handleRemoveItem = (id) => {
-      removeItem(id);
+  const handleRemoveItem = (boxID, itemID) => {
+      removeItem(boxID, itemID);
   }
   const handleSubmitItem = (event) => {
       event.preventDefault();
       clearForm();
-      const id = (event.target).querySelector("#id").value;
+      const formData = new FormData(event.target);      
+      const id = formData.get('id');
       const itemData = {
-          name: itemName,
-          description: itemDescription
+          name: formData.get('name'),
+          description: formData.get('description')
       }
       createItem(id, itemData);
       return false;
@@ -137,6 +143,7 @@ function App() {
   const itemHandler = {
       handleSubmit: handleSubmitItem,
       handleRemove: handleRemoveItem,
+      handleAddItem: handleAddItem,
   };
 
   const formNewBox =
@@ -163,7 +170,8 @@ function App() {
           <Box
             boxData={box}
             handleRemoveBox={boxHandler.handleRemove}
-            itemHandler={itemHandler} />
+            itemHandler={itemHandler}
+            />
         );
       })}
     </ul>      

client/src/box.js

@@ -31,16 +31,16 @@ const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
             <h2 className="box-title">{boxData.name}</h2>
             <div className="box-subtitle">
                 <h3>{boxData.description}</h3>
-                <button onClick={() => console.log('show form')}>add item</button>
+                <button onClick={() => itemHandler.handleAddItem(boxData._id)}>add item</button>
             </div>
             <ul className="list-box-item">
 
                 {boxData.item.map(((item) => {
-                    return <Item data={item} handleRemove={itemHandler.handleRemove} />
+                    return <Item data={item} boxID={boxData._id} handleRemove={itemHandler.handleRemove} />
                 }))}
             </ul>
             <button className="remove-box" onClick={() => handleRemoveBox(boxData._id)}>remove box</button>
-            {true && formNewItem}
+            {boxData.showItemForm && formNewItem}
         </li>
     )
 }

client/src/item.js

@@ -1,9 +1,10 @@
 import React, { useState, setState } from 'react';
 
-const item = ({ data, handleRemove }) => {
+const item = ({ data, handleRemove, boxID }) => {
+    console.log(boxID)
     return (<li className="item">
         <p className="item-name">{data.name}</p>
-        <button onClick={() => handleRemove(data._id)}>remove</button>
+        <button onClick={() => handleRemove(boxID, data._id)}>remove</button>
     </li>);
 };