Almost ready le carosse

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
-import { Button } from "react-bootstrap";
+import { Button, Form, Row} from 'react-bootstrap';
 import QtySelect from "../components/QtySelect";
+import { CartContext } from "../components/Cart";
+import { useContext } from "react";
 
 const MorceauDetail = () => {
 
@@ -12,11 +14,14 @@ const MorceauDetail = () => {
     const [itemQty, setItemQty] = useState(0);
     const [currentQty, setCurrentQty] = useState(1);
 
+    const cart = useContext(CartContext);
+    const inCartQuantity = cart.getProductQuantity(item.id)
+
     const isNoStock = () => {
         return item.status == 1 || item.status == 2 || item.status == 5;
     }
 
-    const currentQtyChange = (newQty) =>{
+    const currentQtyChange = (newQty) => {
         setCurrentQty(newQty);
     }
 
@@ -139,14 +144,38 @@ const MorceauDetail = () => {
                     <p className="detail-description">{item.description}</p>
                 </div>
                 <div className="detail-container-controls">
-                    <QtySelect
-                        qty={isNoStock() ? 0 : itemQty}
-                        onChange={currentQtyChange}
-                    />
-                    <Button disabled={isNoStock()} className="add-to-cart">
-                        Ajouter au panier
-                    </Button>
-
+                    {inCartQuantity > 0 ?
+                        <>
+                            <Form as={Row}>
+                                <Form.Label sm="6">Dans l'carosse: {inCartQuantity}</Form.Label>
+                                <Button disabled={isNoStock()} className="add-to-cart"
+                                    onClick={() => cart.addOneToCart(item.id, item.quantity)}
+                                    sm="6">
+                                    +
+                                </Button >
+                                <Button disabled={isNoStock()} className="add-to-cart"
+                                    onClick={() => cart.removeOneFromCart(item.id)}
+                                    sm="6">
+                                    -
+                                </Button >
+                            </Form>
+                            <Button disabled={isNoStock()} className="add-to-cart"
+                                onClick={() => cart.deleteFromCart(item.id)} variant="danger"
+                                column="true" sm="6" >
+                                Sortir du carosse
+                            </Button>
+                        </>
+                        :
+                        <>
+                            <QtySelect
+                                qty={isNoStock() ? 0 : itemQty}
+                                onChange={currentQtyChange}
+                            />
+                            <Button disabled={isNoStock()} className="add-to-cart" onClick={() => cart.addToCart(item, currentQty)}>
+                                Ajouter au carosse
+                            </Button>
+                        </>
+                    }
                 </div>
             </div>
         </>