From 6fbee06b5d39e32118a9ea6c67eec3fb2f7265cd Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 09:28:38 -0400
Subject: [PATCH 1/6] Toggle dark mode

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

diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..05763d091 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,22 +1,25 @@
-import React from "react";
-import ShoppingList from "./ShoppingList";
-import itemData from "../data/items";
+import React, { useState } from "react"
+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 appClass = false ? "App dark" : "App light"
+  const handleClick = () => {
+    setIsDark(!isDark)
+  }
+
+  const appClass = isDark ? "App dark" : "App light"
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleClick}>Dark Mode</button>
       </header>
       <ShoppingList items={itemData} />
     </div>
-  );
+  )
 }
 
-export default App;
+export default App

From 66e1a441bbfc79dbf232b30baf7eca0862c446bc Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 09:41:47 -0400
Subject: [PATCH 2/6] Add items to cart

---
 src/components/Item.js         | 21 ++++++++++++++++-----
 src/components/ShoppingList.js |  8 ++++----
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..fe03b0298 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,13 +1,24 @@
-import React from "react";
+import React, { useState } from "react"
 
 function Item({ name, category }) {
+  const [isInCart, setIsInCart] = useState(false)
+
+  const handleClick = () => {
+    setIsInCart(!isInCart)
+  }
+
+  const itemClass = isInCart ? "in-cart" : ""
+  const buttonText = isInCart ? "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 onClick={handleClick} className="add">
+        {buttonText}
+      </button>
     </li>
-  );
+  )
 }
 
-export default Item;
+export default Item
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..cb5a02631 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,5 +1,5 @@
-import React from "react";
-import Item from "./Item";
+import React from "react"
+import Item from "./Item"
 
 function ShoppingList({ items }) {
   return (
@@ -18,7 +18,7 @@ function ShoppingList({ items }) {
         ))}
       </ul>
     </div>
-  );
+  )
 }
 
-export default ShoppingList;
+export default ShoppingList

From 30f17b3bb65844214bd64ea76937380fb7608391 Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 09:53:16 -0400
Subject: [PATCH 3/6] Filter by category

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

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index cb5a02631..b15d4078e 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,11 +1,25 @@
-import React from "react"
+import React, { useState } from "react"
 import Item from "./Item"
 
 function ShoppingList({ items }) {
+  const [filteredItems, setFilterItems] = useState(items)
+
+  // log filter value on change
+  const handleFilterChange = (event) => {
+    const filterValue = event.target.value
+    // use value to filter items by their category
+    const newFilteredItems = items.filter((item) => {
+      return item.category === filterValue
+    })
+
+    // display the filtered items instead of the entire items list
+    setFilterItems(newFilteredItems)
+  }
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select onChange={handleFilterChange} name="filter">
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
@@ -13,7 +27,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>

From a3b4d88422f3eded802e5c6f22a7a5b8eae4d2ba Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 09:56:28 -0400
Subject: [PATCH 4/6] Display all items on All

---
 src/components/ShoppingList.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index b15d4078e..090938254 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -4,15 +4,17 @@ import Item from "./Item"
 function ShoppingList({ items }) {
   const [filteredItems, setFilterItems] = useState(items)
 
-  // log filter value on change
   const handleFilterChange = (event) => {
     const filterValue = event.target.value
-    // use value to filter items by their category
+
     const newFilteredItems = items.filter((item) => {
-      return item.category === filterValue
+      if (filterValue === "All") {
+        return true
+      } else {
+        return item.category === filterValue
+      }
     })
 
-    // display the filtered items instead of the entire items list
     setFilterItems(newFilteredItems)
   }
 

From 8c23ba2397d62ae45b1a2773ddc36ee6ac160872 Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 10:02:16 -0400
Subject: [PATCH 5/6] Refactor item filter

---
 src/components/ShoppingList.js | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index 090938254..aad22926c 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -4,15 +4,11 @@ import Item from "./Item"
 function ShoppingList({ items }) {
   const [filteredItems, setFilterItems] = useState(items)
 
-  const handleFilterChange = (event) => {
-    const filterValue = event.target.value
-
+  const handleFilterChange = ({ target: { value } }) => {
     const newFilteredItems = items.filter((item) => {
-      if (filterValue === "All") {
-        return true
-      } else {
-        return item.category === filterValue
-      }
+      if (value === "All") return true
+
+      return item.category === value
     })
 
     setFilterItems(newFilteredItems)

From 70337beabdf16acc2b77bc02211af46c19c371e7 Mon Sep 17 00:00:00 2001
From: Stephen McKeon <stephen.mckeon@powerhrg.com>
Date: Mon, 16 Jun 2025 10:09:29 -0400
Subject: [PATCH 6/6] Toggle dark mode text

---
 src/components/App.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/App.js b/src/components/App.js
index 05763d091..962531113 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -10,12 +10,13 @@ function App() {
   }
 
   const appClass = isDark ? "App dark" : "App light"
+  const buttonText = isDark ? "Light Mode" : "Dark Mode"
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button onClick={handleClick}>Dark Mode</button>
+        <button onClick={handleClick}>{buttonText}</button>
       </header>
       <ShoppingList items={itemData} />
     </div>