Pass All Tests

db.json

@@ -1,40 +1,29 @@
 {
   "items": [
     {
-      "id": 1,
-      "name": "Yogurt",
-      "category": "Dairy",
-      "isInCart": false
-    },
-    {
-      "id": 2,
-      "name": "Pomegranate",
-      "category": "Produce",
+      "id": 6,
+      "name": "Cookies",
+      "category": "Dessert",
       "isInCart": false
     },
     {
-      "id": 3,
-      "name": "Lettuce",
+      "name": "bread",
       "category": "Produce",
-      "isInCart": false
+      "isInFact": false,
+      "id": 7
     },
     {
-      "id": 4,
-      "name": "String Cheese",
+      "name": "Milk",
       "category": "Dairy",
-      "isInCart": false
+      "isInFact": false,
+      "id": 8
     },
     {
-      "id": 5,
-      "name": "Swiss Cheese",
+      "name": "Cheese",
       "category": "Dairy",
-      "isInCart": false
-    },
-    {
-      "id": 6,
-      "name": "Cookies",
-      "category": "Dessert",
-      "isInCart": false
+      "isInFact": false,
+      "id": 9,
+      "isInCart": true
     }
   ]
 }

src/components/Item.js

@@ -1,14 +1,34 @@
 import React from "react";
 
-function Item({ item }) {
+function Item({ item, onUpdateItem, onDeleteItem }) {
+  const handleAddToCartClick = () => {
+    fetch(`http://localhost:4000/items/${item.id}`,{
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({isInCart: !item.isInCart})
+    })
+      .then(res => res.json())
+      .then(updatedItem => onUpdateItem(updatedItem))
+  }
+
+  const handleDeleteCLick = () => {
+    fetch(`http://localhost:4000/items/${item.id}`, {
+    method: "DELETE",
+  })
+    .then((r) => r.json())
+    .then(() => onDeleteItem(item))
+  }
+
   return (
     <li className={item.isInCart ? "in-cart" : ""}>
       <span>{item.name}</span>
       <span className="category">{item.category}</span>
-      <button className={item.isInCart ? "remove" : "add"}>
+      <button className={item.isInCart ? "remove" : "add"} onClick={handleAddToCartClick} >
         {item.isInCart ? "Remove From" : "Add to"} Cart
       </button>
-      <button className="remove">Delete</button>
+      <button className="remove" onClick={handleDeleteCLick}>Delete</button>
     </li>
   );
 }

src/components/ItemForm.js

@@ -1,11 +1,30 @@
 import React, { useState } from "react";
 
-function ItemForm() {
+function ItemForm({ onAddItem }) {
   const [name, setName] = useState("");
   const [category, setCategory] = useState("Produce");
 
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const itemData = {
+      name: name,
+      category: category,
+      isInFact: false
+    }
+
+    fetch('http://localhost:4000/items',{
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(itemData)
+    })
+      .then(res => res.json())
+      .then(newItem => onAddItem(newItem))
+  }
+
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleSubmit} >
       <label>
         Name:
         <input

src/components/ShoppingList.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ItemForm from "./ItemForm";
 import Filter from "./Filter";
 import Item from "./Item";
@@ -11,6 +11,31 @@ function ShoppingList() {
     setSelectedCategory(category);
   }
 
+  useEffect(() => {
+    fetch('http://localhost:4000/items')
+    .then(res => res.json())
+    .then(items => setItems(items))
+  },[])
+
+  const handleAddItem = (newItem) => {
+    setItems([...items, newItem])
+  }
+
+  const handleUpdateItem = (updatedItem) => {
+    setItems(items.map(item => {
+      if(item.id === updatedItem.id){
+        return updatedItem
+      } else {
+        return item
+      }
+    }))
+  }
+
+  const handleDeletedItem = (deletedItem) => {
+    console.log(deletedItem)
+    setItems(items.filter(item => item.id !== deletedItem.id))
+  }
+
   const itemsToDisplay = items.filter((item) => {
     if (selectedCategory === "All") return true;
 
@@ -19,14 +44,14 @@ function ShoppingList() {
 
   return (
     <div className="ShoppingList">
-      <ItemForm />
+      <ItemForm onAddItem={handleAddItem} />
       <Filter
         category={selectedCategory}
         onCategoryChange={handleCategoryChange}
       />
       <ul className="Items">
         {itemsToDisplay.map((item) => (
-          <Item key={item.id} item={item} />
+          <Item key={item.id} item={item} onUpdateItem={handleUpdateItem} onDeleteItem={handleDeletedItem} />
         ))}
       </ul>
     </div>