From 3b4f9f90518d8e7b4b62823cc2bece915575b134 Mon Sep 17 00:00:00 2001
From: Mike <mclancy96@gmail.com>
Date: Tue, 10 Jun 2025 10:32:11 -0400
Subject: [PATCH 1/3] Toggle light mode on click

---
 src/components/App.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..5918d7d89 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,20 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  const [isLightMode, setIsLightMode] = useState(false)
+  const appClass = isLightMode ? "App dark" : "App light"
 
-  // 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 toggleLightMode = () => {
+    setIsLightMode(isLightMode ? false : true)
+  }
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={toggleLightMode}>{isLightMode ? "Light Mode" : "Dark Mode" }</button>
       </header>
       <ShoppingList items={itemData} />
     </div>

From 833bc4b98338f3896e8aa648779e2af5322a426c Mon Sep 17 00:00:00 2001
From: Mike <mclancy96@gmail.com>
Date: Tue, 10 Jun 2025 10:39:25 -0400
Subject: [PATCH 2/3] Toggle in cart status

---
 src/components/App.js  |  2 +-
 src/components/Item.js | 12 +++++++++---
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 5918d7d89..0eccdd94f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -7,7 +7,7 @@ function App() {
   const appClass = isLightMode ? "App dark" : "App light"
 
   const toggleLightMode = () => {
-    setIsLightMode(isLightMode ? false : true)
+    setIsLightMode(() => isLightMode ? false : true)
   }
 
   return (
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..6f2d0f944 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,11 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Item({ name, category }) {
+  const [isInCart, setIsInCart] = useState(false)
+  const cartStatusClass = isInCart ? 'in-cart' : ''
+  const addToCartText = isInCart ? "Remove from Cart" : 'Add to Cart'
+  const toggleInCartStatus = () => {
+    setIsInCart(() => isInCart ? false : true)
+  }
   return (
-    <li className="">
+    <li className={cartStatusClass}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button onClick={toggleInCartStatus} className="add">{addToCartText}</button>
     </li>
   );
 }

From d848e92427a618f2f3f546d25f6da6570e5f9a10 Mon Sep 17 00:00:00 2001
From: Mike <mclancy96@gmail.com>
Date: Tue, 10 Jun 2025 10:48:58 -0400
Subject: [PATCH 3/3] Filter list of items by selected category

---
 src/components/ShoppingList.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..971a9a154 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,11 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [selectedCategory, setSelectedCategory] = useState('All')
+  const filteredItems = items.filter(item => {
+    return selectedCategory === "All" ? true : item.category === selectedCategory
+  })
+  const handleCategorySelection = (event) => {
+    const newCategory = event.target.querySelector('option:checked').value;
+    setSelectedCategory(newCategory)
+  }
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" onChange={handleCategorySelection}>
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
@@ -13,7 +21,7 @@ function ShoppingList({ items }) {
         </select>
       </div>
       <ul className="Items">
-        {items.map((item) => (
+        {filteredItems.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />
         ))}
       </ul>