edit box name/desc

client/src/app.js

@@ -8,10 +8,16 @@ import Modal from './modal';
 function App() {
 
   const [data, setData] = useState();
+  const [boxID, setBoxID] = useState();
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
-  const [showFormBox, setShowFormBox] = useState(false);
-  const [showBox, setShowBox] = useState(false);
+  const [showModalBox, setShowModalBox] = useState(false);
+  const [showModalItem, setShowModalItem] = useState(false);
+
+  const [editBoxBool, setEditBoxBool] = useState(false);
+  const [editDataBox, setEditDataBox] = useState({});
+
+
   //fetch all box data
   useEffect(() => {
     const fetchData = async () => {
@@ -39,7 +45,15 @@ function App() {
       console.log(error);
     }
   }
+  const editBox = async (boxData) => {
+    try {
+      const response = await axios.put(`${api.baseApiUrl}/${boxData.id}`, boxData);
+      setData(response.data);
+    }
+    catch (error) {
 
+    }
+  }
   const removeBox = async (id) => {
     try {
       const response = await axios.delete(`${api.baseApiUrl}/${id}`);
@@ -52,7 +66,7 @@ function App() {
     }
   }
 
-  const handleBoxName = (e) => {
+  const handleNameBox = (e) => {
     setBoxName(e.target.value);
   }
 
@@ -62,12 +76,16 @@ function App() {
 
   const handleSubmitBox = (event) => {
     event.preventDefault();
-    setShowFormBox(false);
+    setShowModalBox(false);
     clearForm();
     const boxData = {
+      id: boxID,
       name: boxName,
       description: boxDescription
     };
+    if (editBoxBool)
+      editBox(boxData);
+    else
       createBox(boxData);
     return false;
   }
@@ -76,24 +94,36 @@ function App() {
     removeBox(id);
   }
   const handleAddBox = () => {
-    setShowFormBox(true);
+    //open modal
+    setShowModalBox(true);
   }
   const clearForm = () => {
-        setBoxName();
-        setBoxDescription();
+    setEditBoxBool(false);
+    setBoxName('');
+    setBoxDescription('');
+    setBoxID(null);
+  }
+  const handleEditBox = (id) => {
+    const box = data.find(box => box._id === id);
+    setEditBoxBool(true);
+    setBoxName(box.name);
+    setBoxDescription(box.description);
+    setBoxID(id);
+    setShowModalBox(true);
   }
   const boxHandler = {
     handleSubmit: handleSubmitBox,
     handleRemove: handleRemoveBox,
-      handleName: handleBoxName,
-      handleDescription: handleBoxDescription
+    handleName: handleNameBox,
+    handleDescription: handleBoxDescription,
+    handleEdit: handleEditBox
   };
 
   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);
+      boxData.splice(boxData.findIndex(box => box._id === id), 1, response.data);
       setData(boxData);
     }
     catch (error) {
@@ -105,7 +135,7 @@ function App() {
     try {
       const boxData = [...data];
       const response = await axios.delete(`${api.baseApiUrl}/${boxID}/item/${itemID}`);
-          boxData.splice(boxData.findIndex(box => box._id === boxID),1,response.data);
+      boxData.splice(boxData.findIndex(box => box._id === boxID), 1, response.data);
       setData(boxData);
     }
     catch (error) {
@@ -122,6 +152,7 @@ function App() {
     removeItem(boxID, itemID);
   }
   const handleSubmitItem = (event) => {
+  
     event.preventDefault();
     clearForm();
     const formData = new FormData(event.target);
@@ -140,12 +171,13 @@ function App() {
     handleAddItem: handleAddItem,
   };
 
-  const formNewBox =
+  const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
+      <input id="id" name="id" value={boxID} readOnly hidden></input>
       <legend>New Box</legend>
       <fieldset>
         <label htmlFor="box-name">name
-          <input onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
+          <input autoFocus onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
         </label>
         <label htmlFor="box-description">description
           <input onChange={boxHandler.handleDescription} value={boxDescription} id="box-description" name="description" type="text" />
@@ -156,22 +188,20 @@ function App() {
 
   return (
     <>
-        {showBox && <Modal />}
-
+      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} /> } 
       <ul className="list-box">
         {data && data.map((box, index) => {
           return (
             <Box
               key={index}
               boxData={box}
-            handleRemoveBox={boxHandler.handleRemove}
+              boxHandler={boxHandler}
               itemHandler={itemHandler}
             />
           );
         })}
       </ul>
-    {!showFormBox && <button onClick={handleAddBox}>add box</button>}
-    {showFormBox && formNewBox}
+      {<button onClick={handleAddBox}>add box</button>}
     </>
   );
 

client/src/box.js

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import Item from './item';
+import Modal from './modal';
 
-const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
+const Box = ({ boxData, boxHandler, itemHandler }) => {
     const [itemName, setItemName] = useState('');
     const [itemDescription, setItemDescription] = useState('');
     
@@ -26,6 +27,8 @@ const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
     </form>
 
     return (
+        <>
+        {<Modal content={formNewItem} show={boxData.showItemForm} />}
         <li className="box">
             <h2 className="box-title">{boxData.name}</h2>
             <div className="box-subtitle">
@@ -42,9 +45,10 @@ const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
                         handleRemove={itemHandler.handleRemove} />
                 }))}
             </ul>
-            <button className="remove-box" onClick={() => handleRemoveBox(boxData._id)}>remove box</button>
-            {boxData.showItemForm && formNewItem}
+            <button className="edit-box" onClick={() => boxHandler.handleEdit(boxData._id)}>edit</button>
+            <button className="remove-box" onClick={() => boxHandler.handleRemove(boxData._id)}>remove</button>
         </li>
+        </>
     )
 }
 

client/src/item.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
-const item = ({ data, handleRemove, boxID }) => {
-    console.log(boxID)
+const item = ({ data, handleRemove, handleEdit, 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>
     </li>);
 };

client/src/modal.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import './styles/modal.css';
 
-const Modal = () => {
-    return (
+const Modal = ({show, content}) => {
+    return show ?
         <div className='modal-container'>
             <div className='modal-content'>
-                <h1>modal title</h1>
+                {content}
             </div>
         </div>
-    );
+    : null;
 }
 
 export default Modal;

client/src/styles/app.css

@@ -1,4 +1,4 @@
-form > fieldset > label {
+ form > fieldset > label {
     display: flex;
 }
 
@@ -12,9 +12,10 @@ li {
 }
 li.item {
     display: grid;
-    grid-template-columns: 1fr 4em;
-    column-gap: 1em;
+    grid-template-columns: 1fr auto auto;
+    column-gap: 0.1em;
     margin: 0.4em 0 0 0;
+    padding: 0;
 }
 h1, h2, h3, h4 {
     font-weight:normal;
@@ -26,7 +27,7 @@ border: none;
 font-size: 0.8em;
 padding: 0.1em;
 }
-button.remove-box {
+button.remove-box, button.edit-box {
     width: 100%;
 }
 button:hover {

client/src/styles/modal.css

@@ -1,9 +1,10 @@
 .modal-container {
+    top: 0;
+    left: 0;
+    position: absolute;
     display: flex;
- 
     justify-content: center;
     align-items: center;
-    position: absolute;
     height: 100%;
     width: 100%;
     background-color: rgba(0,0,0,0.2);

server/server.js

@@ -55,7 +55,13 @@ app.post('/box', async (request, response) => {
     const updatedBoxes = await getAllBoxes();
     response.send(updatedBoxes);
 });
-
+//edit box
+app.put('/box/:id', async (request, response) => {
+    const id = request.params.id;
+    await Box.updateOne({_id: id},{ $set: request.body});
+    const updatedBoxes = await getAllBoxes();
+    response.send(updatedBoxes);
+});
 //delete box
 app.delete('/box/:id', async (request, response) => {
     await Box.deleteOne({_id: request.params.id});