Rename PendingMembers ui component files

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

@@ -0,0 +1,84 @@
+import React, {useState, useEffect, useContext} from "react";
+import Button from "../../../../components/ui/Button/Button";
+import styles from "./PendingMembers.module.css";
+import Modal from "../../../../components/ui/Modal/Modal";
+import validateUser from "../../../../utils/users/validateUser.js";
+import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
+import { PendingMembersContext } from "../../../../contexts/pendingMembers/PendingMembersContext";
+
+function PendingMembers() {
+
+
+    const [open, setOpen] = useState(false);
+    const [message, setMessage] = useState("");
+    const [title, setTitle] = useState("");
+    const { pendingMembers, updatePendingMembers } = useContext(PendingMembersContext);
+
+    useEffect(() => {
+        updatePendingMembers();
+    }, []);
+
+    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`)
+        } else {
+            setTitle("Erreur")
+            setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`)
+        }
+        setOpen(true);
+        updatePendingMembers();
+    }
+
+    const handleRefuse = async (id, name) => {
+        const result = await deleteOtherUser(id);
+
+        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);
+        }
+
+        updatePendingMembers();
+    }
+
+    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>}
+
+                {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, `${member.name} ${member.lastname}`)}>Valider</Button>
+                            <Button variant="danger" onClick={() => handleRefuse(member.id, `${member.name} ${member.lastname}`)}>Refuser</Button>
+                        </div>
+
+                    </div>
+
+                ))}
+
+            </div>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={title}>
+                {message}
+            </Modal>
+
+        </div>
+    );
+}
+
+export default PendingMembers;