add search bar to volunteer page

package-lock.json

@@ -12,7 +12,8 @@
         "react": "^19.1.1",
         "react-chartjs-2": "^5.3.1",
         "react-dom": "^19.1.1",
-        "react-router": "^7.9.4"
+        "react-router": "^7.9.4",
+        "react-router-dom": "^7.10.1"
       },
       "devDependencies": {
         "@chromatic-com/storybook": "^4.1.2",
@@ -4511,9 +4512,9 @@
       }
     },
     "node_modules/react-router": {
-      "version": "7.9.4",
+      "version": "7.10.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.9.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
-      "integrity": "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA==",
+      "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
       "license": "MIT",
       "dependencies": {
         "cookie": "^1.0.1",
@@ -4532,6 +4533,22 @@
         }
       }
     },
+    "node_modules/react-router-dom": {
+      "version": "7.10.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
+      "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.10.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/recast": {
       "version": "0.23.11",
       "resolved": "https://registry.npmjs.org/recast/-/recast-0.23.11.tgz",

package.json

@@ -17,7 +17,8 @@
     "react": "^19.1.1",
     "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.9.4"
+    "react-router": "^7.9.4",
+    "react-router-dom": "^7.10.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",

src/components/Filter/Filter.jsx

@@ -37,18 +37,18 @@ function Filter({isFilterVisible, filters, setFilters}){
                 </button>
             </abbr>
 
-            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
+            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
-                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
+                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
-                        onClick={() => setYearOrder("asc")}>
+                        onClick={() => setYearOrder("desc")}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
                         <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm400 0v-488l-44 44-56-56 140-140 140 140-57 56-43-43v487h-80ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
                     </svg>
                 </button>
             </abbr>
 
-            <abbr title="Tri chronologique décroissant (du plus récent au plus ancien)">
+            <abbr title="Tri chronologique croissant (du plus ancien au plus récent)">
-                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "desc" ? "" : styles.active}`}
+                <button className={`${styles.filterTag} glassCard ${filters.yearOrder !== "asc" ? "" : styles.active}`}
-                        onClick={() => setYearOrder("desc")}>
+                        onClick={() => setYearOrder("asc")}>
                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor">
                         <path d="M340-160q-125 0-212.5-87.5T40-460q0-125 87.5-212.5T340-760q52 0 98 16.5t84 45.5l42-42 56 56-42 42q29 38 45.5 84.5T640-460q0 125-87.5 212.5T340-160Zm440 0L640-300l56-56 44 44v-488h80v487l43-43 57 56-140 140ZM240-800v-80h200v80H240Zm100 560q92 0 156-64t64-156q0-92-64-156t-156-64q-92 0-156 64t-64 156q0 92 64 156t156 64Zm-40-180h80v-200h-80v200Zm40-40Z"/>
                     </svg>

src/components/Filter/Filter.module.css

@@ -48,7 +48,7 @@
 
 
 .filterTag svg {
-    transform: scale(1);
+    transform: scale(0.7);
     color: black;
 }
 
@@ -59,7 +59,7 @@
 
 .active svg {
     fill: #019AFF;
-    transform: scale(1);
+    transform: scale(0.8);
 }
 
 @media screen and (max-width: 768px){

src/components/SearchBar/SearchBar.jsx

@@ -2,10 +2,14 @@ import styles from "./SearchBar.module.css"
 import {Link} from "react-router";
 import {useEffect, useState} from "react";
 import searchEvents from "../../utils/searchEvents.js";
+import searchUsers from "../../utils/searchUsers.js";
+import { useLocation } from "react-router-dom";
+
 
 function SearchBar() {
     const [searchQuery, setSearchQuery] = useState('');
     const [searchResults, setSearchResults] = useState([]);
+    const location = useLocation();
 
     useEffect(() => {
         const performSearch = async (query) => {
@@ -14,7 +18,15 @@ function SearchBar() {
                 return;
             }
 
-            const data = await searchEvents(query);
+            let data;
+
+            if (location.pathname.includes("events")) {
+                data = await searchEvents(query);
+            } else if (location.pathname.includes("volunteers")) {
+                data = await searchUsers(query);
+            }
+
+
             if (data) {
                 setSearchResults(data);
             } else {
@@ -34,7 +46,7 @@ function SearchBar() {
 
     return (
         <div className={`${styles.searchBarContainer} glassCard`}>
-            <form className={styles.searchBarForm} onSubmit={(event) => event.preventDefault()}>
+            <form className={styles.searchBarForm} onSubmit={(element) => element.preventDefault()}>
                 <svg xmlns="http://www.w3.org/2000/svg" width="24px" viewBox="0 -960 960 960" fill="#currentColor">
                     <path
                         d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
@@ -43,7 +55,7 @@ function SearchBar() {
                     type="text"
                     placeholder="Rechercher un événement"
                     value={searchQuery}
-                    onChange={(event) => setSearchQuery(event.target.value)}
+                    onChange={(element) => setSearchQuery(element.target.value)}
                 />
             </form>
 
@@ -55,18 +67,33 @@ function SearchBar() {
 
 
             {searchResults.map((result, i) => (
-                <Link to={`/event/` + event.id}>
+                (location.pathname.includes("events")) ? (
-                    <div className={styles.searchedEvent} key={i}>
+                    <Link to={`/event/` + result.id}>
-                        <div className={`${styles.eventImageDiv}`}>
+                        <div className={styles.searchedEvent} key={i}>
-                            {result.image == null ? (
+                            <div className={`${styles.eventImageDiv}`}>
-                                <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                                {result.image == null ? (
-                            ) : (
+                                    <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
-                                <img src={result.image + `.png`} alt="Photo de l'événement" />
+                                ) : (
-                            )}
+                                    <img src={result.image + `.png`} alt="Photo de l'événement" />
+                                )}
+                            </div>
+                            <p>{result.name}</p>
                         </div>
-                        <p>{result.name}</p>
+                    </Link>
-                    </div>
+                ) : location.pathname.includes("volunteers") ? (
-                </Link>
+                    <Link to={`/profile/` + result.id}>
+                        <div className={styles.searchedEvent} key={i}>
+                            <div className={`${styles.eventImageDiv}`}>
+                                {result.image == null ? (
+                                    <img src="empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                                ) : (
+                                    <img src={result.image + `.png`} alt="Photo de l'événement" />
+                                )}
+                            </div>
+                            <p>{result.name} {result.lastname}</p>
+                        </div>
+                    </Link>
+                ) : null
             ))}
         </div>
     );

src/components/SearchBar/SearchBar.module.css

@@ -4,6 +4,7 @@
     z-index: 100;
     width: 60%;
     background: #fff;
+    padding: 0.5rem;
 }
 
 .searchBarForm{

src/components/ToolBar/ToolBar.module.css

@@ -60,7 +60,7 @@
 }
 
 .sortButton svg, .searchButton svg {
-    transform: scale(0.8);
+    transform: scale(0.5);
     fill: #019AFF;
 }
 

src/pages/Events/EventsPage.jsx

@@ -9,7 +9,7 @@ import getAllEvents from "../../utils/event/getAllEvents.js";
 function EventsPage(){
     const [filters, setFilters] = useState({
         alphabetical: "asc",
-        yearOrder: "asc",
+        yearOrder: "desc",
     });
 
 
@@ -29,7 +29,7 @@ function EventsPage(){
         <div className={styles.eventsContainer}>
             <ToolBar setFilters={setFilters} filters={filters}/>
             <div className={styles.eventsList}>
-                {filter(events, filters).map((event, index) => (
+                {filter(events, filters, "event").map((event, index) => (
                     <Event key={index} event={event} />
                 ))}
             </div>

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();
+            const ids = await getAllUser();
-            setUsers(data);
+            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;
+    position: relative;
-    margin-top: 50px;
-    box-sizing: border-box;
 }
 
 .profileboard {
-    width: 100%;
+    width: 80%;
-    padding: 15px;
-    margin-top: 3%;
     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;
     }
 

src/utils/filter.js

@@ -1,31 +1,30 @@
-function filter(elements, filters) {
+function filter(elements, filters, type) {
     const compareDate = (dateA, dateB) => {
         const dA = new Date(dateA);
         const dB = new Date(dateB);
 
         if (filters.yearOrder === "asc") {
-            return dB - dA;
+            return dA - dB; // plus ancien -> plus récent
         } else {
-            return dA - dB;
+            return dB - dA; // plus récent -> plus ancien
         }
     };
 
-
     return [...elements].sort((a, b) => {
-        const sortedATasks = a.tasks.sort((taskA, taskB) =>
+        let timeComparison;
-            compareDate(taskA.start, taskB.start)
-        );
-        const sortedBTasks = b.tasks.sort((taskA, taskB) =>
-            compareDate(taskA.start, taskB.start)
-        );
 
-        const timeComparison = compareDate(
+        if (filters.yearOrder !== null) {
-            sortedATasks[0].start,
+            if (type === "event") {
-            sortedBTasks[0].start
+                timeComparison = compareDate(a.start, b.start);
-        );
+            }
 
-        if (timeComparison !== 0) {
+            else if (type === "user") {
-            return timeComparison;
+                timeComparison = compareDate(a.created_at, b.created_at);
+            }
+
+            if (timeComparison !== 0 && timeComparison !== undefined) {
+                return timeComparison;
+            }
         }
 
         if (filters.alphabetical !== null) {
@@ -38,5 +37,4 @@ function filter(elements, filters) {
     });
 }
 
-
+export default filter;
-export default filter;

src/utils/searchUsers.js

@@ -0,0 +1,22 @@
+export default async function searchUsers(query) {
+    try {
+        const encodedQuery = encodeURIComponent(query);
+        const response = await fetch(
+            `http://localhost:80/api/users/search?query=${encodedQuery}`,
+            {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                }
+            }
+        );
+        const data = await response.json();
+        return data.hits.map(hit => hit.document);
+
+    } catch (err) {
+        console.error("Erreur :", err);
+        return null;
+    }
+}