82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import styles from "./VolunteersPage.module.css";
|
|
import VolunteerCard from "./components/VolunteersCard/VolunteerCard";
|
|
import getAllUser from "../../utils/users/getAllUsers";
|
|
import ToolBar from "../../components/ToolBar/ToolBar";
|
|
import filter from "../../utils/filter";
|
|
import getUserById from "../../utils/users/getUserById";
|
|
import User from "./interfaces/user.interface";
|
|
import Loading from "../../components/ui/loading/loading";
|
|
|
|
interface Filters {
|
|
alphabetical: "asc" | "desc";
|
|
yearOrder: "asc" | "desc";
|
|
}
|
|
|
|
const VolunteerPage: React.FC = () => {
|
|
const [filters, setFilters] = useState<Filters>({
|
|
alphabetical: "asc",
|
|
yearOrder: "desc",
|
|
});
|
|
|
|
const [users, setUsers] = useState<User[]>([]);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
|
|
useEffect(() => {
|
|
const fetchUsers = async (): Promise<void> => {
|
|
setLoading(true);
|
|
|
|
try {
|
|
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: number): Promise<User | null> => {
|
|
const res = await getUserById(id);
|
|
|
|
if (res.status === 200) {
|
|
return res.data as User;
|
|
}
|
|
|
|
console.warn(`Utilisateur ${id} non récupéré`, res.status);
|
|
return null;
|
|
})
|
|
);
|
|
|
|
setUsers(usersData.filter((user): user is User => user !== null));
|
|
} catch (error) {
|
|
console.error("Erreur réseau", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchUsers();
|
|
}, []);
|
|
|
|
if(loading) return <Loading />;
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<ToolBar
|
|
setFilters={setFilters}
|
|
filters={filters}
|
|
showCreate={false}
|
|
/>
|
|
|
|
<div className={styles.usersList}>
|
|
{filter(users, filters, "user").map((user: User) => (
|
|
<VolunteerCard key={user.id} user={user} />
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VolunteerPage;
|