From 31d58898088abb0fccdc2d6fae5ec9cf2f508881 Mon Sep 17 00:00:00 2001
From: Nihar Patel <niharpatel52@gmail.com>
Date: Thu, 12 Jun 2025 10:19:48 -0400
Subject: [PATCH 1/3] Add dark/light mode toggle

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

diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..9fb5ea820 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  const [colorMode, setColorMode] = useState(false);
+  const appClass = colorMode ? "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 handleColorMode = () => {
+    setColorMode((colorMode) => !colorMode);
+  };
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleColorMode}>
+          {colorMode ? "Light Mode" : "Dark Mode"}
+        </button>
       </header>
       <ShoppingList items={itemData} />
     </div>

From c61c2c8fd1209ebfbc21b13d63d51162e6820182 Mon Sep 17 00:00:00 2001
From: Nihar Patel <niharpatel52@gmail.com>
Date: Thu, 12 Jun 2025 11:15:51 -0400
Subject: [PATCH 2/3] Add Add to cart toggle

---
 src/components/Item.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..b368278f2 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 handleCart = () => setInCart(!inCart);
+
   return (
     <li className="">
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className={inCart ? "in-Cart" : ""} onClick={handleCart}>
+        {inCart ? "Remove From Cart" : "Add to Cart"}
+      </button>
     </li>
   );
 }

From c9b78f33062456a3f4345ceaecbcad0b50f20fd4 Mon Sep 17 00:00:00 2001
From: Nihar Patel <niharpatel52@gmail.com>
Date: Mon, 16 Jun 2025 10:42:46 -0400
Subject: [PATCH 3/3] Complete Lab

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

diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..7dcdae4fc 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,22 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [category, setCategory] = useState("All");
+
+  const handleCategoryChange = (event) => {
+    setCategory(event.target.value);
+  };
+  const itemsToDisplay = items.filter((item) => {
+    if (category === "All") return true;
+    return item.category === category;
+  });
+
+  const renderItems = () => {
+    return itemsToDisplay.map((item) => (
+      <Item key={item.id} name={item.name} category={item.category} />
+    ));
+  };
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" value={category} onChange={handleCategoryChange}>
           <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">{renderItems()}</ul>
     </div>
   );
 }