Pass Tests

src/components/App.js

@@ -7,14 +7,13 @@ function App() {
   const [items, setItems] = useState(itemData);
   const [isDarkMode, setIsDarkMode] = useState(false);
 
-  function handleDarkModeClick() {
-    setIsDarkMode((isDarkMode) => !isDarkMode);
-  }
+  function handleDarkModeClick() {setIsDarkMode((isDarkMode) => !isDarkMode)}
+  const onItemFormSubmit = (newItem) => setItems([...items, newItem])
 
   return (
     <div className={"App " + (isDarkMode ? "dark" : "light")}>
       <Header isDarkMode={isDarkMode} onDarkModeClick={handleDarkModeClick} />
-      <ShoppingList items={items} />
+      <ShoppingList items={items} onItemFormSubmit={onItemFormSubmit} />
     </div>
   );
 }

src/components/Filter.js

@@ -1,9 +1,9 @@
 import React from "react";
 
-function Filter({ onCategoryChange }) {
+function Filter({ onCategoryChange, onSearchChange, search }) {
   return (
     <div className="Filter">
-      <input type="text" name="search" placeholder="Search..." />
+      <input type="text" value={search} name="search" placeholder="Search..." onChange={onSearchChange} />
       <select name="filter" onChange={onCategoryChange}>
         <option value="All">Filter by category</option>
         <option value="Produce">Produce</option>

src/components/ItemForm.js

@@ -1,17 +1,41 @@
-import React from "react";
+import React, { useState } from "react";
 import { v4 as uuid } from "uuid";
 
-function ItemForm(props) {
+function ItemForm({ onItemFormSubmit }) {
+  const [formData, setFormData] = useState({
+    id: '',
+    name: '',
+    category: ''
+  })
+
+  const handleChange = (e) => {
+    const key = e.target.name
+    setFormData({
+      ...formData,
+      id: uuid(),
+      [key]: e.target.value
+    })
+  }
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault()
+    if(formData.category === ''){
+      return alert('Please select a category')
+    }
+    onItemFormSubmit(formData)
+  }
+
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleFormSubmit}>
       <label>
         Name:
-        <input type="text" name="name" />
+        <input type="text" name="name" value={formData.name} onChange={handleChange} />
       </label>
 
       <label>
         Category:
-        <select name="category">
+        <select name="category" value={formData.category} onChange={handleChange} >
+          <option value="">Select...</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>

src/components/ShoppingList.js

@@ -3,23 +3,37 @@ import ItemForm from "./ItemForm";
 import Filter from "./Filter";
 import Item from "./Item";
 
-function ShoppingList({ items }) {
+function ShoppingList({ items, onItemFormSubmit }) {
   const [selectedCategory, setSelectedCategory] = useState("All");
+  const [searchedItems, setSearchedItems] = useState('')
 
   function handleCategoryChange(event) {
     setSelectedCategory(event.target.value);
   }
 
   const itemsToDisplay = items.filter((item) => {
-    if (selectedCategory === "All") return true;
+    const charSearch = searchedItems.length
+
+    if(searchedItems !== ''){
+      if(item.name.split(' ').length === 1){
+        return searchedItems.slice(0, charSearch) === item.name.slice(0, charSearch)
+      } else {
+        return searchedItems.slice(0, charSearch) === item.name.split(' ')[1].slice(0, charSearch)
+      }
+    }
 
-    return item.category === selectedCategory;
-  });
+    if (selectedCategory === "All") return true;
+    return item.category === selectedCategory;    
+  })
 
+  const handleSearchChange = (e) => {
+    setSearchedItems(e.target.value)
+  }
+
   return (
     <div className="ShoppingList">
-      <ItemForm />
-      <Filter onCategoryChange={handleCategoryChange} />
+      <ItemForm onItemFormSubmit={onItemFormSubmit}  />
+      <Filter onCategoryChange={handleCategoryChange} onSearchChange={handleSearchChange} search={searchedItems} />
       <ul className="Items">
         {itemsToDisplay.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />