correction error messages

GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js

@@ -1,19 +1,23 @@
 import { useState } from "react"
+import { Dropdown } from "react-bootstrap";
 
 const Ajouter = ({ onCreation }) => {
 
+    const [currentStatus, setStatus] = useState("Disponible");
+
     const [title, setTitle] = useState("");
     const [description, setDescription] = useState("");
     const [category, setCategory] = useState("");
     const [price, setPrice] = useState("");
     const [quantity, setQuantity] = useState("");
     const [imageName, setImageName] = useState("sqdc.jpg");
+    const [statusValue, setStatusValue] = useState(0)
 
     const handleSubmit = (e) => {
         e.preventDefault(); // Empêcher de reloader la page au submit.
 
         // Appeler le comportement onCreation
-        onCreation({ title, description, category, price, quantity, imageName })
+        onCreation({ title, description, category, price, quantity, imageName, statusValue })
 
         // Reset les états du formulaire.
         setTitle("")
@@ -71,6 +75,50 @@ const Ajouter = ({ onCreation }) => {
                         value={imageName}
                         onChange={(e) => setImageName(e.target.value)} />
                 </div>
+                <Dropdown className='status-dropdown'>
+                    <Dropdown.Toggle id="dropdown-status">
+                        {currentStatus}
+                    </Dropdown.Toggle>
+
+                    <Dropdown.Menu className='sorting-menu'>
+                        <Dropdown.Item key="0" onClick={() => {
+                            setStatus("Disponible"); // Mets le nom afficher quand le dropdown est fermé
+                            setStatusValue(0);
+                        }}>
+                            Disponible {/*Le nom de l'option*/}
+                        </Dropdown.Item>
+                        <Dropdown.Item key="1" onClick={() => {
+                            setStatus("Indisponible");
+                            setStatusValue(1);
+                        }}>
+                            Indisponible
+                        </Dropdown.Item>
+                        <Dropdown.Item key="2" onClick={() => {
+                            setStatus("En Commande");
+                            setStatusValue(2);
+                        }}>
+                            En Commande
+                        </Dropdown.Item>
+                        <Dropdown.Item key="3" onClick={() => {
+                            setStatus("Liquidation");
+                            setStatusValue(3);
+                        }}>
+                            Liquidation
+                        </Dropdown.Item>
+                        <Dropdown.Item key="4" onClick={() => {
+                            setStatus("Promotion");
+                            setStatusValue(4);
+                        }}>
+                            Promotion
+                        </Dropdown.Item>
+                        <Dropdown.Item key="5" onClick={() => {
+                            setStatus("Discontinué");
+                            setStatusValue(5);
+                        }}>
+                            Discontinué
+                        </Dropdown.Item>
+                    </Dropdown.Menu>
+                </Dropdown>
 
                 <input className="btn-primary ajouter" type="submit" value="Ajouter Morceau"></input>
             </form>

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

@@ -36,7 +36,7 @@ const Home = () => {
             <div className="home-text">
                 <h1 className="home-title">Les Grosses Mitaines</h1>
                 <h4 className="home-subtitle">(à Ginette et Monique)</h4>
-                <img src="/images/LesGrossesMitaines.png" className="home-img"/>
+                <img src="/images/LesGrossesMitaines.png" className="home-img" alt="home"/>
                 <br/>
                 <h2 className="home-description">Des produits bien commodes faits par des aînées d'expérience.</h2>
             </div>

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { json, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { useState } from "react";
 
 const MorceauDetail = () => {
@@ -18,11 +18,11 @@ const MorceauDetail = () => {
         }
         fetchData();
         setIsLoading(false);
-    },[]);
+    });
 
     function renderPrice(price, newPrice, status) {
         if (price !== undefined) {
-            if (status != 3 && status != 4) {
+            if (status !== 3 && status !== 4) {
                 return (
                     <h3 className="detail-price">
                         {price.toFixed(2).toString().replace(".", ",")} $ CA
@@ -99,7 +99,7 @@ const MorceauDetail = () => {
 
             <div className="detail-container">
                 <div className="detail-container-left">
-                    <img className="detail-image" src={`/images/${item.imageName}.jpg`} />
+                    <img className="detail-image" alt="" src={`/images/${item.imageName}.jpg`} />
                     <p className="detail-description">{item.description}</p>
                 </div>
                 <div className="detail-container-right">