diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js new file mode 100644 index 0000000..2c0fd78 --- /dev/null +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js @@ -0,0 +1,94 @@ +import { createContext, useState } from "react"; + +export const CartContext = createContext({ + items: [], + getProductQuantity: () => { }, + addOneToCart: () => { }, + removeOneFromCart: () => { }, + deleteFromCart: () => { }, + getTotalCost: () => { }, + addToCart: () => { } +}); + +export function CartProvider({ children }) { + + const [cartProducts, setCartProducts] = useState([]); + + function addToCart(product, qty) { + + setCartProducts([...cartProducts, {...product, quantity: parseFloat(qty)}]); + } + + function getProductQuantity(id) { + const quantity = cartProducts.find(product => product.id === id)?.quantity; + if (quantity === undefined) { + return 0; + } + + return quantity; + }; + + function addOneToCart(id, qty) { + const currentQty = getProductQuantity(id); + + if (qty > currentQty) { + setCartProducts( + cartProducts.map( + product => product.id === id + ? { ...product, quantity: parseFloat(product.quantity) + 1 } + : product + ) + ); + } + }; + + function removeOneFromCart(id) { + const currentQty = getProductQuantity(id); + + if (currentQty === 1) + deleteFromCart(); + else + setCartProducts( + cartProducts.map( + product => product.id === id + ? { ...product, quantity: parseFloat(product.quantity) - 1 } + : product + ) + ); + }; + + function deleteFromCart(id) { + setCartProducts( + cartProducts => cartProducts.filter(currentProduct => { + return currentProduct.id != id; + }) + ); + }; + + function getTotalCost() { + let totalCost = 0; + cartProducts.map((cartItem) => { + totalCost += (cartItem.Price * cartItem.quantity); + }); + + return totalCost; + }; + + const contextValue = { + items: cartProducts, + getProductQuantity, + addOneToCart, + removeOneFromCart, + deleteFromCart, + getTotalCost, + addToCart + }; + + return ( + + {children} + + ); +} + +export default CartProvider; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js b/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js index 13ad008..eb00b78 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/CartButton.js +++ b/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( - + 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 ( + <> + + + + Carosse + + + {productsCount > 0 ? + <> +

+ {cart.items.map((item) => )} + + : +

C'est vide! Rempli le hi hi!

+ } + + + ) } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/CartCard.js b/GrossesMitaines/grosses-mitaines-ui/src/components/CartCard.js new file mode 100644 index 0000000..89c14a1 --- /dev/null +++ b/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 ( + <> + + +
+ + {product.Title} + {product.Price}$ CA +
+ Dans l'carosse: {productQuantity} + + + + +
+ + + + + ) +} + +export default CartCard; \ No newline at end of file diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js index 44de97f..894a5d1 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js @@ -12,6 +12,8 @@ const Topbar = () => { const [cookies, setCookie, removeCookie] = useCookies(['name']); const [user, setLogin] = useState(null); + + useEffect(() => { async function reset() { await setLogin(await cookies.GMGM ?? null); @@ -29,103 +31,103 @@ const Topbar = () => { } return ( - - - - - - - - - - + <> + + + + - - - + + + + + + + + ); } diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js index 0cf96cf..f35c37a 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js @@ -2,13 +2,16 @@ import React from "react"; import { Outlet } from "react-router-dom"; import Topbar from "../components/Topbar"; import Footer from "../components/Footer"; +import CartProvider from "../components/Cart"; const Layout = () => { return ( <> - - -
+ + + +
+ ); }; diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js index 9e8a131..d29bb08 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js +++ b/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 = () => {

{item.description}

- - - + {inCartQuantity > 0 ? + <> +
+ Dans l'carosse: {inCartQuantity} + + +
+ + + : + <> + + + + }