From ed647c88915752296f35111102ea9c8c8a0f494f Mon Sep 17 00:00:00 2001
From: Charles Mendiburu <charles.mendi1609@gmail.com>
Date: Sun, 13 Apr 2025 12:16:36 +0200
Subject: [PATCH] Ajout message alert valide

---
 Front-end/src/components/Alert.jsx            | 39 +++++++++++++++++++
 .../src/pages/Gestion/ObjectManagement.jsx    |  8 +++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 Front-end/src/components/Alert.jsx

diff --git a/Front-end/src/components/Alert.jsx b/Front-end/src/components/Alert.jsx
new file mode 100644
index 0000000..37aa2f7
--- /dev/null
+++ b/Front-end/src/components/Alert.jsx
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from "react";
+import { Check, X } from "lucide-react";
+import { useAuth } from "../AuthContext";
+
+function Alert({ affAlert, setAffAlert, message }) {
+  const { user } = useAuth();
+
+  // Gère la disparition de l'alerte après 3 secondes
+  useEffect(() => {
+    if (affAlert) {
+      const timer = setTimeout(() => {
+        setAffAlert(false); // Cache l'alerte après 3 secondes
+      }, 3000);
+      return () => clearTimeout(timer); // Nettoie le timer au besoin
+    }
+  }, [affAlert, setAffAlert]);
+
+  return (
+    affAlert && user?.role !== "user" && (
+      <div className="flex flex-col md:flex-row bg-slate-600 w-full md:w-1/2 lg:w-1/3 fixed top-20 right-1 sm:right-4 rounded-lg p-4 md:p-5 items-center gap-4 md:gap-6 shadow-lg opacity-90">
+        <button
+          onClick={() => setAffAlert(false)}
+          className="absolute top-2 right-2 text-white hover:text-gray-300"
+        >
+          <X />
+        </button>
+
+        <Check className="text-green-700 w-12 h-12 md:w-16 md:h-16" />
+
+
+        <p className="text-sm md:text-base text-white text-center md:text-left">
+          {message}
+        </p>
+      </div>
+    )
+  );
+}
+
+export default Alert;
diff --git a/Front-end/src/pages/Gestion/ObjectManagement.jsx b/Front-end/src/pages/Gestion/ObjectManagement.jsx
index de0d447..9825770 100644
--- a/Front-end/src/pages/Gestion/ObjectManagement.jsx
+++ b/Front-end/src/pages/Gestion/ObjectManagement.jsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import axios from "axios";
 import { API_BASE_URL } from "../../config";
 import { useAuth } from "../../AuthContext";
+import Alert from "../../components/Alert";
 
 function ObjectManagement() {
   const {user} = useAuth();
@@ -11,6 +12,8 @@ function ObjectManagement() {
   const [activeFilter, setActiveFilter] = useState("");
   const [objects, setObjects] = useState([]);
   const [nbAffObject, setnbAffObject] = useState(6);
+  const [affAlert, setAffAlert] = useState(false);
+  const [messageAlert, setMessageAlert] = useState(""); 
   
   const filteredDATA = objects.filter((node) => {
     const matchesSearchQuery =
@@ -57,7 +60,8 @@ function ObjectManagement() {
       );
   
       console.log("Réponse du serveur:", response.data);
-      alert("Demande de suppression envoyée à l'administrateur.");
+      setMessageAlert("Demande de suppression envoyée à l'administrateur.");
+      setAffAlert(true);
     } catch (error) {
       console.error("Erreur lors de la requête :", error.response?.data || error.message);
       alert("Erreur lors de la demande.");
@@ -71,6 +75,8 @@ function ObjectManagement() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <Alert affAlert={affAlert} setAffAlert={setAffAlert} message={messageAlert} />
+
         <div className="text-center mb-12">
           <h2 className="text-4xl font-bold text-gray-900 mb-4">
             {(user?.role!=="user")?("Gestion"):("Visualisation")} des <b>Objets</b> connectés.