38 lines
1.1 KiB
React
38 lines
1.1 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 ids = await getAllUser();
|
|
const usersData = await Promise.all(ids.map(id => getUserById(id)));
|
|
setUsers(usersData);
|
|
})()
|
|
}, [])
|
|
|
|
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={index} user={user} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VolunteerPage;
|