From 42f7251d79d57601e4d61db2a36cfdeb9bb36d3d Mon Sep 17 00:00:00 2001
From: Shaddy <shadybett540@gmail.com>
Date: Sun, 29 Oct 2023 13:38:50 +0300
Subject: [PATCH] complete

---
 src/components/App.js          | 19 ++++++++++++++-----
 src/components/Item.js         | 12 +++++++++---
 src/components/ShoppingList.js | 24 +++++++++++++++++++++---
 3 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..9cc785165 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  // Create a state variable to track whether dark mode is enabled
+  const [isDarkMode, setIsDarkMode] = 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"
+  // Toggle dark mode
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  // Define the CSS class based on the state variable
+  const appClass = isDarkMode ? "App dark" : "App light";
+
+  // Define the button text based on the state variable
+  const buttonText = isDarkMode ? "Toggle Light Mode" : "Toggle Dark Mode";
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={toggleDarkMode}>{buttonText}</button>
       </header>
       <ShoppingList items={itemData} />
     </div>
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..d375320b9 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); // Initialize with false
+  const toggleCartStatus = () => {
+    setIsInCart(!isInCart); // Toggle the cart status
+  };
   return (
-    <li className="">
+    <li className={isInCart ? "in-cart" : ""}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className="add" onClick={toggleCartStatus}>
+        {isInCart ? "Remove From Cart" : "Add to cart"} {/* "Add to cart" here */}
+      </button>
     </li>
   );
 }
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..67a6f43c2 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,11 +1,29 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  // Create a state variable for the selected category and initialize it to "All"
+  const [selectedCategory, setSelectedCategory] = useState("All");
+
+  // Function to handle changes in the <select> element
+  const handleCategoryChange = (event) => {
+    setSelectedCategory(event.target.value);
+  };
+
+  // Filter items based on the selected category
+  const filteredItems =
+    selectedCategory === "All"
+      ? items
+      : items.filter((item) => item.category === selectedCategory);
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select
+          name="filter"
+          onChange={handleCategoryChange}
+          value={selectedCategory}
+        >
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
@@ -13,7 +31,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>