From a965f01aa41e430e2ecc323431ca07269bd86afb Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Wed, 11 Jun 2025 08:28:09 -0400
Subject: [PATCH 1/3] Toggle dark mode on and off

---
 src/components/App.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..b62f7d9b2 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
@@ -6,13 +6,16 @@ function App() {
 
   // replace 'false' with a state variable that can be toggled between true and false
   // this will be used for the Dark Mode Toggle feature
-  const appClass = false ? "App dark" : "App light"
+
+  const [isDark, setIsDark] = useState(false)
+
+  const appClass = isDark ? "App dark" : "App light"
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={() => setIsDark(!isDark)}>Dark Mode</button>
       </header>
       <ShoppingList items={itemData} />
     </div>

From 6d1da3ee93d11f7a9afc6d8ce08b75f3512624c5 Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Wed, 11 Jun 2025 09:00:23 -0400
Subject: [PATCH 2/3] Add and remove items from cart

---
 src/components/App.js  |  8 ++------
 src/components/Item.js | 11 ++++++++---
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index b62f7d9b2..a58b5809d 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -3,13 +3,9 @@ import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  const [isDark, setIsDark] = useState(false);
 
-  // replace 'false' with a state variable that can be toggled between true and false
-  // this will be used for the Dark Mode Toggle feature
-
-  const [isDark, setIsDark] = useState(false)
-
-  const appClass = isDark ? "App dark" : "App light"
+  const appClass = isDark ? "App dark" : "App light";
 
   return (
     <div className={appClass}>
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..17d9f823c 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,11 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Item({ name, category }) {
+  const [inCart, setInCart] = useState(false);
+
+  const itemClass = inCart ? "in-cart" : "";
+  const buttonText = inCart ? "Remove From Cart" : "Add to Cart";
+
   return (
-    <li className="">
+    <li className={itemClass}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className="add" onClick={() => setInCart(!inCart)}>{buttonText}</button>
     </li>
   );
 }

From 64d8d33e23fdc98b5cd9445386401dc5af77f6fa Mon Sep 17 00:00:00 2001
From: Emily Kanarek <emilyakanarek@gmail.com>
Date: Wed, 11 Jun 2025 09:29:06 -0400
Subject: [PATCH 3/3] Filter shopping list by category

---
 src/components/ShoppingList.js | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..92460e44e 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,22 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [selectedCategory, setCategory] = useState("All");
+
+  function filterItems(items) {
+    const itemsList =
+      selectedCategory === "All"
+        ? items
+        : items.filter((item) => item.category === selectedCategory);
+
+    return itemsList.map((item) => (
+      <Item key={item.id} name={item.name} category={item.category} />
+    ));
+  }
+
+  const itemsList = filterItems(items);
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select
+          name="filter"
+          onChange={(event) => setCategory(event.target.value)}
+        >
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>
         </select>
       </div>
-      <ul className="Items">
-        {items.map((item) => (
-          <Item key={item.id} name={item.name} category={item.category} />
-        ))}
-      </ul>
+      <ul className="Items">{itemsList}</ul>
     </div>
   );
 }