From 47b1074f928886bc748bd1898043474d3848e0bb Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 14:54:30 +0100 Subject: [PATCH 1/7] Create interfaces --- .../Volunteers/interfaces/task.interface.ts | 16 ++++++++++++++++ .../Volunteers/interfaces/user.interface.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) create mode 100644 src/pages/Volunteers/interfaces/task.interface.ts create mode 100644 src/pages/Volunteers/interfaces/user.interface.ts diff --git a/src/pages/Volunteers/interfaces/task.interface.ts b/src/pages/Volunteers/interfaces/task.interface.ts new file mode 100644 index 0000000..b6206c9 --- /dev/null +++ b/src/pages/Volunteers/interfaces/task.interface.ts @@ -0,0 +1,16 @@ +export default interface Task { + id: number; + name: string; + description: string; + location: string; + start: string; + end: string; + max_participants: number; + events_id: number; + created_at: string; + updated_at: string; + pivot: { + user_id: number; + task_id: number; + } +} \ No newline at end of file diff --git a/src/pages/Volunteers/interfaces/user.interface.ts b/src/pages/Volunteers/interfaces/user.interface.ts new file mode 100644 index 0000000..e22a1cd --- /dev/null +++ b/src/pages/Volunteers/interfaces/user.interface.ts @@ -0,0 +1,16 @@ +import Task from "./task.interface"; + +export default interface User { + id: number; + name: string; + lastname: string; + email: string; + role: string; + isAdmin: boolean; + phone: string | null; + created_at: string; + updated_at: string; + verified_at: string | null; + validate: number; + tasks: Task[]; +} \ No newline at end of file From a164db6d763fce5d529f6d5dcc0030f0f9bc6b3f Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 14:54:50 +0100 Subject: [PATCH 2/7] Convert to tsx + move file --- src/pages/Volunteers/VolunteerCard.jsx | 78 ------------------- .../VolunteersCard/VolunteerCard.tsx | 18 +++++ 2 files changed, 18 insertions(+), 78 deletions(-) delete mode 100644 src/pages/Volunteers/VolunteerCard.jsx create mode 100644 src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx diff --git a/src/pages/Volunteers/VolunteerCard.jsx b/src/pages/Volunteers/VolunteerCard.jsx deleted file mode 100644 index f69f6df..0000000 --- a/src/pages/Volunteers/VolunteerCard.jsx +++ /dev/null @@ -1,78 +0,0 @@ -import React, {useState} from "react"; -import styles from "./VolunteersPage.module.css"; -import formatDate from "../../utils/date/formatDate.js"; -import { useNavigate } from "react-router"; -import Button from "../../components/ui/button/button.tsx"; - -export default function VolunteerCard({ user }) { - - const [isExpanded, setIsExpanded] = useState(false); - - const toggleExpand = () => { - setIsExpanded(!isExpanded); - }; - - const navigate = useNavigate(); - - return ( -
setIsExpanded(!isExpanded))}> - -
-

- {user?.name}{" "} - {user?.lastname} -

- - -
- -
- {!isExpanded ? ( -
-

Rôle : {user?.role}

-

Membre depuis : {user?.created_at && formatDate(user.created_at)}

-
- ) : ( -
-
- profile -
- -
-
-

Rôle : {user?.role}

-

Membre depuis : {user?.created_at && formatDate(user.created_at)}

-
- -
-

Email : {user?.email}

- {user?.phone &&

Téléphone : {user.phone}

} -
-
-
- )} -
- - {isExpanded && ( -
- -
- )} - -
- ); - - - -} \ No newline at end of file diff --git a/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx b/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx new file mode 100644 index 0000000..5fde757 --- /dev/null +++ b/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx @@ -0,0 +1,18 @@ +import styles from "./VolunteersCard.module.css"; +import { useNavigate } from "react-router"; +import Button from "../../../../components/ui/button/button"; +import User from "../../interfaces/user.interface" + + +interface VolunteersCardProps { + user: User; +} + +export default function VolunteerCard({ user }: VolunteersCardProps) { + const navigate = useNavigate(); + + return ( +
+
+ ); +} From 63bf3637619a319c7c18278bb1d93ba006971d15 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 14:55:08 +0100 Subject: [PATCH 3/7] Set direction to row --- src/pages/Volunteers/VolunteersPage.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css index 6ef455b..c712e56 100644 --- a/src/pages/Volunteers/VolunteersPage.module.css +++ b/src/pages/Volunteers/VolunteersPage.module.css @@ -26,8 +26,8 @@ .usersList { display: flex; - flex-direction: column; align-items: center; + flex-wrap: wrap; gap: 10px; } .profileboard { From 5cbfad4ade244659e3985fefd3cddaf221f2de6d Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 15:19:58 +0100 Subject: [PATCH 4/7] Convert to typescript --- src/pages/Volunteers/VolunteersPage.jsx | 53 ------------------- src/pages/Volunteers/VolunteersPage.tsx | 68 +++++++++++++++++++++++++ src/router.js | 2 +- 3 files changed, 69 insertions(+), 54 deletions(-) delete mode 100644 src/pages/Volunteers/VolunteersPage.jsx create mode 100644 src/pages/Volunteers/VolunteersPage.tsx diff --git a/src/pages/Volunteers/VolunteersPage.jsx b/src/pages/Volunteers/VolunteersPage.jsx deleted file mode 100644 index 169275a..0000000 --- a/src/pages/Volunteers/VolunteersPage.jsx +++ /dev/null @@ -1,53 +0,0 @@ -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 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) => { - const res = await getUserById(id); - - if (res.status === 200) { - return res.data; - } - console.warn(`Utilisateur ${id} non récupéré`, res.status); - return null; - }) - ); - - setUsers(usersData.filter(Boolean)); - })(); - }, []); - - return ( -
- -
- {filter(users, filters, "user").map((user, index) => ( - - ))} -
-
- ); -} - -export default VolunteerPage; diff --git a/src/pages/Volunteers/VolunteersPage.tsx b/src/pages/Volunteers/VolunteersPage.tsx new file mode 100644 index 0000000..d234833 --- /dev/null +++ b/src/pages/Volunteers/VolunteersPage.tsx @@ -0,0 +1,68 @@ +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"; + +interface Filters { + alphabetical: "asc" | "desc"; + yearOrder: "asc" | "desc"; +} + +const VolunteerPage: React.FC = () => { + const [filters, setFilters] = useState({ + alphabetical: "asc", + yearOrder: "desc", + }); + + const [users, setUsers] = useState([]); + + useEffect(() => { + const fetchUsers = async (): Promise => { + 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 => { + 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: any): user is User => user !== null)); + }; + + fetchUsers(); + }, []); + + return ( +
+ + +
+ {filter(users, filters, "user").map((user: User) => ( + + ))} +
+
+ ); +}; + +export default VolunteerPage; diff --git a/src/router.js b/src/router.js index b9137b0..9d40c88 100644 --- a/src/router.js +++ b/src/router.js @@ -3,7 +3,7 @@ import Layout from "./layout.jsx"; import HomePage from "./pages/Home/HomePage"; import LoginPage from "./pages/Login/LoginPage"; import RegisterPage from "./pages/Register/RegisterPage.jsx"; -import VolunteersPage from "./pages/Volunteers/VolunteersPage"; +import VolunteersPage from "./pages/Volunteers/VolunteersPage.tsx"; import ProfilePage from "./pages/Profile/ProfilePage"; import EventsPage from "./pages/Events/EventsPage.jsx"; import AdminPage from "./pages/Admin/AdminPage.jsx"; From 8441b9f3b250733b260461535bffb7f8c595d4fa Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 15:20:11 +0100 Subject: [PATCH 5/7] Redesign volunteerCard --- .../Volunteers/VolunteersPage.module.css | 12 +++-- .../VolunteersCard/VolunteerCard.tsx | 13 ++++- .../VolunteersCard/VolunteersCard.module.css | 47 +++++++++++++++++++ 3 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css index c712e56..adcb564 100644 --- a/src/pages/Volunteers/VolunteersPage.module.css +++ b/src/pages/Volunteers/VolunteersPage.module.css @@ -25,11 +25,12 @@ } .usersList { - display: flex; - align-items: center; - flex-wrap: wrap; - gap: 10px; + display: grid; + gap: 16px; + width: 100%; + grid-template-columns: 1fr; } + .profileboard { width: 100%; max-width: 380px; @@ -146,6 +147,9 @@ } .usersList { gap: 20px; + grid-template-columns: repeat(3, 1fr); + padding-right: 5em; + padding-left: 5em; } .profileboard { max-width: 700px; diff --git a/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx b/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx index 5fde757..a3d5f01 100644 --- a/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx +++ b/src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx @@ -9,10 +9,21 @@ interface VolunteersCardProps { } export default function VolunteerCard({ user }: VolunteersCardProps) { + const navigate = useNavigate(); + const handleNavigate = (): void => { navigate(`/profile/${user.id}`) } + return ( -
+
+
+ profile +

{user.name} {user.lastname}

+
+
+

{user.email}

+ +
); } diff --git a/src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css b/src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css new file mode 100644 index 0000000..4ed1ccf --- /dev/null +++ b/src/pages/Volunteers/components/VolunteersCard/VolunteersCard.module.css @@ -0,0 +1,47 @@ +.volunteerCard { + display: flex; + flex-direction: column; + gap: 12px; +} + +.header { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; +} + +.header p { + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.content { + display: flex; + align-items: center; + gap: 12px; + min-width: 0; +} + +.content p { + flex: 1; + min-width: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.content button { + flex-shrink: 0; +} + +.profilePicture { + background-color: #1d1d1f; + border-radius: 20px; + width: 40px; + height: 40px; + flex-shrink: 0; +} From d2e969c9156e0b19333fb9cf8a563e846ded4692 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 15:22:38 +0100 Subject: [PATCH 6/7] Add loading --- .../Volunteers/VolunteersPage.module.css | 8 +++ src/pages/Volunteers/VolunteersPage.tsx | 59 ++++++++++++------- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css index adcb564..4f5c444 100644 --- a/src/pages/Volunteers/VolunteersPage.module.css +++ b/src/pages/Volunteers/VolunteersPage.module.css @@ -141,6 +141,14 @@ } } +.loading { + width: 100%; + text-align: center; + font-size: 1.1rem; + opacity: 1; + color: white; +} + @media screen and (min-width: 1024px) { .container { padding: 20px; diff --git a/src/pages/Volunteers/VolunteersPage.tsx b/src/pages/Volunteers/VolunteersPage.tsx index d234833..869d6a5 100644 --- a/src/pages/Volunteers/VolunteersPage.tsx +++ b/src/pages/Volunteers/VolunteersPage.tsx @@ -19,35 +19,45 @@ const VolunteerPage: React.FC = () => { }); const [users, setUsers] = useState([]); + const [loading, setLoading] = useState(true); useEffect(() => { const fetchUsers = async (): Promise => { - const result = await getAllUser(); + setLoading(true); - if (result.status !== 200 || !Array.isArray(result.data)) { - console.error("Erreur lors du chargement des utilisateurs", result); - return; + 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 => { + 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); } - - const usersData = await Promise.all( - result.data.map(async (id: number): Promise => { - 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: any): user is User => user !== null)); }; fetchUsers(); }, []); + return (
{ />
- {filter(users, filters, "user").map((user: User) => ( - - ))} + {loading ? ( +
Chargement des bénévoles…
+ ) : ( + filter(users, filters, "user").map((user: User) => ( + + )) + )}
+
); }; From cea12ae77800f66c9fb6f4bf9bd6b76492702b8b Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 10 Feb 2026 15:29:19 +0100 Subject: [PATCH 7/7] fix style --- .../Volunteers/VolunteersPage.module.css | 24 ++++--------------- 1 file changed, 4 insertions(+), 20 deletions(-) diff --git a/src/pages/Volunteers/VolunteersPage.module.css b/src/pages/Volunteers/VolunteersPage.module.css index 4f5c444..b953cb5 100644 --- a/src/pages/Volunteers/VolunteersPage.module.css +++ b/src/pages/Volunteers/VolunteersPage.module.css @@ -3,26 +3,6 @@ position: relative; padding: 10px; } -.userName { - display: flex; - gap: 5px; - font-weight: bold; - font-size: 1rem; - overflow: hidden; -} - -.firstName { - white-space: nowrap; - flex-shrink: 0; -} - -.lastName { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex-shrink: 1; - max-width: 100px; -} .usersList { display: grid; @@ -31,6 +11,10 @@ grid-template-columns: 1fr; } +.usersList > * { + min-width: 0; +} + .profileboard { width: 100%; max-width: 380px;