basic page de détail

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

@@ -1,17 +1,121 @@
 import { useEffect } from "react";
-import {useParams} from "react-router-dom";
+import { json, useParams } from "react-router-dom";
+import { useState } from "react";
 
 const MorceauDetail = () => {
 
-    const {id} = useParams();
+    const { id } = useParams();
+    const [item, setItem] = useState({});
+    const [isLoading, setIsLoading] = useState(false);
 
     useEffect(() => {
         document.title = 'Morceaux';
+        setIsLoading(true);
+        async function fetchData() {
+            const response = await fetch(`https://localhost:7292/api/Product?id=${id}`);
+            const json = await response.json();
+            setItem(json);
+        }
+        fetchData();
+        setIsLoading(false);
     });
 
+    function renderPrice(price, newPrice, status) {
+        if (price !== undefined) {
+            if (status != 3 && status != 4) {
+                return (
+                    <h3 className="detail-price">
+                        {price.toFixed(2).toString().replace(".", ",")} $ CA
+                    </h3>
+                );
+            }
+            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>
+                    </>
+                );
+            }
+        }
+    }
+
+    function renderStatus(statusCode) {
+        if (statusCode !== undefined) {
+
+            switch (statusCode) {
+                case 0:
+                    return (
+                        <h4 className="detail-status detail-status-available">
+                            Disponible
+                        </h4>
+                    );
+
+                case 1:
+                    return (
+                        <h4 className="detail-status detail-status-backorder">
+                            En commande
+                        </h4>
+                    );
+                case 2:
+                    return (
+                        <h4 className="detail-status detail-status-unavailable">
+                            Indisponible
+                        </h4>
+                    );
+                case 3:
+                    return (
+                        <h4 className="detail-status detail-status-clearence">
+                            Liquidation
+                        </h4>
+                    );
+                case 4:
+                    return (
+                        <h4 className="detail-status detail-status-promotion">
+                            Promotion
+                        </h4>
+                    );
+                case 5:
+                    return (
+                        <h4 className="detail-status detail-status-discontinued">
+                            Discontinué
+                        </h4>
+                    );
+                default:
+                    return (
+                        <></>
+                    );
+            }
+        }
+    }
+
     return (
         <>
-        <p>{id}</p>
+            <div className={isLoading ? "cat-load" : "d-none cat-load"} />
+
+            <div className="detail-container">
+                <div className="detail-container-left">
+                    <img className="detail-image" src={`/images/${item.imageName}.jpg`} />
+                    <p className="detail-description">{item.description}</p>
+                </div>
+                <div className="detail-container-right">
+                    <h1 className="detail-title">{item.title} (#{item.id})</h1>
+                    <h2 className="detail-category">{item.category}</h2>
+                    <div className="detail-price-container">
+                        {renderPrice(item.price, item.promoPrice, item.status)}
+                    </div>
+                    <div className="detail-status-container">
+                        {renderStatus(item.status)}
+                    </div>
+                    <h5>
+                        {item.quantity}
+                    </h5>
+                </div>
+            </div>
         </>
     );
 }