fix update item, lowercase filtering

client/src/app.js

@@ -1,10 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
 import Box from './box';
-import './styles/app.css';
 import api from './api';
 import Modal from './modal';
-import item from './item';
+import './styles/app.css';
 
 function App() {
 
@@ -42,12 +41,17 @@ function App() {
     fetchData();
   }, []);
 
+  //set filtered data on filter or original data change
   useEffect(() => {
+    const finalFilter = filter.trim().toLowerCase();
     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)
+      box.name.toLowerCase().includes(finalFilter) ||
+      box.description.toLowerCase().includes(finalFilter) ||
+      box.item.some(item =>
+          (item.name && item.name.toLowerCase().includes(finalFilter)) ||
+          (item.description && item.description.toLowerCase().includes(finalFilter))
+      )
+    )
     setFilteredData(filtered);
   }, [filter, data]);
 
@@ -174,7 +178,7 @@ function App() {
       setData(boxData);
     }
     catch (error) {
-
+      console.log(error);
     }
   }
 
@@ -199,8 +203,8 @@ function App() {
     const box = data.find(box => box._id === boxID);
     const item = box.item.find(item => item._id === itemID);
     
-    setItemID(itemID);
     setBoxID(boxID);
+    setItemID(itemID);
     setItemName(item.name);
     setItemDescription(item.description);
 
@@ -218,8 +222,11 @@ function App() {
       name: itemName,
       description: itemDescription
     }
-    if (editItemBool)
+    if (editItemBool) {
+      console.log('edititem');
       editItem(boxID, itemID, itemData);
+
+    }
     else
       createItem(boxID, itemData);
 
@@ -284,7 +291,6 @@ function App() {
       <label htmlFor="box-filter">filter:</label>
       <input type="search" id="box-filter" name="filter" value={filter} onChange={handleFilterChange} />
       <ul className="list-box">
-        {filter}
         {filteredData.map((box, index) => {
           return (
             <Box

client/src/box.js

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import Item from './item';
-import Modal from './modal';
 
 const Box = ({ boxData, boxHandler, itemHandler }) => {
     return (

client/src/item.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const item = ({ data, itemHandler, boxID }) => {
+const Item = ({ data, itemHandler, boxID }) => {
     return (<li className="item">
         <p className="item-name">{data.name}</p>
         <button onClick={() => itemHandler.handleEdit(boxID, data._id)}>edit</button>
@@ -8,4 +8,4 @@ const item = ({ data, itemHandler, boxID }) => {
     </li>);
 };
 
-export default item;
+export default Item;

client/src/styles/app.css

@@ -1,4 +1,4 @@
- /*
+ 
  form > fieldset > label {
     display: flex;
 }
@@ -11,6 +11,7 @@ li {
     list-style: none;
     font-size: 11px;
 }
+
 li.item {
     display: grid;
     grid-template-columns: 1fr auto auto;
@@ -24,9 +25,9 @@ h1, h2, h3, h4 {
     padding: 0;
 }
 button {
+margin: 0.2em;
 border: none;
-font-size: 0.8em;
-padding: 0.1em;
+padding: 0.4em;
 }
 button.remove-box, button.edit-box {
     width: 100%;
@@ -54,4 +55,3 @@ ul.list-box-item {
 p {
     margin: 0;
 }
-*/

server/server.js

@@ -66,7 +66,6 @@ app.put('/box/:id', 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);
 });
 
@@ -84,8 +83,11 @@ app.post('/box/:id/item', async (request, response) => {
 app.put('/box/:boxId/item/:itemId', async (request, response) => {
     const boxID = request.params.boxId;
     const itemID = request.params.itemId;
-    await Box.updateOne({ 'item._id': itemID }, {
-        $set: { item: request.body }
+    await Box.updateOne({ '_id': boxID, 'item._id': itemID }, {
+        $set: {
+            'item.$.name': request.body.name,
+            'item.$.description': request.description
+        }
     })
     const updatedBox = await getBox(boxID);
     response.send(updatedBox);