Completed Forms Lab

src/components/App.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import Header from "./Header";
+import ItemForm from "./ItemForm";
 import itemData from "../data/items";
 
 function App() {
@@ -11,10 +12,15 @@ function App() {
     setIsDarkMode((isDarkMode) => !isDarkMode);
   }
 
+  function handleFormSubmit(newItem) {
+    setItems([...items, newItem])
+  }
+
   return (
     <div className={"App " + (isDarkMode ? "dark" : "light")}>
       <Header isDarkMode={isDarkMode} onDarkModeClick={handleDarkModeClick} />
-      <ShoppingList items={items} />
+      <ItemForm onItemFormSubmit={handleFormSubmit}/>
+      <ShoppingList items={items} itemList={itemData}/>
     </div>
   );
 }

src/components/Filter.js

@@ -1,9 +1,15 @@
 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"
+      name="search"
+      value={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,23 +1,45 @@
-import React from "react";
+import React, { useState } from "react";
 import { v4 as uuid } from "uuid";
 
-function ItemForm(props) {
+function ItemForm({ onItemFormSubmit }) {
+  const [newItemName, setNewItem] = useState('')
+  const [newCategory, setNewCategory] = useState('Produce')
+
+  function handleSubmit(event) {
+    event.preventDefault()
+    const newItem = {
+      id: uuid(),
+      name: newItemName,
+      category: newCategory,
+    }
+    onItemFormSubmit(newItem)
+    setNewItem('')
+    setNewCategory('Produce')
+  }
+
+  function handleNewItem(event) {
+    setNewItem(event.target.value)
+  }
+
   return (
-    <form className="NewItem">
+    <form onSubmit={handleSubmit} className="NewItem">
       <label>
         Name:
-        <input type="text" name="name" />
+        <input type="text" name="name" onChange={handleNewItem} value={newItemName}/>
       </label>
 
       <label>
         Category:
-        <select name="category">
+        <select
+        name="category"
+        value={newCategory}
+        onChange={(e) => setNewCategory(e.target.value)}
+      >
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>
         </select>
       </label>
-
       <button type="submit">Add to List</button>
     </form>
   );

src/components/ShoppingList.js

@@ -1,25 +1,29 @@
 import React, { useState } from "react";
-import ItemForm from "./ItemForm";
 import Filter from "./Filter";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
   const [selectedCategory, setSelectedCategory] = useState("All");
+  const [searchCategory, setSearchCategory] = useState('')
+
+  function handleSearchChange(event) {
+    setSearchCategory(event.target.value)
+  }
 
   function handleCategoryChange(event) {
     setSelectedCategory(event.target.value);
   }
 
   const itemsToDisplay = items.filter((item) => {
-    if (selectedCategory === "All") return true;
+    const categoryMatch = selectedCategory === "All" || item.category === selectedCategory
+    const searchMatch = item.name.includes(searchCategory)
 
-    return item.category === selectedCategory;
-  });
+    return categoryMatch && searchMatch
+  })
 
   return (
     <div className="ShoppingList">
-      <ItemForm />
-      <Filter onCategoryChange={handleCategoryChange} />
+      <Filter search={searchCategory} onCategoryChange={handleCategoryChange} onSearchChange={handleSearchChange}/>
       <ul className="Items">
         {itemsToDisplay.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />