make boxes look better

client/src/app.js

@@ -14,11 +14,12 @@ function App() {
     fetchData();
   }, []);
 
-  const [data, setData] = useState([]);
+  const [data, setData] = useState();
+
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
 
-
+  const [showFormBox, setShowFormBox] = useState(false);
   
   const fetchDataAsync = async () => {
     try {
@@ -40,10 +41,10 @@ function App() {
     }
   }
 
-  const deleteBox = async (id) => {
+  const removeBox = async (id) => {
     try {
       const response = await axios.delete(`${api.baseApiUrl}/${id}`);
-      setData(response.data);
+      setData(data.filter(box => box._id !== id));
     }
     catch (error) {
       console.log(error);
@@ -60,6 +61,8 @@ function App() {
   
   const handleSubmitBox = (event) => {
     event.preventDefault();
+    setShowFormBox(false);
+    clearForm();
     const boxData = {
       name: boxName,
       description: boxDescription
@@ -69,29 +72,21 @@ function App() {
   }
 
   const handleRemoveBox = (id) => {
-    deleteBox(id);
+    removeBox(id);
+  }
+  const handleAddBox = () => {
+    setShowFormBox(true);
+  }
+ const clearForm = () => {
+        setBoxName();
+        setBoxDescription();
     }
-
-  
- 
-
   const boxHandler = {
       handleSubmit: handleSubmitBox,
       handleRemove: handleRemoveBox,
       handleName: handleBoxName,
       handleDescription: handleBoxDescription
   };
-
-  const lstBoxes = data.map((box) => {
-    return (
-      <ul className="list-box">
-        <Box boxData={box} handleRemove={boxHandler.handleRemove}/>
-      </ul>
-    );
-  });
-
-  
-
   const formNewBox =
     <form onSubmit={boxHandler.handleSubmit}>
       <legend>New Box</legend>
@@ -108,8 +103,15 @@ function App() {
 
   return (
     <>
-      {formNewBox}
-      {lstBoxes}
+      <ul className="list-box">
+      {data && data.map((box) => {
+        return (
+          <Box boxData={box} handleRemove={boxHandler.handleRemove} />
+        );
+      })}
+    </ul>      
+    {!showFormBox && <button onClick={handleAddBox}>add box</button>}
+    {showFormBox && formNewBox}
     </>
   );
 

client/src/box.js

@@ -4,6 +4,7 @@ import api from './api';
 import axios from 'axios';
 
 const Box = ({ boxData, handleRemove }) => {
+    console.log(boxData);
     const [data, setData] = useState(boxData);
     const [showFormItem, setShowFormItem] = useState(false);
 
@@ -86,16 +87,18 @@ const Box = ({ boxData, handleRemove }) => {
 
     return (
         <li className="box">
-            <p className="box-name">{data.name}</p>
-            <p className="box-description">{data.description}</p>
+            <h2 className="box-title">{data.name}</h2>
+            <div className="box-subtitle">
+                <h3>{data.description}</h3>
+                <button onClick={handleAddItem}>add item</button>
+            </div>
             <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>
+            <button className="remove-box" onClick={() => handleRemove(data._id)}>remove box</button>
             {showFormItem && formNewItem}
         </li>
     )

client/src/item.js

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

client/src/styles/app.css

@@ -5,3 +5,49 @@ form > fieldset > label {
 form > fieldset {
     border: none;
 }
+
+li {
+    list-style: none;
+    font-size: 11px;
+}
+li.item {
+    display: grid;
+    grid-template-columns: 1fr 4em;
+    column-gap: 1em;
+    margin: 0.4em 0 0 0;
+}
+h1, h2, h3, h4 {
+    font-weight:normal;
+    margin: 0;
+    padding: 0;
+}
+button {
+border: none;
+font-size: 0.8em;
+padding: 0.1em;
+}
+button.remove-box {
+    width: 100%;
+}
+button:hover {
+    cursor: pointer;
+}
+.box-subtitle {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    font-size: 12px;
+    text-transform: lowercase;
+}
+ul.list-box {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    padding: 0 0 0 1em;
+    margin: 0;
+}
+ul.list-box-item {
+    padding: 0 0 0 1em;
+    display: grid;
+}
+p {
+    margin: 0;
+}

server/server.js

@@ -60,6 +60,7 @@ app.post('/box', async (request, response) => {
 app.delete('/box/:id', async (request, response) => {
     await Box.deleteOne({_id: request.params.id});
     const updatedBoxes = await getAllBoxes();
+    console.log(updatedBoxes);
     response.send(updatedBoxes);
 });