Add add to cart functionality

KevinVanDerSchans · Apr 7, 2024 · bbf4a13 · bbf4a13
1 parent 3cce471
commit bbf4a13
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 31 deletions.
diff --git a/src/components/Icons/Icons.jsx b/src/components/Icons/Icons.jsx
@@ -2,11 +2,11 @@ export function AddToCartIcon() {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width='30'
+      height='30'
       viewBox='0 0 24 24'
-      strokeWidth='1'
-      stroke='currentColor'
+      strokeWidth='1.5'
+      stroke='#fff'
       fill='none'
       strokeLinecap='round'
       strokeLinejoin='round'
@@ -25,11 +25,11 @@ export function RemoveFromCartIcon() {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width='30'
+      height='30'
       viewBox='0 0 24 24'
-      strokeWidth='1'
-      stroke='currentColor'
+      strokeWidth='1.5'
+      stroke='#fff'
       fill='none'
       strokeLinecap='round'
       strokeLinejoin='round'
@@ -49,11 +49,11 @@ export function ClearCartIcon() {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width='30'
+      height='30'
       viewBox='0 0 24 24'
-      strokeWidth='1'
-      stroke='currentColor'
+      strokeWidth='1.5'
+      stroke='#fff'
       fill='none'
       strokeLinecap='round'
       strokeLinejoin='round'
@@ -72,11 +72,11 @@ export function CartIcon() {
   return (
     <svg
       xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
+      width='30'
+      height='30'
       viewBox='0 0 24 24'
-      strokeWidth='1'
-      stroke='currentColor'
+      strokeWidth='1.5'
+      stroke='#fff'
       fill='none'
       strokeLinecap='round'
       strokeLinejoin='round'

diff --git a/src/components/Products/Products.jsx b/src/components/Products/Products.jsx
@@ -1,28 +1,36 @@
 import { useCart } from '../../hooks/useCart'
-import { AddToCartIcon } from '../Icons/Icons'
+import { AddToCartIcon, RemoveFromCartIcon } from '../Icons/Icons'
 import './Products.css'
 
 export function Products({ products }) {
-  const { addToCart } = useCart()
+  const { addToCart, cart } = useCart()
+
+  const checkProductInCart = (product) => {
+    return cart.some((item) => item.id === product.id)
+  }
 
   return (
     <main className='products'>
       <ul>
-        {products.map((product) => (
-          <li key={product.id}>
-            <img src={product.thumbnail} alt={product.title} />
+        {products.map((product) => {
+          const isProductInCart = checkProductInCart(product)
+
+          return (
+            <li key={product.id}>
+              <img src={product.thumbnail} alt={product.title} />
 
-            <div>
-              <strong>{product.title}</strong> - {product.price}€
-            </div>
+              <div>
+                <strong>{product.title}</strong> - {product.price}€
+              </div>
 
-            <div>
-              <button onClick={() => addToCart(product)}>
-                <AddToCartIcon />
-              </button>
-            </div>
-          </li>
-        ))}
+              <div>
+                <button onClick={() => addToCart(product)}>
+                  {isProductInCart ? <RemoveFromCartIcon /> : <AddToCartIcon />}
+                </button>
+              </div>
+            </li>
+          )
+        })}
       </ul>
     </main>
   )