add edit items

client/src/app.js

@@ -15,8 +15,18 @@ function App() {
   const [showModalItem, setShowModalItem] = useState(false);
 
   const [editBoxBool, setEditBoxBool] = useState(false);
-  const [editDataBox, setEditDataBox] = useState({});
+  const [editItemBool, setEditItemBool] = useState(false);
 
+  const [itemID, setItemID] = useState();
+  const [itemName, setItemName] = useState('');
+  const [itemDescription, setItemDescription] = useState('');
+
+  const handleName = (e) => {
+      setItemName(e.target.value)
+  }
+  const handleDescription = (e) => {
+      setItemDescription(e.target.value)
+  }
 
   //fetch all box data
   useEffect(() => {
@@ -36,6 +46,7 @@ function App() {
     }
   }
 
+  // BOX FUNCTIONS ///////////////////////////////////////////////////////////////
   const createBox = async (boxData) => {
     try {
       const response = await axios.post(api.baseApiUrl, boxData);
@@ -54,6 +65,7 @@ function App() {
 
     }
   }
+
   const removeBox = async (id) => {
     try {
       const response = await axios.delete(`${api.baseApiUrl}/${id}`);
@@ -94,15 +106,8 @@ function App() {
     removeBox(id);
   }
   const handleAddBox = () => {
-    //open modal
     setShowModalBox(true);
   }
-  const clearForm = () => {
-    setEditBoxBool(false);
-    setBoxName('');
-    setBoxDescription('');
-    setBoxID(null);
-  }
   const handleEditBox = (id) => {
     const box = data.find(box => box._id === id);
     setEditBoxBool(true);
@@ -111,6 +116,13 @@ function App() {
     setBoxID(id);
     setShowModalBox(true);
   }
+  const clearForm = () => {
+    setEditBoxBool(false);
+    setBoxName('');
+    setBoxDescription('');
+    setBoxID(null);
+  }
+
   const boxHandler = {
     handleSubmit: handleSubmitBox,
     handleRemove: handleRemoveBox,
@@ -118,12 +130,13 @@ function App() {
     handleDescription: handleBoxDescription,
     handleEdit: handleEditBox
   };
+  // ITEM FUNCTIONS ///////////////////////////////////////////////////////////////
 
-  const createItem = async (id, itemData) => {
+  const createItem = async (boxID, itemData) => {
     try {
-      const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
+      const response = await axios.post(`${api.baseApiUrl}/${boxID}/item`, itemData);
       const boxData = [...data];
-      boxData.splice(boxData.findIndex(box => box._id === id), 1, response.data);
+      boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
       setData(boxData);
     }
     catch (error) {
@@ -131,6 +144,18 @@ function App() {
     }
   }
 
+  const editItem = async (boxID, itemID, itemData) => {
+    try {
+      const response = await axios.put(`${api.baseApiUrl}/${boxID}/item/${itemID}`, itemData);
+      const boxData = [...data];
+      boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
+      setData(boxData);
+    }
+    catch (error) {
+
+    }
+  }
+
   const removeItem = async (boxID, itemID) => {
     try {
       const boxData = [...data];
@@ -142,33 +167,50 @@ function App() {
       console.log(error);
     }
   }
+  
   const handleAddItem = (id) => {
-    const boxData = [...data];
-    const index = boxData.findIndex(box => box._id === id);
-    boxData.forEach((box, boxIndex) => box.showItemForm = index === boxIndex);
-    setData(boxData);
+    setBoxID(id);
+    setEditItemBool(false);
+    setShowModalItem(true);
+  }
+  const handleEditItem = (boxID, itemID) => {
+    const box = data.find(box => box._id === boxID);
+    const item = box.item.find(item => item._id === itemID);
+
+    setItemID(itemID);
+    setBoxID(boxID);
+    setItemName(item.name);
+    setItemDescription(item.description);
+    
+    setEditItemBool(true);
+    setShowModalItem(true);
   }
   const handleRemoveItem = (boxID, itemID) => {
     removeItem(boxID, itemID);
   }
   const handleSubmitItem = (event) => {
-  
     event.preventDefault();
-    clearForm();
-    const formData = new FormData(event.target);
-    const id = formData.get('id');
+    setShowModalItem(false);
     const itemData = {
-      name: formData.get('name'),
-      description: formData.get('description')
+      id: itemID,
+      name: itemName,
+      description: itemDescription
     }
-    createItem(id, itemData);
+    if (editItemBool)
+      editItem(boxID, itemID, itemData);
+    else
+      createItem(boxID, itemData);
+
+      clearForm();
+
     return false;
   }
 
   const itemHandler = {
     handleSubmit: handleSubmitItem,
     handleRemove: handleRemoveItem,
-    handleAddItem: handleAddItem,
+    handleAdd: handleAddItem,
+    handleEdit: handleEditItem,
   };
 
   const boxForm =
@@ -186,9 +228,23 @@ function App() {
       <button type="submit">submit</button>
     </form>
 
+const itemForm = <form onSubmit={itemHandler.handleSubmit}>
+<legend>New Item</legend>
+<fieldset>
+    <input id="id" name="id" value={itemID} readOnly hidden></input>
+    <label htmlFor="item-name">name
+    <input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
+    </label>
+    <label htmlFor="item-description">description
+    <input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+    </label>
+</fieldset>
+<button type="submit">submit</button>
+</form>
   return (
     <>
-      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} /> } 
+      {<Modal show={showModalItem} edit={editItemBool} content={itemForm}  />}
+      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} />}
       <ul className="list-box">
         {data && data.map((box, index) => {
           return (

client/src/box.js

@@ -3,46 +3,21 @@ import Item from './item';
 import Modal from './modal';
 
 const Box = ({ boxData, boxHandler, itemHandler }) => {
-    const [itemName, setItemName] = useState('');
-    const [itemDescription, setItemDescription] = useState('');
-    
-    const handleName = (e) => {
-        setItemName(e.target.value)
-    }
-    const handleDescription = (e) => {
-        setItemDescription(e.target.value)
-    }
-    const formNewItem = <form onSubmit={itemHandler.handleSubmit}>
-        <legend>New Item</legend>
-        <fieldset>
-            <input id="id" name="id" value={boxData._id} readOnly hidden></input>
-            <label htmlFor="item-name">name
-            <input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
-            </label>
-            <label htmlFor="item-description">description
-            <input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
-            </label>
-        </fieldset>
-        <button type="submit">submit</button>
-    </form>
-
     return (
         <>
-        {<Modal content={formNewItem} show={boxData.showItemForm} />}
         <li className="box">
             <h2 className="box-title">{boxData.name}</h2>
             <div className="box-subtitle">
                 <h3>{boxData.description}</h3>
-                <button onClick={() => itemHandler.handleAddItem(boxData._id)}>add item</button>
+                <button onClick={() => itemHandler.handleAdd(boxData._id)}>add item</button>
             </div>
             <ul className="list-box-item">
-
                 {boxData.item.map(((item, index) => {
                     return <Item
                         key={index}
                         data={item}
                         boxID={boxData._id}
-                        handleRemove={itemHandler.handleRemove} />
+                        itemHandler={itemHandler}/>
                 }))}
             </ul>
             <button className="edit-box" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>

client/src/item.js

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