Modifyayayayayay

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

@@ -1,5 +1,8 @@
 import { FaTimes } from 'react-icons/fa'
 import { FaTools } from 'react-icons/fa'
+import { useState } from 'react';
+
+import Modify from './Modify';
 
 function renderStatus(statusCode) {
     if (statusCode !== undefined) {
@@ -25,19 +28,26 @@ function renderStatus(statusCode) {
 }
 
 const SimpleItem = ({ item, onDelete, onModify }) => {
+
+    const [isFormvisible, setFormVisibility] = useState(false);
+
     return (
         <div className="inventaire-item">
             <h3>
                 {item.title}
                 <div>
                     <FaTools style={{ color: "gray", cursor: 'pointer' }}
-                        onClick={() => onModify(item.id)} />
+                        onClick={() => setFormVisibility(!isFormvisible)} />
                     <FaTimes style={{ color: "red", cursor: 'pointer' }}
                         onClick={() => onDelete(item.id)} />
                 </div>
             </h3>
-            <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
-            <p> Description: {item.description}</p>
+            {isFormvisible && <Modify morceau={item} onModify={onModify}></Modify>}
+            {!isFormvisible && <div>
+                <p> Categoie: {item.category}, Prix: {item.price}, Promo: {item.promoPrice}, Quantité: {item.quantity}, Disponibilité: {renderStatus(item.status)}</p>
+                <p> Description: {item.description}</p>
+            </div>
+            }
         </div>
     )
 }