54 lines
1.7 KiB
React
54 lines
1.7 KiB
React
import { useState, useEffect } from "react";
|
|
import styles from "./VolunteersPage.module.css";
|
|
import VolunteerCard from "./VolunteerCard.jsx";
|
|
import getAllUser from "../../utils/users/getAllUsers.js";
|
|
import ToolBar from "../../components/ToolBar/ToolBar.jsx";
|
|
import filter from "../../utils/filter.js";
|
|
import getUserById from "../../utils/users/getUserById.js";
|
|
|
|
function VolunteerPage() {
|
|
const [filters, setFilters] = useState({
|
|
alphabetical: "asc",
|
|
yearOrder: "desc",
|
|
});
|
|
const [users, setUsers] = useState([]);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const result = await getAllUser();
|
|
|
|
if (result.status !== 200 || !Array.isArray(result.data)) {
|
|
console.error("Erreur lors du chargement des utilisateurs", result);
|
|
return;
|
|
}
|
|
|
|
const usersData = await Promise.all(
|
|
result.data.map(async (id) => {
|
|
const res = await getUserById(id);
|
|
|
|
if (res.status === 200) {
|
|
return res.data;
|
|
}
|
|
console.warn(`Utilisateur ${id} non récupéré`, res.status);
|
|
return null;
|
|
})
|
|
);
|
|
|
|
setUsers(usersData.filter(Boolean));
|
|
})();
|
|
}, []);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<ToolBar setFilters={setFilters} filters={filters} showCreate={false} />
|
|
<div className={styles.usersList}>
|
|
{filter(users, filters, "user").map((user, index) => (
|
|
<VolunteerCard key={user.id ?? index} user={user} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VolunteerPage;
|