From 48f77de44144d8ea09c1169c961651debefb3175 Mon Sep 17 00:00:00 2001
From: DavidBelisle <79233327+DavidBelisle@users.noreply.github.com>
Date: Mon, 7 Nov 2022 23:36:19 -0500
Subject: [PATCH] Almost ready le carosse
---
.../src/components/Cart.js | 94 +++++++++
.../src/components/CartButton.js | 40 +++-
.../src/components/CartCard.js | 43 ++++
.../src/components/Topbar.js | 194 +++++++++---------
.../grosses-mitaines-ui/src/pages/Layout.js | 9 +-
.../src/pages/MorceauDetail.js | 49 ++++-
6 files changed, 314 insertions(+), 115 deletions(-)
create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/Cart.js
create mode 100644 GrossesMitaines/grosses-mitaines-ui/src/components/CartCard.js
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}
+
+
+
+
+ >
+ :
+ <>
+
+
+ >
+ }
>