boolean-uk · Hamada-AB · Apr 30, 2024
diff --git a/greengrocers-app-diagram.png b/greengrocers-app-diagram.png
diff --git a/index.html b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,31 +1,44 @@
-import './styles/reset.css'
-import './styles/index.css'
+import "./styles/reset.css";
+import "./styles/index.css";
+import initialStoreItems from "./store-items";
 
-import initialStoreItems from './store-items'
+import { useState } from "react";
+import Header from "./Header";
+import Cart from "./Cart";
 
 export default function App() {
+  const [products, setProducts] = useState(initialStoreItems);
+  const [cart, setCart] = useState([]);
+
+  function handleAddToCartClick(event) {
+    const { id } = event.target;
+    const isFound = cart.find((product) => product.id === id);
+
+    products.forEach((product) => {
+      if (product.id === id && !isFound) {
+        setCart([...cart, { ...product, quantity: 1 }]);
+      }
+
+      if (product.id === id && isFound) {
+        const index = cart.findIndex((product) => product.id === id);
+        const item = cart[index];
+
+        const newCart = cart.map((product) => {
+          if (product.id === item.id) {
+            product.quantity = product.quantity + 1;
+          }
+          return product;
+        });
+
+        setCart(newCart);
+      }
+    });
+  }
+
   return (
     <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
-      </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
-      </main>
+      <Header products={products} handleAddToCartClick={handleAddToCartClick} />
+      <Cart cart={cart} setCart={setCart} />
       <div>
         Icons made by
         <a
@@ -40,5 +53,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }
diff --git a/src/Cart.jsx b/src/Cart.jsx
@@ -0,0 +1,30 @@
+import CartList from "./CartList";
+
+export default function Cart(props) {
+  let total = 0;
+
+  props.cart.forEach((product) => {
+    const productQuantity = product.quantity;
+    const productPrice = product.price;
+
+    const cost = productQuantity * productPrice;
+    total += cost;
+  });
+
+  return (
+    <main id="cart">
+      <h2>Your Cart</h2>
+      <div className="cart--item-list-container">
+        <CartList {...props} />
+      </div>
+      <div className="total-section">
+        <div>
+          <h3>Total</h3>
+        </div>
+        <div>
+          <span className="total-number">{total.toFixed(2)}</span>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/src/CartList.jsx b/src/CartList.jsx
@@ -0,0 +1,61 @@
+export default function CartList(props) {
+  function handleIncrementClick(event) {
+    const { id } = event.target;
+
+    const incrementQuantity = props.cart.map((product) => {
+      if (product.id === id) {
+        product.quantity = product.quantity + 1;
+      }
+      return product;
+    });
+
+    props.setCart(incrementQuantity);
+  }
+
+  function handleDecrementClick(event) {
+    const { id } = event.target;
+
+    const decrementQuantity = props.cart.map((product) => {
+      if (product.id === id && product.quantity > 0) {
+        product.quantity = product.quantity - 1;
+      }
+      return product;
+    });
+
+    props.setCart(
+      decrementQuantity.filter((product) => product.quantity !== 0)
+    );
+  }
+
+  return (
+    <ul className="item-list cart--item-list">
+      {props.cart.map((product) => {
+        return (
+          <li key={product.id}>
+            <img
+              className="cart--item-icon"
+              src={`assets/icons/${product.id}.svg`}
+              alt={`foto of ${product.name}`}
+            />
+            <p>{product.name}</p>
+            <button
+              className="quantity-btn remove-btn center"
+              id={product.id}
+              onClick={handleDecrementClick}
+            >
+              -
+            </button>
+            <span className="quantity-text center">{product.quantity}</span>
+            <button
+              className="quantity-btn add-btn center"
+              id={product.id}
+              onClick={handleIncrementClick}
+            >
+              +
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/src/Header.jsx b/src/Header.jsx
@@ -0,0 +1,21 @@
+export default function Header(props) {
+  return (
+    <header id="store">
+      <h1>Greengrocers</h1>
+      <ul className="item-list store--item-list">
+        {props.products.map((product, index) => {
+          return (
+            <li key={index}>
+              <div className="store--item-icon">
+                <img src={`./assets/icons/${product.id}.svg`} alt="beetroot" />
+              </div>
+              <button id={product.id} onClick={props.handleAddToCartClick}>
+                Add to cart
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+    </header>
+  );
+}
diff --git a/src/assets/icons/001-beetroot.svg b/src/assets/icons/001-beetroot.svg
diff --git a/src/assets/icons/002-carrot.svg b/src/assets/icons/002-carrot.svg
diff --git a/src/assets/icons/003-apple.svg b/src/assets/icons/003-apple.svg
diff --git a/src/assets/icons/004-apricot.svg b/src/assets/icons/004-apricot.svg
diff --git a/src/assets/icons/005-avocado.svg b/src/assets/icons/005-avocado.svg