add search bar to volunteer page

src/pages/Volunteers/VolunteersPage.jsx

@@ -2,22 +2,34 @@ 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 data = await getAllUser();
-            setUsers(data);
-        }) ()
+            const ids = await getAllUser();
+            const usersData = await Promise.all(ids.map(id => getUserById(id)));
+            setUsers(usersData);
+        })()
     }, [])
 
   return (
     <div className={styles.container}>
-      {users.map((user, index) => <VolunteerCard key={index} id={user} /> )}
+        <ToolBar setFilters={setFilters} filters={filters}/>
+        <div className={styles.usersList}>
+            {filter(users, filters, "user").map((user, index) => (
+                <VolunteerCard key={index} user={user} />
+            ))}
+        </div>
     </div>
   );
 }