Almost ready le carosse

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

@@ -0,0 +1,43 @@
+import { Card, Button, Form, Row, Col } from 'react-bootstrap';
+import { useContext, useState, useEffect } from 'react';
+import { CartContext } from './Cart';
+
+const CartCard = ({ product }) => {
+
+    const cart = useContext(CartContext);
+    const productQuantity = cart.getProductQuantity(product.id);
+
+    const [imageSrc, setImageSrc] = useState(null);
+
+    useEffect(() => {
+        fetch(`https://localhost:7292/api/Image?id=${product.id}&thumbnail=true`)
+            .then(response => response.blob())
+            .then(blob => {
+                const imageUrl = URL.createObjectURL(blob);
+                setImageSrc(imageUrl);
+            })
+    }, []);
+
+    return (
+        <>
+            <Card>
+                <Card.Body>
+                    <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
+                    <Card.Img className="item-img" variant="top" src={imageSrc} />
+                    <Card.Title>{product.Title}</Card.Title>
+                    <Card.Text>{product.Price}$ CA</Card.Text>
+                    <Form as={Row}>
+                        <Form.Label column="true" sm="6">Dans l'carosse: {productQuantity}</Form.Label>
+                        <Col sm="6">
+                            <Button sm="6" className='mx-2' onClick={() => cart.addOneToCart(product.id, product.quantity)}>+</Button>
+                            <Button sm="6" className='mx-2' onClick={() => cart.removeOneFromCart(product.id)}>-</Button>
+                        </Col>
+                    </Form>
+                    <Button variant="danger" className='my-2' onClick={() => cart.deleteFromCart(product.id)}>Supprimer</Button>
+                </Card.Body>
+            </Card>
+        </>
+    )
+}
+
+export default CartCard;