Able to validate user

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect} from "react";
 import Button from "../../../../components/ui/button/button.jsx";
 import styles from "./PendingMembers.module.css";
 
@@ -8,104 +8,61 @@ import validateUser from "../../../../utils/users/validateUser.js";
 import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
 
 function PendingMembers() {
-  const [pendingMembers, setPendingMembers] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [actionLoading, setActionLoading] = useState(null);
-  const [error, setError] = useState(null);
 
-  useEffect(() => {
-    const fetchPendingMembers = async () => {
-      setLoading(true);
-      const result = await getUserToValidate();
-      const userIds = result.data
-      if (userIds && userIds.length > 0) {
-        const users = await Promise.all(userIds.map((id) => getUserById(id)));
-        setPendingMembers(users.filter(Boolean));
-      } else {
-        setPendingMembers([]);
-      }
-      setLoading(false);
-    };
-    fetchPendingMembers();
-  }, []);
+    const [pendingMembers, setPendingMembers] = useState([]);
 
-  const removeMember = (id) => {
-    setPendingMembers(prevMembers =>
-      prevMembers.filter(member => member.id !== id)
-    );
-  };
+    const fetchUsers = async () => {
 
-const handleValidate = async (id) => {
-  setActionLoading(id);
-  setError(null);
-  try {
-    const result = await validateUser(id);
-    if (result === true) { 
-      removeMember(id);
-    } else {
-      setError("Échec de la validation.");
+        const result = await getUserToValidate();
+        const userIds = result.data;
+
+        if (userIds && userIds.length > 0) {
+            const users = await Promise.all(userIds.map(id => getUserById(id)));
+            const usersData = users.map(u => u.data);
+            setPendingMembers(usersData);
+        }
     }
-  } catch (err) {
-    setError("Erreur lors de la validation.");
-  } finally {
-    setActionLoading(null);
-  }
-};
 
-const handleReject = async (id) => {
-  setActionLoading(id);
-  setError(null);
-  try {
-    const result = await deleteUser(id);
-    if (result.status >= 200 && result.status < 300) {
-      removeMember(id);
-    } else {
-      setError(result.errors || "Échec de la suppression.");
+    useEffect(() => {
+        fetchUsers();
+    }, []);
+
+    const handleValidate = async (id) => {
+        const result = await validateUser(id);
+        console.log(result);
+        fetchUsers();
     }
-  } catch (err) {
-    setError("Erreur lors de la suppression.");
-  } finally {
-    setActionLoading(null);
-  }
-};
 
+    const handleRefuse = (id) => {
 
-  if (loading) {
-    return <div>Chargement des membres en attente...</div>;
-  }
+    }
 
-  return (
-    <div className={`${styles.rightBlock} glassCard`}>
-      <h2>Membres en attente de validation</h2>
-      {error && <p style={{ color: "red" }}>{error}</p>}
+    return (
+        <div className={`${styles.rightBlock} glassCard`}>
+            <h2>Membres en attente de validation</h2>
 
-      <div className={styles.membersContainer}>
-        {pendingMembers.length === 0 && <p>Aucun membre en attente</p>}
+            <div className={styles.membersContainer}>
+
+                {pendingMembers.length === 0 && <p>Aucun membre en attente</p>}
+
+                {pendingMembers.map((member, index) => (
+
+                    <div key={index} className={`glassCard ${styles.memberCard}`}>
+
+                        <p>{member.name} {member.lastname}</p>
+
+                        <div className={styles.buttonGroup}>
+                            <Button variant="primary" onClick={() => handleValidate(member.id)}>Valider</Button>
+                            <Button variant="danger" onClick={() => handleRefuse(member.id)}>Refuser</Button>
+                        </div>
+
+                    </div>
+
+                ))}
 
-        {pendingMembers.map((member) => (
-          <div key={member.id} className={`glassCard ${styles.memberCard}`}>
-            <p>{member.name} {member.lastname}</p>
-            <div className={styles.buttonGroup}>
-              <Button
-                onClick={() => handleValidate(member.id)}
-                variant="primary"
-                disabled={actionLoading === member.id}
-              >
-                {actionLoading === member.id ? "En cours..." : "Valider"}
-              </Button>
-              <Button
-                onClick={() => handleReject(member.id)}
-                variant="danger"
-                disabled={actionLoading === member.id}
-              >
-                {actionLoading === member.id ? "En cours..." : "Refuser"}
-              </Button>
             </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+        </div>
+    );
 }
 
 export default PendingMembers;