move toward single source of truth

client/src/app.js

@@ -7,6 +7,12 @@ import Modal from './modal';
 
 function App() {
 
+  const [data, setData] = useState();
+  const [boxName, setBoxName] = useState('');
+  const [boxDescription, setBoxDescription] = useState('');
+  const [showFormBox, setShowFormBox] = useState(false);
+  const [showBox, setShowBox] = useState(false);
+
   //fetch all box data
   useEffect(() => {
     const fetchData = async () => {
@@ -15,13 +21,6 @@ function App() {
     fetchData();
   }, []);
 
-  const [data, setData] = useState();
-
-  const [boxName, setBoxName] = useState('');
-  const [boxDescription, setBoxDescription] = useState('');
-
-  const [showFormBox, setShowFormBox] = useState(false);
-  
   const fetchDataAsync = async () => {
     try {
       const resp = await axios.get(api.baseApiUrl);
@@ -45,7 +44,9 @@ function App() {
   const removeBox = async (id) => {
     try {
       const response = await axios.delete(`${api.baseApiUrl}/${id}`);
-      setData(data.filter(box => box._id !== id));
+      const storageData = response.data;
+      console.log(storageData);
+      setData(storageData);
     }
     catch (error) {
       console.log(error);
@@ -88,6 +89,56 @@ function App() {
       handleName: handleBoxName,
       handleDescription: handleBoxDescription
   };
+
+
+
+  const [itemName, setItemName] = useState('');
+  const [itemDescription, setItemDescription] = useState('');
+
+
+  const createItem = async (id, itemData) => {
+      try {
+          const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
+      }
+      catch (error) {
+          console.log(error);
+      }
+  }
+
+  const removeItem = async (id) => {
+      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})
+      }
+      catch (error) {
+          console.log(error);
+      }
+  }
+  const handleAddItem = () => {
+      //setShowFormItem(true);
+  }
+  const handleRemoveItem = (id) => {
+      removeItem(id);
+  }
+  const handleSubmitItem = (event) => {
+      event.preventDefault();
+      clearForm();
+      const id = (event.target).querySelector("#id").value;
+      const itemData = {
+          name: itemName,
+          description: itemDescription
+      }
+      createItem(id, itemData);
+      return false;
+  }
+
+  const itemHandler = {
+      handleSubmit: handleSubmitItem,
+      handleRemove: handleRemoveItem,
+  };
+
   const formNewBox =
     <form onSubmit={boxHandler.handleSubmit}>
       <legend>New Box</legend>
@@ -104,12 +155,15 @@ function App() {
 
   return (
     <>
-        {<Modal />}
+        {showBox && <Modal />}
 
       <ul className="list-box">
       {data && data.map((box) => {
         return (
-          <Box boxData={box} handleRemove={boxHandler.handleRemove} />
+          <Box
+            boxData={box}
+            handleRemoveBox={boxHandler.handleRemove}
+            itemHandler={itemHandler} />
         );
       })}
     </ul>      

client/src/box.js

@@ -3,83 +3,24 @@ import Item from './item';
 import api from './api';
 import axios from 'axios';
 
-const Box = ({ boxData, handleRemove }) => {
+const Box = ({ boxData, handleRemoveBox, itemHandler }) => {
-    console.log(boxData);
+    const [itemName, setItemName] = useState();
-    const [data, setData] = useState(boxData);
+    const [itemDescription, setItemDescription] = useState();
-    const [showFormItem, setShowFormItem] = useState(false);
+    const handleName = (e) => {
-
+        setItemName(e.target.value)
-    const [itemName, setItemName] = useState('');
-    const [itemDescription, setItemDescription] = useState('');
-
-
-    const createItem = async (id, itemData) => {
-        try {
-            const response = await axios.post(`${api.baseApiUrl}/${id}/item`, itemData);
-            setData(response.data);
     }
-        catch (error) {
+    const handleDescription = (e) => {
-            console.log(error);
+        setItemDescription(e.target.value)
     }
-    }
-
-    const removeItem = async (id) => {
-        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})
-            setData(boxData);
-        }
-        catch (error) {
-            console.log(error);
-        }
-    }
-    const clearForm = () => {
-        setItemName();
-        setItemDescription();
-    }
-    const handleItemName = (e) => {
-        setItemName(e.target.value);
-    }
-    const handleItemDescription = (e) => {
-        setItemDescription(e.target.value);
-    }
-
-    const handleAddItem = () => {
-        setShowFormItem(true);
-    }
-    const handleRemoveItem = (id) => {
-        removeItem(id);
-    }
-    const handleSubmitItem = (event) => {
-        event.preventDefault();
-        setShowFormItem(false);
-        clearForm();
-        const id = (event.target).querySelector("#id").value;
-        const itemData = {
-            name: itemName,
-            description: itemDescription
-        }
-        createItem(id, itemData);
-        return false;
-    }
-
-    const itemHandler = {
-        handleSubmit: handleSubmitItem,
-        handleRemove: handleRemoveItem,
-        handleName: handleItemName,
-        handleDescription: handleItemDescription
-    };
-
     const formNewItem = <form onSubmit={itemHandler.handleSubmit}>
         <legend>New Item</legend>
         <fieldset>
-            <input id="id" name="id" value={data._id} hidden></input>
+            <input id="id" name="id" value={boxData._id} hidden></input>
             <label htmlFor="item-name">name
-            <input onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
+            <input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
             </label>
             <label htmlFor="item-description">description
-            <input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+            <input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
             </label>
         </fieldset>
         <button type="submit">submit</button>
@@ -87,19 +28,19 @@ const Box = ({ boxData, handleRemove }) => {
 
     return (
         <li className="box">
-            <h2 className="box-title">{data.name}</h2>
+            <h2 className="box-title">{boxData.name}</h2>
             <div className="box-subtitle">
-                <h3>{data.description}</h3>
+                <h3>{boxData.description}</h3>
-                <button onClick={handleAddItem}>add item</button>
+                <button onClick={() => console.log('show form')}>add item</button>
             </div>
             <ul className="list-box-item">
 
-                {data.item.map(((item) => {
+                {boxData.item.map(((item) => {
                     return <Item data={item} handleRemove={itemHandler.handleRemove} />
                 }))}
             </ul>
-            <button className="remove-box" onClick={() => handleRemove(data._id)}>remove box</button>
+            <button className="remove-box" onClick={() => handleRemoveBox(boxData._id)}>remove box</button>
-            {showFormItem && formNewItem}
+            {true && formNewItem}
         </li>
     )
 }

client/src/styles/app.css

@@ -43,6 +43,7 @@ ul.list-box {
     grid-template-columns: repeat(5, 1fr);
     padding: 0 0 0 1em;
     margin: 0;
+    gap: 1em;
 }
 ul.list-box-item {
     padding: 0 0 0 1em;