Steven Tong Phung

src/App.jsx

@@ -1,37 +1,90 @@
 import './styles/reset.css'
 import './styles/index.css'
 
-import initialStoreItems from './store-items'
-
-/*
- Here's what a store item should look like
- {
- id: '001-beetroot',
- name: 'beetroot',
- price: 0.35
- }
+import { useState } from 'react'
 
- What should a cart item look like? 🤔
- */
 
-console.log(initialStoreItems)
+import initialStoreItems from './store-items'
 
 export default function App() {
   // Setup state here...
+  const [store, setStore] = useState(initialStoreItems)
+  const [cart, setCart] = useState([])
+
+  const handleClick = (target) => {
+    const itemInCart = cart.findIndex((cartItem) => cartItem.id === target.id)
+
+    if (itemInCart === -1){
+      setCart([...cart,{...target, count: 1}])
+    }
+    else{
+      const newCart = [...cart]
+      newCart[itemInCart].count++
+      setCart(newCart)
+    }
+
+  }
 
+  const incrementCartItem = (target) => {
+    const itemInCart = cart.findIndex((cartItem) => cartItem.id === target.id)
+
+    const newCart = [...cart]
+    newCart[itemInCart].count++
+    setCart(newCart)
+    }
+
+  const decrementCartItem = (target) => {
+    const itemInCart = cart.findIndex((cartItem) => cartItem.id === target.id)
+    // console.log(cart[itemInCart])
+
+    if (cart[itemInCart].count === 1) {
+      const updatedCart = cart.filter((cartItem, index) => index !== itemInCart);
+      console.log(updatedCart)
+      setCart(updatedCart);
+
+    } else {
+      const newCart = [...cart]
+      newCart[itemInCart].count--
+      setCart(newCart)
+    }
+  }
+
+
+
   return (
     <>
       <header id="store">
         <h1>Greengrocers</h1>
         <ul className="item-list store--item-list">
-          {/* Write some code here... */}
+          {store.map((item, index) => (
+            <li key={index}>
+              <div className="store--item-icon">
+              <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+              </div>
+              <button onClick={() => handleClick(item)}>Add to cart</button>
+            </li>
+          ) )
+
+          }
         </ul>
       </header>
       <main id="cart">
         <h2>Your Cart</h2>
         <div className="cart--item-list-container">
           <ul className="item-list cart--item-list">
-            {/* Write some code here... */}
+            {cart.map((item, index) => (
+              <li key={index}>
+              <img
+                className="cart--item-icon"
+                src={`/assets/icons/${item.id}.svg`} alt={item.name}
+              />
+              <p>{item.name}</p>
+              <button className="quantity-btn remove-btn center" onClick={() => decrementCartItem(item)}>-</button>
+              <span className="quantity-text center">{item.count}
+              </span>
+              <button className="quantity-btn add-btn center" onClick={() => incrementCartItem(item)}>+</button>
+            </li>
+            ))}
           </ul>
         </div>
         <div className="total-section">