Add quantity functionality

KevinVanDerSchans · Apr 7, 2024 · 1cbcf7b · 1cbcf7b
1 parent b04ee9f
commit 1cbcf7b
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 15 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -4,7 +4,6 @@
   "semi": false,
   "trailingComma": "es5",
   "tabWidth": 2,
-  "printWidth": 100,
   "bracketSpacing": true,
   "quoteProps": "as-needed",
   "endOfLine": "lf"

diff --git a/src/components/Cart/Cart.jsx b/src/components/Cart/Cart.jsx
@@ -3,9 +3,31 @@ import { useCart } from '../../hooks/useCart'
 import { CartIcon, ClearCartIcon } from '../Icons/Icons'
 import './Cart.css'
 
+function CartItem({ thumbnail, price, title, quantity, addToCart }) {
+  return (
+    <li>
+      <img src={thumbnail} alt={title} />
+
+      <div>
+        <strong>
+          {title} - {price}€
+        </strong>
+      </div>
+
+      <footer>
+        <button>Qty: {quantity}</button>
+
+        <button onClick={addToCart} style={{ color: '#fff' }}>
+          +
+        </button>
+      </footer>
+    </li>
+  )
+}
+
 export function Cart() {
   const cartCheckboxId = useId()
-  const { cart, clearCart } = useCart()
+  const { cart, clearCart, addToCart } = useCart()
 
   return (
     <>
@@ -16,19 +38,13 @@ export function Cart() {
 
       <aside className='cart'>
         <ul>
-          <li>
-            <img src='' alt='Iphone' />
-
-            <div>
-              <strong>iPhone - 1500€</strong>
-            </div>
-
-            <footer>
-              <small>Qty: 1</small>
-
-              <button style={{ color: '#fff' }}>+</button>
-            </footer>
-          </li>
+          {cart.map((product) => (
+            <CartItem
+              key={product.id}
+              {...product}
+              addToCart={() => addToCart(product)}
+            />
+          ))}
         </ul>
 
         <button onClick={clearCart}>