moving more methods around

client/src/api.js

@@ -5,9 +5,5 @@ const databaseName = 'box';
 const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`;
 
 export default {
-    SERVER_IP_ADDRESS,
-    SERVER_PORT,
-    PROTOCOL,
-    databaseName,
     baseApiUrl
 }

client/src/app.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Box from './box';
 import './styles/app.css';
-=import baseApiUrl from './api';
+import api from './api';
 
 function App() {
 
@@ -22,7 +22,7 @@ function App() {
   
   const fetchDataAsync = async () => {
     try {
-      const resp = await axios.get(baseApiUrl);
+      const resp = await axios.get(api.baseApiUrl);
       setData(resp.data);
     }
     catch (error) {
@@ -32,7 +32,7 @@ function App() {
 
   const createBox = async (boxData) => {
     try {
-      const response = await axios.post(baseApiUrl, boxData);
+      const response = await axios.post(api.baseApiUrl, boxData);
       setData(response.data);
     }
     catch (error) {
@@ -42,19 +42,7 @@ function App() {
 
   const deleteBox = async (id) => {
     try {
-      const response = await axios.delete(`${baseApiUrl}/${id}`);
+      const response = await axios.delete(`${api.baseApiUrl}/${id}`);
-      setData(response.data);
-    }
-    catch (error) {
-      console.log(error);
-    }
-  }
-
-  
-
-  const deleteItem = async (id) => {
-    try {
-      const response = await axios.delete(`${baseApiUrl}/item/${id}`);
       setData(response.data);
     }
     catch (error) {
@@ -87,18 +75,17 @@ function App() {
   
  
 
-  const handler = {
+  const boxHandler = {
-    box: {
       handleSubmit: handleSubmitBox,
       handleRemove: handleRemoveBox,
       handleName: handleBoxName,
-      handleDescription: handleBoxDescription,
+      handleDescription: handleBoxDescription
-    },
   };
+
   const lstBoxes = data.map((box) => {
     return (
       <ul className="list-box">
-        <Box data={box} handler={handler}/>
+        <Box boxData={box} handleRemove={boxHandler.handleRemove}/>
       </ul>
     );
   });
@@ -106,14 +93,14 @@ function App() {
   
 
   const formNewBox =
-    <form onSubmit={handleSubmitBox}>
+    <form onSubmit={boxHandler.handleSubmit}>
       <legend>New Box</legend>
       <fieldset>
         <label htmlFor="box-name">name
-          <input onChange={handleBoxName} value={boxName} id="box-name" name="name" type="text" />
+          <input onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
         </label>
         <label htmlFor="box-description">description
-          <input onChange={handleBoxDescription} value={boxDescription} id="box-description" name="description" type="text" />
+          <input onChange={boxHandler.handleDescription} value={boxDescription} id="box-description" name="description" type="text" />
         </label>
       </fieldset>
       <button type="submit">submit</button>

client/src/box.js

@@ -1,71 +1,103 @@
-import React, {useState, setState} from 'react';
+import React, { useState, setState } from 'react';
 import Item from './item';
-import baseApiUrl from './api';
+import api from './api';
+import axios from 'axios';
 
-const [showFormItem, setShowFormItem] = useState(false);
+const Box = ({ boxData, handleRemove }) => {
-const [itemName, setItemName] = useState('');
+    const [data, setData] = useState(boxData);
-const [itemDescription, setItemDescription] = useState('');
+    const [showFormItem, setShowFormItem] = useState(false);
-const handleItemName = (e) => {
+
+    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) {
+            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})
+            setData(boxData);
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }
+    const clearForm = () => {
+        setItemName();
+        setItemDescription();
+    }
+    const handleItemName = (e) => {
         setItemName(e.target.value);
     }
-const handleItemDescription = (e) => {
+    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= {
+        const itemData = {
             name: itemName,
             description: itemDescription
         }
         createItem(id, itemData);
         return false;
     }
-  const createItem = async (id, itemData) => {
-    try {
-      const response = await axios.post(`${baseApiUrl}/${id}/item`, itemData);
-      const update = [...data];
-      update.splice(data.findIndex((box) => box._id === id), 1, response.data);
-      console.log(update);
-      setData(update);
-    }
-    catch(error) {
-      console.log(error);
-    }
-  }
-const Box = ({data, handler}) => {
-    const [items, setItems] = useState(data.item);
-    return (
-        <li className="box">
-          <p className="box-name">{data.name}</p>
-          <ul className="list-box-item">
-            {items.map(((item) => {
-              return <Item data={item} handler={handler.item} />
-            }))}
-          </ul>
-          <button onClick={() => handler.box.remove(data._id)}>delete</button>
-          <button onClick={handler.box.add}>add item</button>
 
-          {showFormItem &&
+    const itemHandler = {
-          <form onSubmit={handleSubmitItem}>
+        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>
             <label htmlFor="item-name">name
-            <input onChange={handleItemName} value={itemName} id="item-name" name="name" type="text"></input>
+            <input onChange={itemHandler.handleName} value={itemName} id="item-name" name="name" type="text"></input>
             </label>
             <label htmlFor="item-description">description
-            <input onChange={handleItemDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
+            <input onChange={itemHandler.handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
             </label>
         </fieldset>
         <button type="submit">submit</button>
-          </form>}
+    </form>
-        </li>
 
+    return (
+        <li className="box">
+            <p className="box-name">{data.name}</p>
+            <p className="box-description">{data.description}</p>
+            <ul className="list-box-item">
+                <p>{data.item.length}</p>
+                {data.item.map(((item) => {
+                    return <Item data={item} handleRemove={itemHandler.handleRemove} />
+                }))}
+            </ul>
+            <button onClick={() => handleRemove(data._id)}>delete</button>
+            <button onClick={handleAddItem}>add item</button>
+            {showFormItem && formNewItem}
+        </li>
     )
 }
 

client/src/item.js

@@ -1,12 +1,13 @@
 import React, {useState, setState } from 'react';
 
-const item = ({data, handler}) => {
+const item = ({data, handleRemove}) => {
     return (<li className="item">
     <p>{data.name}</p>
     <ul>
       <li>{data.description}</li>
       <li>{data.quantity}</li>
     </ul>
+    <button onClick={() => handleRemove(data._id)}>remove</button>
   </li>);
 };
 

server/server.js

@@ -21,15 +21,23 @@ db.once('open', function() {
 
 /*------------MODELS------------*/
 //create schema
+var itemSchema = new mongoose.Schema({
+    id: String,
+    name: String,
+    description: String,
+    quantity: Number
+});
+
 var boxSchema = new mongoose.Schema({
     id: String,
     name: String,
     description: String,
-    item: [mongoose.Schema.Types.Mixed],
+    item: [itemSchema],
 });
 
 //compile schema into model
 var Box = mongoose.model('box', boxSchema, 'box');
+var Item = mongoose.model('item', itemSchema, 'item');
 /*------------/MODELS------------*/
 
 /*------------CONTROLLER------------*/
@@ -43,20 +51,14 @@ app.get('/box', async (request, response) => {
 
 // create box
 app.post('/box', async (request, response) => {
-    Box.create(request.body, (error, document) => {
+    await Box.create(request.body);
-        if(error) return request.next(error);
-        return document;
-    });
     const updatedBoxes = await getAllBoxes();
     response.send(updatedBoxes);
 });
 
 //delete box
 app.delete('/box/:id', async (request, response) => {
-    await Box.deleteOne({_id: request.params.id}, (error, document) => {
+    await Box.deleteOne({_id: request.params.id});
-        if(error)return null;
-        return document;
-    });
     const updatedBoxes = await getAllBoxes();
     response.send(updatedBoxes);
 });
@@ -65,24 +67,21 @@ app.delete('/box/:id', async (request, response) => {
 app.post('/box/:id/item', async (request, response) => {
     const id = request.params.id;
     const query = {_id: id};
-    const box = Box.updateOne(query,{
+    const box = await Box.updateOne(query, {
         $push: { item: request.body }
-    }, (error, document) => {
-        if(error)return null;
-        return document;
     });
     const updatedBox = await getBox(id);
     response.send(updatedBox);
 });
 
-//delete item //THIS IS NOT WORKING
+//delete item
-app.delete('/item/:id', async (request, response) => {
+app.delete('/box/:boxId/item/:itemId', async (request, response) => {
-    Item.deleteOne({_id: request.params.id}, (error, document) => {
+    const boxID = request.params.boxId;
-        if(error)return null;
+    const itemID = request.params.itemId;
-        return document;
+    await Box.update({ _id: boxID }, { $pull: { item: { _id: itemID } } });
-    });
+    const box = await getBox(boxID);
-    const updatedBoxes = await getAllBoxes();
+    console.log(box.item);
-    response.send(updatedBoxes);
+    response.send(box.item);
 });
 
 
@@ -90,17 +89,11 @@ app.delete('/item/:id', async (request, response) => {
 
 const getAllBoxes = async (queryParameters) => {
     queryParameters = queryParameters ?? {};
-    const data = await Box.find(queryParameters, (error, document) => {
+    const data = await Box.find(queryParameters);
-        if(error) return null;
-        return document;
-    });
     return data;
 }
 
 const getBox = async (id) => {
-    const data = await Box.findById(id, (error, document) => {
+    const data = await Box.findById(id);
-        if(error) return null;
-        return document;
-    });
     return data;
 }