Complete Code Along

db.json

@@ -6,35 +6,23 @@
       "category": "Dairy",
       "isInCart": false
     },
-    {
-      "id": 2,
-      "name": "Pomegranate",
-      "category": "Produce",
-      "isInCart": false
-    },
     {
       "id": 3,
       "name": "Lettuce",
       "category": "Produce",
-      "isInCart": false
+      "isInCart": true
     },
     {
       "id": 4,
       "name": "String Cheese",
       "category": "Dairy",
-      "isInCart": false
+      "isInCart": true
     },
     {
       "id": 5,
       "name": "Swiss Cheese",
       "category": "Dairy",
-      "isInCart": false
-    },
-    {
-      "id": 6,
-      "name": "Cookies",
-      "category": "Dessert",
-      "isInCart": false
+      "isInCart": true
     }
   ]
 }

src/components/Item.js

@@ -1,16 +1,43 @@
-import React from "react";
+import React from "react"
+
+function Item({item, onUpdateItem, onDeleteItem}) {
+  function handleAddToCartClick() {
+    fetch(`http://localhost:4000/items/${item.id}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        isInCart: !item.isInCart,
+      }),
+    })
+      .then((r) => r.json())
+      .then((updatedItem) => onUpdateItem(updatedItem))
+  }
+
+  function handleDeleteClick() {
+    fetch(`http://localhost:4000/items/${item.id}`, {
+      method: "DELETE",
+    })
+      .then((r) => r.json())
+      .then(() => onDeleteItem(item))
+  }
 
-function Item({ 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>
-  );
+  )
 }
 
-export default Item;
+export default Item

src/components/ItemForm.js

@@ -1,11 +1,29 @@
-import React, { useState } from "react";
+import React, {useState} from "react"
 
-function ItemForm() {
-  const [name, setName] = useState("");
-  const [category, setCategory] = useState("Produce");
+function ItemForm({onAddItem}) {
+  const [name, setName] = useState("")
+  const [category, setCategory] = useState("Produce")
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    const itemData = {
+      name: name,
+      category: category,
+      isInCart: false,
+    }
+    fetch("http://localhost:4000/items", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(itemData),
+    })
+      .then((r) => r.json(itemData))
+      .then((newItem) => onAddItem(newItem))
+  }
 
   return (
-    <form className="NewItem">
+    <form className="NewItem" onSubmit={handleSubmit}>
       <label>
         Name:
         <input
@@ -31,7 +49,7 @@ function ItemForm() {
 
       <button type="submit">Add to List</button>
     </form>
-  );
+  )
 }
 
-export default ItemForm;
+export default ItemForm

src/components/ShoppingList.js

@@ -1,36 +1,67 @@
-import React, { useState } from "react";
-import ItemForm from "./ItemForm";
-import Filter from "./Filter";
-import Item from "./Item";
+import React, {useState, useEffect} from "react"
+import ItemForm from "./ItemForm"
+import Filter from "./Filter"
+import Item from "./Item"
 
 function ShoppingList() {
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const [items, setItems] = useState([]);
+  const [selectedCategory, setSelectedCategory] = useState("All")
+  const [items, setItems] = useState([])
+
+  useEffect(() => {
+    fetch("http://localhost:4000/items")
+      .then((r) => r.json())
+      .then((items) => setItems(items))
+  }, [])
+
+  function handleAddItem(newItem) {
+    setItems([...items, newItem])
+  }
 
   function handleCategoryChange(category) {
-    setSelectedCategory(category);
+    setSelectedCategory(category)
+  }
+
+  function handleUpdateItem(updatedItem) {
+    const updatedItems = items.map((item) => {
+      if (item.id === updatedItem.id) {
+        return updatedItem
+      } else {
+        return item
+      }
+    })
+    setItems(updatedItems)
+  }
+
+  function handleDeleteItem(deletedItem) {
+    const updatedItems = items.filter((item) => item.id !== deletedItem.id)
+    setItems(updatedItems)
   }
 
   const itemsToDisplay = items.filter((item) => {
-    if (selectedCategory === "All") return true;
+    if (selectedCategory === "All") return true
 
-    return item.category === selectedCategory;
-  });
+    return item.category === selectedCategory
+  })
 
   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={handleDeleteItem}
+          />
         ))}
       </ul>
     </div>
-  );
+  )
 }
 
-export default ShoppingList;
+export default ShoppingList