43 lines
1.7 KiB
JavaScript
43 lines
1.7 KiB
JavaScript
import { Card, Button, Form, Row, Col } from 'react-bootstrap';
|
|
import { useContext, useState, useEffect } from 'react';
|
|
import { CartContext } from './Cart';
|
|
|
|
export function 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)}>+</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; |