Almost ready le carosse

GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js

@@ -1,14 +1,42 @@
 import { Button } from "react-bootstrap";
 import { faCartShopping } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Modal, ModalBody, ModalHeader } from "react-bootstrap";
+import { useState, useContext } from "react";
+import { CartCard } from './CartCard';
+import { CartContext } from './Cart';
 
-const CartButton = () =>{
+const CartButton = () => {
 
-    return(
-        <Button id="cart-button">
-            <FontAwesomeIcon icon={faCartShopping}/>
-            <div id="cart-count">3</div>
-        </Button>
+    const [show, setShow] = useState(false);
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+    const cart = useContext(CartContext);
+
+    const productsCount = cart.items.reduce((sum, product) => sum + product.quantity, 0)
+
+    return (
+        <>
+            <Button id="cart-button" onClick={handleShow}>
+                <FontAwesomeIcon icon={faCartShopping} />
+                <div id="cart-count">{productsCount}</div>
+            </Button>
+            <Modal show={show} onHide={handleClose} className="carosse">
+                <ModalHeader closeButton>
+                    <Modal.Title>Carosse</Modal.Title>
+                </ModalHeader>
+                <ModalBody>
+                    {productsCount > 0 ?
+                        <>
+                            <p></p>
+                            {cart.items.map((item) => <CartCard product={item}></CartCard>)}
+                        </>
+                        :
+                        <h1>C'est vide! Rempli le hi hi!</h1>
+                    }
+                </ModalBody>
+            </Modal>
+        </>
     )
 }