From 9613ae92110cf7d1a9ebe259b2cee408b0121af9 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Mon, 10 Jun 2024 13:53:14 -0400
Subject: [PATCH 1/2] All Tests Pass

---
 src/__tests__/Item.test.js     |  5 ++-
 src/components/App.js          | 11 +++---
 src/components/Item.js         |  9 ++---
 src/components/ShoppingList.js | 62 +++++++++++++++++++++++++++++++---
 src/data/items.js              |  2 +-
 5 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/src/__tests__/Item.test.js b/src/__tests__/Item.test.js
index 6dca46012..7ca778f12 100644
--- a/src/__tests__/Item.test.js
+++ b/src/__tests__/Item.test.js
@@ -1,6 +1,8 @@
 import "@testing-library/jest-dom";
 import { render, screen, fireEvent } from "@testing-library/react";
 import Item from "../components/Item";
+import ShoppingList from "../components/ShoppingList";
+
 
 test("the <li> does not have a className when initialized", () => {
   const { container } = render(<Item name="Milk" category="Dairy" />);
@@ -9,7 +11,8 @@ test("the <li> does not have a className when initialized", () => {
 });
 
 test("the <li> has a className of 'in-cart' when the Add to Cart button is clicked", () => {
-  const { container } = render(<Item name="Milk" category="Dairy" />);
+  const items = [{ id: 4, name: "Milk", category: "Dairy" }]
+  const { container } = render(<ShoppingList items={items} />);
   fireEvent.click(screen.getByText(/ Cart/));
   expect(container.querySelector(".in-cart")).toBeInTheDocument();
 });
diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..2e3fddfa5 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 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 [darkMode, setDarkMode] = useState(false)
+  const appClass = darkMode ? "App dark" : "App light"
+
+  const handleChangeMode = () => setDarkMode(!darkMode)
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleChangeMode}>{darkMode === true ? "Dark Mode" : "Light Mode"}</button>
       </header>
       <ShoppingList items={itemData} />
     </div>
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..6b6caed6d 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,11 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
+
+function Item({ name, category, addItemFun, cartClass = "" }) {
 
-function Item({ name, category }) {
   return (
-    <li className="">
+    <li className={cartClass}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className="add" onClick={addItemFun}>{cartClass === "" ? "Add to Cart" : "Remove From Cart"}</button>
     </li>
   );
 }
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..526b0dca5 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,11 +1,59 @@
-import React from "react";
+import React, { act, useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [cart, setCart] = useState(items)
+
+  const updateCart = (e) => {
+    const action = e.target.innerHTML
+    console.log('Func ran', e.target.innerHTML)
+    if(action === 'Add to Cart'){
+      addToCart(e)
+    } else {
+      removeFromCart(e)
+    }
+  }
+
+  const addToCart = (e) => {
+    const itemName = e.target.parentElement.childNodes[0].textContent
+    const updatedCart = cart.map(item => {
+      if(item.name === itemName){
+        return {
+          ...item,
+        cartClass: "in-cart"
+        }
+      } else {
+        return item
+      }
+    })
+    setCart(updatedCart)
+  }
+
+  const removeFromCart = (e) => {
+    const itemName = e.target.parentElement.childNodes[0].textContent
+    const updatedCart = cart.map(item => {
+      if(item.name === itemName){
+        return {
+          ...item,
+        cartClass: ""
+        }
+      } else {
+        return item
+      }
+    })
+    setCart(updatedCart)
+  }
+
+  const handleFilter = (e) => {
+    const category = e.target.value
+    const filteredItems = items.filter(item => item.category === category)
+    setCart(filteredItems)
+  }  
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" onChange={handleFilter}>
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
@@ -13,8 +61,14 @@ function ShoppingList({ items }) {
         </select>
       </div>
       <ul className="Items">
-        {items.map((item) => (
-          <Item key={item.id} name={item.name} category={item.category} />
+        {cart.map((item) => (
+          <Item 
+            cartClass={item.cartClass} 
+            key={item.id} 
+            name={item.name} 
+            category={item.category} 
+            addItemFun={updateCart} 
+          />
         ))}
       </ul>
     </div>
diff --git a/src/data/items.js b/src/data/items.js
index f8541d4d2..89f926f1e 100644
--- a/src/data/items.js
+++ b/src/data/items.js
@@ -2,7 +2,7 @@ const items = [
   { id: 1, name: "Yogurt", category: "Dairy" },
   { id: 2, name: "Pomegranate", category: "Produce" },
   { id: 3, name: "Lettuce", category: "Produce" },
-  { id: 4, name: "String Cheese", category: "Dairy" },
+  { id: 4, name: "Milk", category: "Dairy" },
   { id: 5, name: "Cookies", category: "Dessert" },
 ];
 

From 0333d18e10aa415a5f25b9e342e2bfc14b5fa2e9 Mon Sep 17 00:00:00 2001
From: Yuriy Ivanenko <yuriy.ivanenko@powerhrg.com>
Date: Tue, 11 Jun 2024 09:00:30 -0400
Subject: [PATCH 2/2] Refactor Header & Filter out into separate components

---
 src/components/App.js          | 18 +++++++-----------
 src/components/Filter.js       | 16 ++++++++++++++++
 src/components/Header.js       | 12 ++++++++++++
 src/components/Item.js         |  5 ++---
 src/components/ShoppingList.js | 16 +++++-----------
 5 files changed, 42 insertions(+), 25 deletions(-)
 create mode 100644 src/components/Filter.js
 create mode 100644 src/components/Header.js

diff --git a/src/components/App.js b/src/components/App.js
index 2e3fddfa5..a6c328da3 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,23 +1,19 @@
-import React, { useState } 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"
+import Header from "./Header"
 
 function App() {
-
   const [darkMode, setDarkMode] = useState(false)
   const appClass = darkMode ? "App dark" : "App light"
-
-  const handleChangeMode = () => setDarkMode(!darkMode)
+  const onDarkModeClick = () => setDarkMode(!darkMode)
 
   return (
     <div className={appClass}>
-      <header>
-        <h2>Shopster</h2>
-        <button onClick={handleChangeMode}>{darkMode === true ? "Dark Mode" : "Light Mode"}</button>
-      </header>
+      <Header onDarkModeClick={onDarkModeClick} darkMode={darkMode}/>
       <ShoppingList items={itemData} />
     </div>
   );
 }
 
-export default App;
+export default App
diff --git a/src/components/Filter.js b/src/components/Filter.js
new file mode 100644
index 000000000..48e5b975b
--- /dev/null
+++ b/src/components/Filter.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+function Filter({ filterCart }) {
+  return (
+    <div className="Filter">
+      <select name="filter" onChange={filterCart}>
+        <option value="All">Filter by category</option>
+        <option value="Produce">Produce</option>
+        <option value="Dairy">Dairy</option>
+        <option value="Dessert">Dessert</option>
+      </select>
+    </div>
+  )
+}
+
+export default Filter
diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 000000000..82f80ff2e
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,12 @@
+import React from "react";
+
+function Header({ onDarkModeClick, darkMode }) {
+  return (
+    <header>
+      <h2>Shopster</h2>
+      <button onClick={onDarkModeClick}>{darkMode === true ? "Dark Mode" : "Light Mode"}</button>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/src/components/Item.js b/src/components/Item.js
index 6b6caed6d..e8604b5e3 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,14 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 
 function Item({ name, category, addItemFun, cartClass = "" }) {
-
   return (
     <li className={cartClass}>
       <span>{name}</span>
       <span className="category">{category}</span>
       <button className="add" onClick={addItemFun}>{cartClass === "" ? "Add to Cart" : "Remove From Cart"}</button>
     </li>
-  );
+  )
 }
 
 export default Item;
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index 526b0dca5..86903acd4 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,5 +1,6 @@
-import React, { act, useState } from "react";
+import React, { useState } from "react";
 import Item from "./Item";
+import Filter from "./Filter";
 
 function ShoppingList({ items }) {
   const [cart, setCart] = useState(items)
@@ -52,14 +53,7 @@ function ShoppingList({ items }) {
 
   return (
     <div className="ShoppingList">
-      <div className="Filter">
-        <select name="filter" onChange={handleFilter}>
-          <option value="All">Filter by category</option>
-          <option value="Produce">Produce</option>
-          <option value="Dairy">Dairy</option>
-          <option value="Dessert">Dessert</option>
-        </select>
-      </div>
+      <Filter filterCart={handleFilter}/>
       <ul className="Items">
         {cart.map((item) => (
           <Item 
@@ -72,7 +66,7 @@ function ShoppingList({ items }) {
         ))}
       </ul>
     </div>
-  );
+  )
 }
 
-export default ShoppingList;
+export default ShoppingList