add search bar to volunteer page

src/pages/Volunteers/VolunteerCard.jsx

@@ -1,33 +1,24 @@
-import React, {useEffect, useState} from "react";
+import React, {useState} from "react";
 import styles from "./VolunteersPage.module.css";
-import getUserById from "../../utils/users/getUserById.js";
 import formatDate from "../../utils/date/formatDate.js";
 import { useNavigate } from "react-router";
 import Button from "../../components/ui/button/button.jsx";
 
-export default function VolunteerCard({ id }) {
+export default function VolunteerCard({ user }) {
 
     const [isExpanded, setIsExpanded] = useState(false);
-    const [user, setUser] = useState({});
 
     const toggleExpand = () => {
         setIsExpanded(!isExpanded);
     };
 
-    useEffect(() => {
-        (async () => {
-            const data = await getUserById(id);
-            setUser(data);
-        }) ()
-    }, []);
-
     const navigate = useNavigate();
 
     return (
         <div className={`${styles.profileboard} glassCard`}>
 
             <div className={styles.header}>
-                <h2>{user?.name}</h2>
+                <h2>{user?.name} {user?.lastname}</h2>
                  <Button
                     variant={"transparent"}
                     onClick={toggleExpand}
@@ -67,7 +58,7 @@ export default function VolunteerCard({ id }) {
             {isExpanded && (
                 <div className={styles.bottomBar}>
                     <Button
-                        onClick={() => navigate(`/profile/${id}`)}
+                        onClick={() => navigate(`/profile/${user.id}`)}
                         variant="transparent"
                     >
                         Voir plus

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>
   );
 }

src/pages/Volunteers/VolunteersPage.module.css

@@ -1,18 +1,22 @@
 .container {
     width: 100%;
-    padding: 10px;
-    margin-top: 50px;
-    box-sizing: border-box;
+    position: relative;
 }
 
 .profileboard {
-    width: 100%;
-    padding: 15px;
-    margin-top: 3%;
+    width: 80%;
     display: flex;
     flex-direction: column;
     gap: 10px;
     box-sizing: border-box;
+    margin: 1rem 0;
+    padding: 1rem 0.5rem;
+}
+
+.usersList{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .header {
@@ -101,8 +105,6 @@
 
 @media screen and (min-width: 1024px) {
     .container {
-        max-width: 1200px;
-        margin: 50px auto;
         padding: 20px;
     }