add CartActions

src/cart/CartActions.ts

+import { useContext } from 'react';
+
+import { Product } from './CartTypes';
+import { cartContext } from './CartStore';
+const { cartState, dispatch } = useContext(cartContext);
+
+
+export function addToCart(product: Product): Product[] {
+    let cart = cartState.cart;
+
+    // Check if product already exists in cart, then update quantity
+    const existingProduct = cart.find(p => p.name === product.name);
+    if (existingProduct) {
+        existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity + 1 : 1;
+        return setCart(cart);
+    }
+
+    // If not, add product to cart
+    return setCart([...cart, { ...product, quantity: 1 }]);
+}
+
+export function removeFromCart(product: Product): Product[] {
+    let cart = cartState.cart;
+
+    // Check if product already exists in cart, then update quantity
+    const existingProduct = cart.find(p => p.name === product.name);
+    if (existingProduct) {
+        existingProduct.quantity = existingProduct.quantity ? existingProduct.quantity - 1 : 0;
+        // If quantity is 0, remove product from cart
+        if (existingProduct.quantity === 0) {
+            return setCart(cart.filter(p => p.name !== product.name));
+        }
+    }
+
+    return setCart(cart);
+}
+
+export function updateProductQuantity(product: Product, quantity: number): Product[] {
+    let cart = cartState.cart;
+
+    // Check if product already exists in cart, then update quantity
+    const existingProduct = cart.find(p => p.name === product.name);
+    if (existingProduct) {
+        existingProduct.quantity = quantity;
+    }
+
+    return setCart(cart);
+}
+
+function setCart(newCart: Product[]): Product[]{
+    dispatch({ type: 'SET_CART', payload: newCart });
+    return newCart;
+}
\ No newline at end of file

src/components/sell/cart.tsx

@@ -3,28 +3,17 @@ import {Fragment, useContext} from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import { XIcon } from '@heroicons/react/outline'
 
-import { Product } from "../../cart/CartTypes";
 import { cartContext } from '../../cart/CartStore';
 
+import { removeFromCart, updateProductQuantity} from '../../cart/CartActions';
+
 function Cart() {
     const { cartState, dispatch } = useContext(cartContext);
 
-    function removeToCart(product: Product) {
-        let newCart = cartState.cart.filter(p => p.name !== product.name);
-        dispatch({type: 'SET_CART', payload: newCart});
-        
-        //context.totalPrice -= product.price;
-        console.log(cartState);
-    }
-
-    function toggleCart() {
-        dispatch({ type: 'TOGGLE_CART' });
-    }
-
     return (
         // S'abonne au contexte
                 <Transition.Root show={cartState.showCart} as={Fragment}>
-                <Dialog as="div" className="fixed inset-0 overflow-hidden z-40" onClose={() => {toggleCart()}}>
+                <Dialog as="div" className="fixed inset-0 overflow-hidden z-40" onClose={() => {dispatch({ type: 'TOGGLE_CART' })}}>
                   <div className="absolute inset-0 overflow-hidden">
                     <Transition.Child
                       as={Fragment}
@@ -61,7 +50,7 @@ function Cart() {
                               <button
                                 type="button"
                                 className="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
-                                onClick={() => {toggleCart()}}
+                                onClick={() => {dispatch({ type: 'TOGGLE_CART' })}}
                               >
                                 <span className="sr-only">Close panel</span>
                                 <XIcon className="h-6 w-6" aria-hidden="true" />
@@ -101,7 +90,7 @@ function Cart() {
                                                             <button
                                                                 type="button"
                                                                 className="ml-4 text-sm font-medium text-indigo-600 hover:text-indigo-500 sm:ml-0 sm:mt-3"
-                                                                onClick={() => removeToCart(cartItem)}
+                                                                onClick={() => removeFromCart(cartItem)}
                                                             >
                                                                 <span>Supprimer</span>
                                                             </button>

src/components/sellListItem.tsx

@@ -4,6 +4,8 @@ import {
     ShoppingCartIcon,
 } from '@heroicons/react/outline';
 
+import { addToCart } from '../cart/CartActions';
+
 import { Product } from "../cart/CartTypes";
 import { cartContext } from '../cart/CartStore';
 
@@ -15,13 +17,6 @@ const SellListItem = ({product}: {product: Product}) => {
         return `${price.toFixed(2)} €`;
 	}
 
-    function addToCart(product: Product): void {
-        dispatch({
-            type: 'SET_CART',
-            payload: [...cartState.cart, product],
-        });
-    }
-
     return (
                 <li className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
                     <div className="w-full flex items-center justify-between p-6 space-x-6">