101 lines
3.2 KiB
React
101 lines
3.2 KiB
React
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";
|
|
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 () => {
|
|
|
|
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);
|
|
} else setPendingMembers([]);
|
|
}
|
|
|
|
useEffect(() => {
|
|
fetchUsers();
|
|
}, []);
|
|
|
|
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, 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);
|
|
}
|
|
|
|
fetchUsers();
|
|
}
|
|
|
|
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;
|