delete, add new box

client/src/app.js

@@ -1,45 +1,87 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import './app.css';
+import './styles/app.css';
 
 const SERVER_IP_ADDRESS = 'localhost';
 const SERVER_PORT = '5000';
 const PROTOCOL = 'http';
 const databaseName = 'box';
 const baseApiUrl = `${PROTOCOL}://${SERVER_IP_ADDRESS}:${SERVER_PORT}/${databaseName}`;
+
 function App() {
 
-  useEffect(() => fetchData(), []);
+  //fetch all box data
+  useEffect(() => {
+    const fetchData = async () => {
+      await fetchDataAsync();
+    }
+    fetchData();
+  }, []);
 
   const [data, setData] = useState([]);
-  const fetchData = async () => {
-    console.log('fetchData');
+  const [boxName, setBoxName] = useState('');
+  const [boxDescription, setBoxDescription] = useState('');
+
+  const fetchDataAsync = async () => {
     try {
       const resp = await axios.get(baseApiUrl);
       setData(resp.data);
-      console.log(resp.data);
     }
     catch (e) {
       console.log(e);
     }
   }
 
-  const newBox = async (boxData) => {
+  const createBox = async (boxData) => {
     try {
-      const resp = await axios.post(baseApiUrl, boxData);
+      const response = await axios.post(baseApiUrl, boxData);
+      setData(response.data);
     }
-    catch (e) {
-      console.log(e);
+    catch (error) {
+      console.log(error);
     }
   }
+
+  const deleteBox = async (id) => {
+    try {
+      const response = await axios.delete(`${baseApiUrl}/${id}`);
+      setData(response.data);
+    }
+    catch (error) {
+      console.log(error);
+    }
+  }
+
+  const handleBoxName = (e) => {
+    setBoxName(e.target.value);
+  }
+  
+  const handleBoxDescription = (e) => {
+    setBoxDescription(e.target.value);
+  }
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const boxData = {
+      name: boxName,
+      description: boxDescription
+    };
+    createBox(boxData);
+    return false;
+  }
+  const handleRemove = (id) => {
+    console.log(id);
+    deleteBox(id);
+  }
+
   const lstBoxes = data.map((box) => {
     return (
-      <ul>
-        <li>
-          <p>{box.name}</p>
-          <ul>
+      <ul className="list-box">
+        <li className="box">
+          <p className="box-name">{box.name}</p>
+          <ul className="list-box-item">
             {box.item.map(((item) => {
-              return (<li>
+              return (<li className="item">
                 <p>{item.name}</p>
                 <ul>
                   <li>{item.description}</li>
@@ -49,18 +91,24 @@ function App() {
             }))}
           </ul>
         </li>
+        <button onClick={() => handleRemove(box._id)}>delete</button>
       </ul>
     );
   });
 
   const formNewBox =
     <form>
-      <legend>Personal Information</legend>
-      <label htmlFor="full-name">Full Name<span className="required">(required)</span>
-        <span className="error-message">You must input a real name.</span>
-        <input id="full-name" name="full-name" required="" type="text" />
-      </label>
-      <button>submit</button>
+      <legend>New Box</legend>
+      <fieldset>
+        <label htmlFor="box-name">name
+          <input onChange={handleBoxName} 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" />
+        </label>
+      </fieldset>
+
+      <button onClick={handleSubmit}>submit</button>
     </form>
 
   return (

client/src/styles/app.css

@@ -0,0 +1,11 @@
+form > fieldset > label {
+    display: flex;
+}
+
+form > fieldset {
+    border: none;
+}
+
+.item {
+    display: none;
+}