Show result modal

src/pages/Admin/components/pendingMembers/PendingMembers.jsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from "react";
 import Button from "../../../../components/ui/button/button.jsx";
 import styles from "./PendingMembers.module.css";
-
+import Modal from "../../../../components/ui/modal/modal.jsx";
 import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
 import getUserById from "../../../../utils/users/getUserById.js";
 import validateUser from "../../../../utils/users/validateUser.js";
@@ -9,6 +9,11 @@ import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
 
 function PendingMembers() {
 
+
+    const [open, setOpen] = useState(false);
+    const [message, setMessage] = useState("");
+    const [title, setTitle] = useState("");
+
     const [pendingMembers, setPendingMembers] = useState([]);
 
     const fetchUsers = async () => {
@@ -27,14 +32,35 @@ function PendingMembers() {
         fetchUsers();
     }, []);
 
-    const handleValidate = async (id) => {
+    const handleValidate = async (id, name) => {
         const result = await validateUser(id);
+
+        if(result.status === 200) {
+            setTitle("Utilisateur accepté avec succès")
+            setMessage(`L'utilisateur ${name} a été accepté avec succès`)
+            setOpen(true);
+        } else {
+            setTitle("Erreur")
+            setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`)
+            setOpen(true);
+        }
+
         fetchUsers();
     }
 
-    const handleRefuse = async (id) => {
+    const handleRefuse = async (id, name) => {
         const result = await deleteOtherUser(id);
-        console.log(result);
+
+        if(result.status === 200) {
+            setTitle("Utilisateur refusé avec succès")
+            setMessage(`L'utilisateur ${name} a été refusé avec succès`)
+            setOpen(true);
+        } else {
+            setTitle("Erreur")
+            setMessage(`Une erreur est survenue durant le refus de l'utilisateur ${name}`)
+            setOpen(true);
+        }
+
         fetchUsers();
     }
 
@@ -53,8 +79,8 @@ function PendingMembers() {
                         <p>{member.name} {member.lastname}</p>
 
                         <div className={styles.buttonGroup}>
-                            <Button variant="primary" onClick={() => handleValidate(member.id)}>Valider</Button>
+                            <Button variant="primary" onClick={() => handleValidate(member.id, `${member.name} ${member.lastname}`)}>Valider</Button>
-                            <Button variant="danger" onClick={() => handleRefuse(member.id)}>Refuser</Button>
+                            <Button variant="danger" onClick={() => handleRefuse(member.id, `${member.name} ${member.lastname}`)}>Refuser</Button>
                         </div>
 
                     </div>
@@ -62,6 +88,11 @@ function PendingMembers() {
                 ))}
 
             </div>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={title}>
+                {message}
+            </Modal>
+
         </div>
     );
 }