Some stuff

GrossesMitaines/grosses-mitaines-ui/src/pages/MorceauDetail.js

@@ -1,6 +1,8 @@
 import { useEffect } from "react";
 import { useParams } from "react-router-dom";
 import { useState } from "react";
+import { Button } from "react-bootstrap";
+import QtySelect from "../components/QtySelect";
 
 const MorceauDetail = () => {
 
@@ -8,6 +10,25 @@ const MorceauDetail = () => {
     const [item, setItem] = useState({});
     const [isLoading, setIsLoading] = useState(false);
     const [imageSrc, setImageSrc] = useState(null);
+    const [itemQty, setItemQty] = useState(0);
+
+
+    const updateQty = () => {
+        window.setTimeout(() => {
+            fetch(`https://localhost:7292/api/Product/Quantity?id=${id}`)
+                .then(async (response) => {
+                    if (response.ok) {
+                        const qty = await response.json();
+                        setItemQty(qty);
+                    }
+                    else {
+                        console.log("Un erreur est survenu lors de l'appelle de: "
+                            + `https://localhost:7292/api/Product/Quantity?id=${id}`);
+                    }
+                    updateQty();
+                })
+        }, 10000);
+    }
 
     useEffect(() => {
         document.title = 'Morceaux';
@@ -16,6 +37,7 @@ const MorceauDetail = () => {
             const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
             const json = await response.json();
             setItem(json);
+            setItemQty(json.quantity);
         }
 
 
@@ -48,12 +70,12 @@ const MorceauDetail = () => {
             else {
                 return (
                     <>
-                        <h3 className="detail-old-price">
-                            {price.toFixed(2).toString().replace(".", ",")} $ CA
-                        </h3>
                         <h3 className="detail-new-price">
                             {newPrice.toFixed(2).toString().replace(".", ",")} $ CA
                         </h3>
+                        <h5 className="detail-old-price">
+                            {price.toFixed(2).toString().replace(".", ",")} $ CA
+                        </h5>
                     </>
                 );
             }
@@ -112,23 +134,34 @@ const MorceauDetail = () => {
     return (
         <>
             <div className="detail-container">
-                <div className="detail-container-left">
+                <div className="detail-container-image">
                     <div className={!imageSrc ? "cat-load" : "d-none cat-load"} />
                     <img className="detail-image" alt="" src={imageSrc} />
-                    <p className="detail-description">{item.description}</p>
                 </div>
-                <div className="detail-container-right">
+                <div className="detail-container-info">
                     <h1 className="detail-title">{item.title}</h1>
-                    <h2 className="detail-category">Catégorie: {item.category}</h2>
-                    <div className="detail-price-container">
-                        {renderPrice(item.price, item.promoPrice, item.status)}
-                    </div>
+                    <h3 className="detail-category">({item.category})</h3>
+
                     <div className="detail-status-container">
                         {renderStatus(item.status)}
                     </div>
+                    <div className="detail-price-container">
+                        {renderPrice(item.price, item.promoPrice, item.status)}
+                    </div>
+
                     <h5>
-                        Quantité: {item.quantity}
+                        Qté. restante: {item.status == 1 || item.status == 2 || item.status == 5 ? "Aucun" : itemQty}
                     </h5>
+                    <p className="detail-description">{item.description}</p>
+                </div>
+                <div className="detail-container-controls">
+                    <QtySelect
+                        qty={itemQty}
+                    />
+                    <Button className="add-to-cart">
+                        Ajouter au panier
+                    </Button>
+
                 </div>
             </div>
         </>