Fix de modification et delete d'image

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

@@ -1,6 +1,6 @@
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Dropdown } from "react-bootstrap";
-import {Button} from "react-bootstrap";
+import { Button } from "react-bootstrap";
 
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
@@ -32,21 +32,57 @@ const Modify = ({ morceau, onModify }) => {
     const [description, setDescription] = useState(morceau.description);
     const [category, setCategory] = useState(morceau.category);
     const [price, setPrice] = useState(morceau.price);
-    const [promoPrice, setPromoPrice] = useState("");
+    const [promoPrice, setPromoPrice] = useState(morceau.promoPrice);
     const [quantity, setQuantity] = useState(morceau.quantity);
-    const [imageName, setImageName] = useState(morceau.imageName);
-    const [status, setStatusValue] = useState(morceau.status)
+    const [status, setStatusValue] = useState(morceau.status);
+
+    const [imageFile, setImage] = useState(null);
+    const [imageUrl, setImageUrl] = useState(null);
+
+
+    useEffect(() => {
+
+        if (imageFile)
+            setImageUrl(URL.createObjectURL(imageFile));
+        else {
+            fetch(`https://localhost:7292/api/Image?id=${morceau.id}`)
+                .then(response => response.blob())
+                .then(blob => {
+                    setImageUrl(URL.createObjectURL(blob));
+                })
+        }
+
+    }, [imageFile]);
+
 
     const id = morceau.id;
 
     const handleSubmit = (e) => {
         e.preventDefault(); // Empêcher de reloader la page au submit.
 
-        // Appeler le comportement onCreation
-        onModify({ id, title, description, category, price, promoPrice, quantity, imageName, status })
+        // Appeler le comportement
+        onModify({
+            id: morceau.id,
+            title: title,
+            description: description,
+            category: category,
+            price: price,
+            promoPrice: promoPrice,
+            quantity: quantity,
+            imageFile: imageFile,
+            imageName: morceau.imageName,
+            status: status,
+        });
     }
 
 
+    const handleImageChange = (e) => {
+        if (e.target.files && e.target.files[0])
+            setImage(e.target.files[0]);
+        else
+            setImage(null);
+    }
+
     return (
         <div className="inventaire-form-container">
             <form className="form-horizontal" onSubmit={handleSubmit}>
@@ -94,11 +130,16 @@ const Modify = ({ morceau, onModify }) => {
                         onChange={(e) => setQuantity(e.target.value)} />
                 </div>
                 <div className="form-group">
-                    <label>Nom Image: </label>
-                    <input type='text' className="form-control form-input"
-                        placeholder="Nom de l'image..."
-                        value={imageName}
-                        onChange={(e) => setImageName(e.target.value)} />
+                    <label>Image: </label>
+                    <input
+                        className="form-control form-input"
+                        type='file'
+                        accept="image/*"
+                        onChange={(e) => handleImageChange(e)} />
+                    {imageUrl && <div className="img-preview-container">
+                        <img className="img-preview" src={imageUrl} />
+                    </div>}
+
                 </div>
                 <div className="form-group">
                     <label>Status: </label>