110 lines
3.2 KiB
React
110 lines
3.2 KiB
React
import React, { useState, useEffect } from "react";
|
|
import Button from "../ui/button/button";
|
|
import styles from "./PendingMembers.module.css";
|
|
|
|
import getUserToValidate from "../../utils/users/getUserToValidate";
|
|
import getUserById from "../../utils/users/getUserById";
|
|
import validateUser from "../../utils/users/validateUser";
|
|
import deleteUser from "../../utils/users/deleteUser";
|
|
|
|
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 userIds = await getUserToValidate();
|
|
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 removeMember = (id) => {
|
|
setPendingMembers(prevMembers =>
|
|
prevMembers.filter(member => member.id !== id)
|
|
);
|
|
};
|
|
|
|
const handleValidate = async (id) => {
|
|
setActionLoading(id);
|
|
setError(null);
|
|
try {
|
|
const result = await validateUser(id);
|
|
if (result.success) {
|
|
removeMember(id);
|
|
} else {
|
|
setError(result.message || "Échec de la validation.");
|
|
}
|
|
} 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.success) {
|
|
removeMember(id);
|
|
} else {
|
|
setError(result.message || "Échec de la suppression.");
|
|
}
|
|
} catch (err) {
|
|
setError("Erreur lors de la suppression.");
|
|
} finally {
|
|
setActionLoading(null);
|
|
}
|
|
};
|
|
|
|
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>}
|
|
|
|
<div className={styles.membersContainer}>
|
|
{pendingMembers.length === 0 && <p>Aucun membre en attente</p>}
|
|
|
|
{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>
|
|
);
|
|
}
|
|
|
|
export default PendingMembers;
|