Files
SAE-BUT2/src/pages/Admin/components/PendingMembers/PendingMembers.jsx
T

85 lines
2.8 KiB
React

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;