filter boxes

client/src/app.js

@@ -4,10 +4,11 @@ import Box from './box';
 import './styles/app.css';
 import api from './api';
 import Modal from './modal';
+import item from './item';
 
 function App() {
 
-  const [data, setData] = useState();
+  const [data, setData] = useState([]);
   const [boxID, setBoxID] = useState();
   const [boxName, setBoxName] = useState('');
   const [boxDescription, setBoxDescription] = useState('');
@@ -21,11 +22,16 @@ function App() {
   const [itemName, setItemName] = useState('');
   const [itemDescription, setItemDescription] = useState('');
 
+  const [filter, setFilter] = useState('');
+  const [filteredData, setFilteredData] = useState([]);
+
+
+
   const handleName = (e) => {
-      setItemName(e.target.value)
+    setItemName(e.target.value)
   }
   const handleDescription = (e) => {
-      setItemDescription(e.target.value)
+    setItemDescription(e.target.value)
   }
 
   //fetch all box data
@@ -36,10 +42,20 @@ function App() {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    const filtered = data.filter((box) =>
+      box.name.includes(filter) ||
+      box.description.includes(filter) ||
+      box.item.filter(item => item.name.includes(filter) ||
+        item.description.includes(filter)).length)
+    setFilteredData(filtered);
+  }, [filter, data]);
+
   const fetchDataAsync = async () => {
     try {
       const resp = await axios.get(api.baseApiUrl);
       setData(resp.data);
+      setFilteredData(resp.data);
     }
     catch (error) {
       console.log(error);
@@ -89,7 +105,6 @@ function App() {
   const handleSubmitBox = (event) => {
     event.preventDefault();
     setShowModalBox(false);
-    clearForm();
     const boxData = {
       id: boxID,
       name: boxName,
@@ -99,6 +114,8 @@ function App() {
       editBox(boxData);
     else
       createBox(boxData);
+
+    clearFormBox();
     return false;
   }
 
@@ -116,13 +133,14 @@ function App() {
     setBoxID(id);
     setShowModalBox(true);
   }
-  const clearForm = () => {
+  const clearFormBox = () => {
     setEditBoxBool(false);
     setBoxName('');
     setBoxDescription('');
     setBoxID(null);
   }
 
+
   const boxHandler = {
     handleSubmit: handleSubmitBox,
     handleRemove: handleRemoveBox,
@@ -130,6 +148,10 @@ function App() {
     handleDescription: handleBoxDescription,
     handleEdit: handleEditBox
   };
+
+  const handleModalCloseBox = () => {
+    setShowModalBox(false);
+  }
   // ITEM FUNCTIONS ///////////////////////////////////////////////////////////////
 
   const createItem = async (boxID, itemData) => {
@@ -167,7 +189,7 @@ function App() {
       console.log(error);
     }
   }
-  
+
   const handleAddItem = (id) => {
     setBoxID(id);
     setEditItemBool(false);
@@ -181,7 +203,7 @@ function App() {
     setBoxID(boxID);
     setItemName(item.name);
     setItemDescription(item.description);
-    
+
     setEditItemBool(true);
     setShowModalItem(true);
   }
@@ -201,11 +223,19 @@ function App() {
     else
       createItem(boxID, itemData);
 
-      clearForm();
-
+    clearFormItem();
     return false;
   }
 
+  const handleModalCloseItem = () => {
+    setShowModalItem(false);
+  }
+  const clearFormItem = () => {
+    setItemID(undefined);
+    setItemName('');
+    setItemDescription('');
+  }
+
   const itemHandler = {
     handleSubmit: handleSubmitItem,
     handleRemove: handleRemoveItem,
@@ -213,6 +243,11 @@ function App() {
     handleEdit: handleEditItem,
   };
 
+  const handleFilterChange = (event) => {
+    const filterText = event.target.value;
+    setFilter(filterText);
+  }
+
   const boxForm =
     <form onSubmit={boxHandler.handleSubmit}>
       <input id="id" name="id" value={boxID} readOnly hidden></input>
@@ -228,25 +263,29 @@ function App() {
       <button type="submit">submit</button>
     </form>
 
-const itemForm = <form onSubmit={itemHandler.handleSubmit}>
-<legend>New Item</legend>
-<fieldset>
-    <input id="id" name="id" value={itemID} readOnly hidden></input>
-    <label htmlFor="item-name">name
+  const itemForm = <form onSubmit={itemHandler.handleSubmit}>
+    <legend>New Item</legend>
+    <fieldset>
+      <input id="id" name="id" value={itemID} readOnly hidden></input>
+      <label htmlFor="item-name">name
     <input onChange={handleName} value={itemName} id="item-name" name="name" type="text"></input>
-    </label>
-    <label htmlFor="item-description">description
+      </label>
+      <label htmlFor="item-description">description
     <input onChange={handleDescription} value={itemDescription} id="item-description" name="description" type="text"></input>
-    </label>
-</fieldset>
-<button type="submit">submit</button>
-</form>
+      </label>
+    </fieldset>
+    <button type="submit">submit</button>
+  </form>
   return (
     <>
-      {<Modal show={showModalItem} edit={editItemBool} content={itemForm}  />}
-      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} />}
+      {<Modal show={showModalItem} edit={editItemBool} content={itemForm} handleClose={handleModalCloseItem} />}
+      {<Modal show={showModalBox} edit={editBoxBool} content={boxForm} handleClose={handleModalCloseBox} />}
+
+      <label htmlFor="box-filter">filter:</label>
+      <input type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
       <ul className="list-box">
-        {data && data.map((box, index) => {
+        {filter}
+        {filteredData.map((box, index) => {
           return (
             <Box
               key={index}
@@ -260,7 +299,6 @@ const itemForm = <form onSubmit={itemHandler.handleSubmit}>
       {<button onClick={handleAddBox}>add box</button>}
     </>
   );
-
 }
 
 export default App;

client/src/modal.js

@@ -1,12 +1,20 @@
 import React from 'react';
 import './styles/modal.css';
 
-const Modal = ({show, content}) => {
+const Modal = ({show, content, handleClose}) => {
+    const handleClickOff = (event) => {
+        if(event.target.classList.contains('modal-container'))
+            handleClose();
+        
+    }
     return show ?
-        <div className='modal-container'>
+        <div className='modal-container' onClick={handleClickOff}>
             <div className='modal-content'>
                 {content}
             </div>
+            <div className='modal-actions'>
+                <button type='button' onClick={handleClose}>close</button>
+            </div>
         </div>
     : null;
 }

client/src/styles/app.css

@@ -1,3 +1,4 @@
+ /*
  form > fieldset > label {
     display: flex;
 }
@@ -53,3 +54,4 @@ ul.list-box-item {
 p {
     margin: 0;
 }
+*/