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 01/32] 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 02/32] 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 03/32] 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 04/32] 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 05/32] 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 06/32] 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 07/32] 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; From ed9067169336878fee61d2dbe4e112822d92f57b Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 11 Feb 2026 15:35:05 +0100 Subject: [PATCH 08/32] Create component for searchBar + btn --- src/components/SearchBar/SearchBar.jsx | 100 --------------- src/components/SearchBar/SearchBar.module.css | 4 +- src/components/SearchBar/SearchBar.tsx | 120 ++++++++++++++++++ .../components/searchBtn/SearchBtn.tsx | 38 ++++++ 4 files changed, 161 insertions(+), 101 deletions(-) delete mode 100644 src/components/SearchBar/SearchBar.jsx create mode 100644 src/components/SearchBar/SearchBar.tsx create mode 100644 src/components/ToolBar/components/searchBtn/SearchBtn.tsx diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx deleted file mode 100644 index a1dded2..0000000 --- a/src/components/SearchBar/SearchBar.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import styles from "./SearchBar.module.css" -import {Link} from "react-router"; -import {useEffect, useState} from "react"; -import searchEvents from "../../utils/events/searchEvents.js"; -import searchUsers from "../../utils/users/searchUsers.js"; -import { useLocation } from "react-router"; - - -function SearchBar() { - const [searchQuery, setSearchQuery] = useState(''); - const [searchResults, setSearchResults] = useState([]); - const location = useLocation(); - - useEffect(() => { - const performSearch = async (query) => { - if (query.trim() === '') { - setSearchResults([]); - return; - } - - 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 { - setSearchResults([]); - } - }; - - - const handler = setTimeout(() => { - performSearch(searchQuery); - }, 300); - - return () => { - clearTimeout(handler); - }; - }, [searchQuery]); - - return ( -
-
element.preventDefault()}> - Rechercher - setSearchQuery(element.target.value)} - /> -
- -
- {searchResults.length > 0 ? ( -
- ) : null} -
- -
- {searchResults.map((result, i) => ( - (location.pathname.includes("events")) ? ( - -
-
- {result.image == null ? ( - Pas de photo de l'événement - ) : ( - Photo de l'événement - )} -
-

{result.name}

-
- - ) : location.pathname.includes("volunteers") ? ( - -
-
- {result.image == null ? ( - Pas de photo de l'événement - ) : ( - Photo de l'événement - )} -
-

{result.name} {result.lastname}

-
- - ) : null - ))} -
-
- ); -} - -export default SearchBar; \ No newline at end of file diff --git a/src/components/SearchBar/SearchBar.module.css b/src/components/SearchBar/SearchBar.module.css index d35c808..c6a093d 100644 --- a/src/components/SearchBar/SearchBar.module.css +++ b/src/components/SearchBar/SearchBar.module.css @@ -1,6 +1,8 @@ .searchBarContainer{ position: fixed; - top: 4rem; + top: 20vh; + left: 50%; + transform: translateX(-50%); z-index: 100; width: 60%; background: #fff; diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx new file mode 100644 index 0000000..d1ef4c6 --- /dev/null +++ b/src/components/SearchBar/SearchBar.tsx @@ -0,0 +1,120 @@ +import styles from "./SearchBar.module.css"; +import { Link } from "react-router"; +import { useEffect, useState } from "react"; +import searchEvents from "../../utils/events/searchEvents.js"; +import searchUsers from "../../utils/users/searchUsers.js"; +import { useLocation } from "react-router"; + +function SearchBar(): any { + const [searchQuery, setSearchQuery] = useState(""); + const [searchResults, setSearchResults] = useState([]); + const location: any = useLocation(); + + useEffect(() => { + const performSearch = async (query: string): Promise => { + if (query.trim() === "") { + setSearchResults([]); + return; + } + + let data: any; + + if (location.pathname.includes("events")) { + data = await searchEvents(query); + } else if (location.pathname.includes("volunteers")) { + data = await searchUsers(query); + } + + if (data) { + setSearchResults(data); + } else { + setSearchResults([]); + } + }; + + const handler: ReturnType = setTimeout(() => { + performSearch(searchQuery); + }, 300); + + return () => { + clearTimeout(handler); + }; + }, [searchQuery, location.pathname]); + + return ( +
+
) => + element.preventDefault() + } + > + Rechercher + ) => + setSearchQuery(element.target.value) + } + /> +
+ +
+ {searchResults.length > 0 ? ( +
+ ) : null} +
+ +
+ {searchResults.map((result: any, i: number) => + location.pathname.includes("events") ? ( + +
+
+ {result.image == null ? ( + Pas de photo de l'événement + ) : ( + Photo de l'événement + )} +
+

{result.name}

+
+ + ) : location.pathname.includes("volunteers") ? ( + +
+
+ {result.image == null ? ( + Pas de photo de l'événement + ) : ( + Photo de l'événement + )} +
+

+ {result.name} {result.lastname} +

+
+ + ) : null + )} +
+
+ ); +} + +export default SearchBar; diff --git a/src/components/ToolBar/components/searchBtn/SearchBtn.tsx b/src/components/ToolBar/components/searchBtn/SearchBtn.tsx new file mode 100644 index 0000000..c93e24a --- /dev/null +++ b/src/components/ToolBar/components/searchBtn/SearchBtn.tsx @@ -0,0 +1,38 @@ +import styles from "../../ToolBar.module.css" +import Button from "../../../ui/button/button"; +import { useEffect, useState } from "react"; +import SearchBar from "../../../SearchBar/SearchBar"; + +export default function SearchBtn() { + + const [isSearchVisible, setIsSearchVisible] = useState(false); + + useEffect(() => { + if (isSearchVisible) { + document.documentElement.style.overflow = 'hidden'; + } else { + document.documentElement.style.overflow = ''; + } + + return () => { + document.documentElement.style.overflow = ''; + }; + }, [isSearchVisible]); + + return <> + + {isSearchVisible ? ( +
+
setIsSearchVisible(false)}>
+ +
+ ) : null} + +
+ +
+ + +} \ No newline at end of file From 171a202859c96f5cfab10befe18a306b06fccf1a Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 11 Feb 2026 15:35:18 +0100 Subject: [PATCH 09/32] Use searchBarBtn component --- src/components/ToolBar/ToolBar.jsx | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx index 874fa70..a4590a3 100644 --- a/src/components/ToolBar/ToolBar.jsx +++ b/src/components/ToolBar/ToolBar.jsx @@ -1,50 +1,27 @@ import styles from "./ToolBar.module.css" import Filter from "../Filter/Filter.jsx"; import {useContext, useEffect, useState} from "react"; -import SearchBar from "../SearchBar/SearchBar.jsx"; +use import SearchBar from "../SearchBar/SearchBar.tsx"; import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx"; import Button from "../ui/button/button.tsx"; import {AuthContext} from "../../contexts/auth/AuthContext.js"; +import SearchBtn from "./components/searchBtn/SearchBtn.tsx"; function ToolBar({setFilters, filters, showCreate = true}) { const { user } = useContext(AuthContext); const [isFilterVisible, setIsFilterVisible] = useState(false); - const [isSearchVisible, setIsSearchVisible] = useState(false); const toggleFilters = () => { setIsFilterVisible(prev => !prev); }; - - useEffect(() => { - if (isSearchVisible) { - document.documentElement.style.overflow = 'hidden'; - } else { - document.documentElement.style.overflow = ''; - } - - return () => { - document.documentElement.style.overflow = ''; - }; - }, [isSearchVisible]); - - - return (
- {isSearchVisible ? ( -
-
setIsSearchVisible(false)}>
- -
- ) : null}
{showCreate && user.isAdmin ? ( ) : null} - +
-
- -
-
+
); diff --git a/src/components/ToolBar/tools/FilterBtn.tsx b/src/components/ToolBar/tools/FilterBtn.tsx new file mode 100644 index 0000000..1a5d89b --- /dev/null +++ b/src/components/ToolBar/tools/FilterBtn.tsx @@ -0,0 +1,29 @@ +import styles from "../ToolBar.module.css" +import Button from "../../ui/button/button"; +import { useEffect, useState } from "react"; +import SearchBar from "../../SearchBar/SearchBar"; +import Filter from "../../Filter/Filter.jsx"; + + +interface FilterBtnProps { + setFilters: (filter: string) => void; + filters: string; +} + +export default function FilterBtn({ setFilters, filters }: FilterBtnProps) { + + const [isFilterVisible, setIsFilterVisible] = useState(false); + + const toggleFilters = () => { + setIsFilterVisible(prev => !prev); + }; + + return
+ +
+ +
+
+} \ No newline at end of file From 87c0cc02e7488b7017ed837afa846462b2a81cdd Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 11 Feb 2026 16:47:15 +0100 Subject: [PATCH 13/32] Remove useless imports --- src/components/ToolBar/tools/FilterBtn.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/ToolBar/tools/FilterBtn.tsx b/src/components/ToolBar/tools/FilterBtn.tsx index 1a5d89b..672a3f3 100644 --- a/src/components/ToolBar/tools/FilterBtn.tsx +++ b/src/components/ToolBar/tools/FilterBtn.tsx @@ -1,7 +1,6 @@ import styles from "../ToolBar.module.css" import Button from "../../ui/button/button"; -import { useEffect, useState } from "react"; -import SearchBar from "../../SearchBar/SearchBar"; +import { useState } from "react"; import Filter from "../../Filter/Filter.jsx"; From 451da54fc33fec41aa44ae96e4bb6625efbd1673 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 11 Feb 2026 17:08:52 +0100 Subject: [PATCH 14/32] Fix errors --- src/components/Filter/Filter.jsx | 56 ---------------- src/components/Filter/Filter.tsx | 78 ++++++++++++++++++++++ src/components/ToolBar/tools/FilterBtn.tsx | 10 ++- 3 files changed, 85 insertions(+), 59 deletions(-) delete mode 100644 src/components/Filter/Filter.jsx create mode 100644 src/components/Filter/Filter.tsx diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx deleted file mode 100644 index eb0bf87..0000000 --- a/src/components/Filter/Filter.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import styles from "./Filter.module.css"; -import Button from "../ui/button/button.tsx" - -function Filter({isFilterVisible, filters, setFilters}){ - const setAlphabeticalOrder = (order) => { - setFilters(prev => ({ - ...prev, - alphabetical : prev.alphabetical === order ? null : order - })); - }; - - const setYearOrder = (order) => { - setFilters(prev => ({ - ...prev, - yearOrder: prev.yearOrder === order ? null : order - })); - }; - - return ( -
- - - - - - - - - - - - - - - -
- ) -} - -export default Filter; \ No newline at end of file diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx new file mode 100644 index 0000000..d917928 --- /dev/null +++ b/src/components/Filter/Filter.tsx @@ -0,0 +1,78 @@ +import styles from "./Filter.module.css"; +import Button from "../ui/button/button"; +import React from "react"; + +type FiltersType = { + alphabetical: "asc" | "desc" | null; + yearOrder: "asc" | "desc" | null; + [key: string]: any; +}; + +type FilterProps = { + isFilterVisible: boolean; + filters: FiltersType; + setFilters: React.Dispatch>; +}; + +function Filter({ isFilterVisible, filters, setFilters }: FilterProps): any { + + const setAlphabeticalOrder = (order: "asc" | "desc"): void => { + setFilters((prev) => ({ + ...prev, + alphabetical: prev.alphabetical === order ? null : order + })); + }; + + const setYearOrder = (order: "asc" | "desc"): void => { + setFilters((prev) => ({ + ...prev, + yearOrder: prev.yearOrder === order ? null : order + })); + }; + + return ( +
+ + + + + + + + + + + + + + + +
+ ); +} + +export default Filter; diff --git a/src/components/ToolBar/tools/FilterBtn.tsx b/src/components/ToolBar/tools/FilterBtn.tsx index 672a3f3..0f87ae9 100644 --- a/src/components/ToolBar/tools/FilterBtn.tsx +++ b/src/components/ToolBar/tools/FilterBtn.tsx @@ -1,12 +1,16 @@ import styles from "../ToolBar.module.css" import Button from "../../ui/button/button"; import { useState } from "react"; -import Filter from "../../Filter/Filter.jsx"; +import Filter from "../../Filter/Filter"; +interface Filters { + alphabetical: "asc" | "desc"; + yearOrder: "asc" | "desc"; +} interface FilterBtnProps { - setFilters: (filter: string) => void; - filters: string; + setFilters: any + filters: Filters } export default function FilterBtn({ setFilters, filters }: FilterBtnProps) { From fa6336fffcaa6e863fc8d0823d1c37ef6b4ade9f Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 11 Feb 2026 17:17:50 +0100 Subject: [PATCH 15/32] Move createEventBtn --- src/components/ToolBar/ToolBar.jsx | 3 +-- .../{ => ToolBar/tools}/createEventBtn/CreateEventBtn.jsx | 8 ++++---- .../tools}/createEventBtn/createEventBtn.module.css | 0 3 files changed, 5 insertions(+), 6 deletions(-) rename src/components/{ => ToolBar/tools}/createEventBtn/CreateEventBtn.jsx (91%) rename src/components/{ => ToolBar/tools}/createEventBtn/createEventBtn.module.css (100%) diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx index 351ceab..8bfb46b 100644 --- a/src/components/ToolBar/ToolBar.jsx +++ b/src/components/ToolBar/ToolBar.jsx @@ -1,6 +1,6 @@ import styles from "./ToolBar.module.css" import { useContext } from "react"; -import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx"; +import CreateEventBtn from "./tools/createEventBtn/CreateEventBtn.jsx"; import { AuthContext } from "../../contexts/auth/AuthContext.js"; import SearchBtn from "./tools/SearchBtn.tsx"; import FilterBtn from "./tools/FilterBtn.tsx"; @@ -14,7 +14,6 @@ function ToolBar({setFilters, filters, showCreate = true}) { {showCreate && user.isAdmin ? ( ) : null} -
diff --git a/src/components/createEventBtn/CreateEventBtn.jsx b/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx similarity index 91% rename from src/components/createEventBtn/CreateEventBtn.jsx rename to src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx index 019b836..e7e886f 100644 --- a/src/components/createEventBtn/CreateEventBtn.jsx +++ b/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx @@ -1,9 +1,9 @@ import styles from "./createEventBtn.module.css" import { useState, useContext } from "react"; -import Modal from "../ui/modal/modal.tsx"; -import Button from "../ui/button/button.tsx"; -import TextInput from "../ui/input/input.tsx"; -import { EventContext } from "../../contexts/events/EventContext.js"; +import Modal from "../../../ui/modal/modal.tsx"; +import Button from "../../../ui/button/button.tsx"; +import TextInput from "../../../ui/input/input.tsx"; +import { EventContext } from "../../../../contexts/events/EventContext.js"; export default function CreateEventBtn() { diff --git a/src/components/createEventBtn/createEventBtn.module.css b/src/components/ToolBar/tools/createEventBtn/createEventBtn.module.css similarity index 100% rename from src/components/createEventBtn/createEventBtn.module.css rename to src/components/ToolBar/tools/createEventBtn/createEventBtn.module.css From eb9a0f58eff19d3eff296f67f51d33d2c81eeb6b Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Fri, 13 Feb 2026 14:20:07 +0100 Subject: [PATCH 16/32] Move isAdmin condition --- src/components/ToolBar/ToolBar.jsx | 7 +------ .../ToolBar/tools/createEventBtn/CreateEventBtn.jsx | 4 ++++ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx index 8bfb46b..4461da7 100644 --- a/src/components/ToolBar/ToolBar.jsx +++ b/src/components/ToolBar/ToolBar.jsx @@ -1,19 +1,14 @@ import styles from "./ToolBar.module.css" -import { useContext } from "react"; import CreateEventBtn from "./tools/createEventBtn/CreateEventBtn.jsx"; -import { AuthContext } from "../../contexts/auth/AuthContext.js"; import SearchBtn from "./tools/SearchBtn.tsx"; import FilterBtn from "./tools/FilterBtn.tsx"; function ToolBar({setFilters, filters, showCreate = true}) { - const { user } = useContext(AuthContext); return (
- {showCreate && user.isAdmin ? ( - - ) : null} + {showCreate && }
diff --git a/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx b/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx index e7e886f..11b96d6 100644 --- a/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx +++ b/src/components/ToolBar/tools/createEventBtn/CreateEventBtn.jsx @@ -4,11 +4,13 @@ import Modal from "../../../ui/modal/modal.tsx"; import Button from "../../../ui/button/button.tsx"; import TextInput from "../../../ui/input/input.tsx"; import { EventContext } from "../../../../contexts/events/EventContext.js"; +import {AuthContext} from "../../../../contexts/auth/AuthContext.ts"; export default function CreateEventBtn() { const { addEvent } = useContext(EventContext); + const { user } = useContext(AuthContext); const [isOpen, setIsOpen] = useState(false); const [name, setName] = useState(""); @@ -24,6 +26,8 @@ export default function CreateEventBtn() { setIsOpen(false); } + if(!user.isAdmin) return null; + return <> From fe1948e632c24678093969920bb233b6123a0fd6 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 22 Feb 2026 16:20:25 +0100 Subject: [PATCH 17/32] create pendingMembers context --- .../pendingMembers/PendingMembersContext.js | 3 ++ .../pendingMembers/PendingMembersProvider.jsx | 37 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 src/contexts/pendingMembers/PendingMembersContext.js create mode 100644 src/contexts/pendingMembers/PendingMembersProvider.jsx diff --git a/src/contexts/pendingMembers/PendingMembersContext.js b/src/contexts/pendingMembers/PendingMembersContext.js new file mode 100644 index 0000000..1941409 --- /dev/null +++ b/src/contexts/pendingMembers/PendingMembersContext.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const PendingMembersContext = createContext(null); \ No newline at end of file diff --git a/src/contexts/pendingMembers/PendingMembersProvider.jsx b/src/contexts/pendingMembers/PendingMembersProvider.jsx new file mode 100644 index 0000000..48ff64d --- /dev/null +++ b/src/contexts/pendingMembers/PendingMembersProvider.jsx @@ -0,0 +1,37 @@ +import { useState } from "react"; +import { PendingMembersContext } from "./PendingMembersContext"; + +import getUserToValidate from "../../utils/users/getUserToValidate"; +import getUserById from "../../utils/users/getUserById"; + +export function PendingMembersProvider({ children }) { + + const [pendingMembers, setPendingMembers] = useState([]); + + const updatePendingMembers = async () => { + const result = await getUserToValidate(); + const userIds = result.data; + + if (!userIds || userIds.length === 0) { + setPendingMembers([]); + return; + } + + const users = await Promise.all( + userIds.map(id => getUserById(id)) + ); + + setPendingMembers(users.map(u => u.data)); + }; + + return ( + + {children} + + ); +} \ No newline at end of file From c95f8cfae7c49cc2ec1b59041b7b488bccb3cab8 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 22 Feb 2026 16:20:31 +0100 Subject: [PATCH 18/32] use pendingMembers context --- src/components/Header/Header.jsx | 6 ++-- .../pendingMembers/PendingMembers.jsx | 30 +++++-------------- .../echo/listeners/userCreatedListener.js | 6 +++- 3 files changed, 16 insertions(+), 26 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 829c26e..314943b 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -10,6 +10,7 @@ import { userNotificationsListener } from "../../utils/echo/listeners/userNotifi import NotificationCard from "../NotificationCard/NotificationCard.jsx"; import { EventContext } from "../../contexts/events/EventContext.js"; import {AuthContext} from "../../contexts/auth/AuthContext.js"; +import { PendingMembersContext } from "../../contexts/pendingMembers/PendingMembersContext"; function Header() { @@ -20,6 +21,7 @@ function Header() { const [mobileMenu, setMobileMenu] = useState(false); const [notifications, setNotifications] = useState([]); const notificationRef = useRef(null); + const { updatePendingMembers } = useContext(PendingMembersContext); useEffect(() => { @@ -41,7 +43,7 @@ function Header() { echoInstance = echo; const activeChannels = [ - userCreatedListener(echo, user, setNotifications, setunreadNotification), + userCreatedListener(echo, user, setNotifications, setunreadNotification, updatePendingMembers), userNotificationsListener(echo, user, setNotifications, setunreadNotification), ]; channelsToLeave = activeChannels.filter(name => name !== null); @@ -86,7 +88,7 @@ function Header() { } } } catch (err) { - console.error('Erreur suppression notification :', err); + console.error('Erreur pour ouvrir/fermer le menu de notifications :', err); } } diff --git a/src/pages/Admin/components/pendingMembers/PendingMembers.jsx b/src/pages/Admin/components/pendingMembers/PendingMembers.jsx index 19b1a1a..f8280f6 100644 --- a/src/pages/Admin/components/pendingMembers/PendingMembers.jsx +++ b/src/pages/Admin/components/pendingMembers/PendingMembers.jsx @@ -1,11 +1,10 @@ -import React, {useState, useEffect} from "react"; +import React, {useState, useEffect, useContext} from "react"; import Button from "../../../../components/ui/button/button.tsx"; import styles from "./PendingMembers.module.css"; import Modal from "../../../../components/ui/modal/modal.tsx"; -import getUserToValidate from "../../../../utils/users/getUserToValidate.js"; -import getUserById from "../../../../utils/users/getUserById.js"; import validateUser from "../../../../utils/users/validateUser.js"; import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js"; +import { PendingMembersContext } from "../../../../contexts/pendingMembers/PendingMembersContext"; function PendingMembers() { @@ -13,23 +12,10 @@ function PendingMembers() { const [open, setOpen] = useState(false); const [message, setMessage] = useState(""); const [title, setTitle] = useState(""); - - const [pendingMembers, setPendingMembers] = useState([]); - - const fetchUsers = async () => { - - const result = await getUserToValidate(); - const userIds = result.data; - - if (userIds && userIds.length > 0) { - const users = await Promise.all(userIds.map(id => getUserById(id))); - const usersData = users.map(u => u.data); - setPendingMembers(usersData); - } else setPendingMembers([]); - } + const { pendingMembers, updatePendingMembers } = useContext(PendingMembersContext); useEffect(() => { - fetchUsers(); + updatePendingMembers(); }, []); const handleValidate = async (id, name) => { @@ -38,14 +24,12 @@ function PendingMembers() { if(result.status === 200) { setTitle("Utilisateur accepté avec succès") setMessage(`L'utilisateur ${name} a été accepté avec succès`) - setOpen(true); } else { setTitle("Erreur") setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`) - setOpen(true); } - - fetchUsers(); + setOpen(true); + updatePendingMembers(); } const handleRefuse = async (id, name) => { @@ -61,7 +45,7 @@ function PendingMembers() { setOpen(true); } - fetchUsers(); + updatePendingMembers(); } return ( diff --git a/src/utils/echo/listeners/userCreatedListener.js b/src/utils/echo/listeners/userCreatedListener.js index e2bb017..ef550b7 100644 --- a/src/utils/echo/listeners/userCreatedListener.js +++ b/src/utils/echo/listeners/userCreatedListener.js @@ -1,4 +1,4 @@ -export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification) => { +export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification, updatePendingMembers) => { if (userData.isAdmin) { const channelName = "users.registration"; echo.private(channelName) @@ -11,6 +11,10 @@ export const userCreatedListener = (echo, userData, setNotifications, setunreadN }; setNotifications(prev => [newNotification, ...prev]); setunreadNotification(true); + + if (typeof updatePendingMembers === "function") { + updatePendingMembers(); + } }); return channelName; } From 17ca3a9e954ce3317c2e1e34c743afd683870597 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 22 Feb 2026 16:23:16 +0100 Subject: [PATCH 19/32] use pendingMembers context --- src/main.jsx | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/main.jsx b/src/main.jsx index bd63d05..b742534 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -6,16 +6,19 @@ import router from './router'; import {AuthProvider} from "./contexts/auth/authProvider.jsx"; import {EventProvider} from "./contexts/events/EventProvider.jsx"; import {EventDetailProvider} from "./contexts/eventDetail/eventDetailProvider.jsx"; +import {PendingMembersProvider} from "./contexts/pendingMembers/PendingMembersProvider.jsx"; createRoot(document.getElementById('root')).render( - - - - - + + + + + + + , ) From 258170d4d823f40abbc2312e8d4b9a99f81233e1 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 22 Feb 2026 16:31:24 +0100 Subject: [PATCH 20/32] use pendingMembers context --- src/utils/echo/listeners/userCreatedListener.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/utils/echo/listeners/userCreatedListener.js b/src/utils/echo/listeners/userCreatedListener.js index ef550b7..a4a36c4 100644 --- a/src/utils/echo/listeners/userCreatedListener.js +++ b/src/utils/echo/listeners/userCreatedListener.js @@ -11,10 +11,7 @@ export const userCreatedListener = (echo, userData, setNotifications, setunreadN }; setNotifications(prev => [newNotification, ...prev]); setunreadNotification(true); - - if (typeof updatePendingMembers === "function") { - updatePendingMembers(); - } + updatePendingMembers(); }); return channelName; } From 1f6fb932b6fa29dc37b4df28bc2edcd08234efad Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 14:47:30 +0100 Subject: [PATCH 21/32] Create Loading component --- src/components/ui/loading/loading.module.css | 25 ++++++++++++++++++++ src/components/ui/loading/loading.tsx | 12 ++++++++++ src/stories/Loading.stories.jsx | 13 ++++++++++ 3 files changed, 50 insertions(+) create mode 100644 src/components/ui/loading/loading.module.css create mode 100644 src/components/ui/loading/loading.tsx create mode 100644 src/stories/Loading.stories.jsx diff --git a/src/components/ui/loading/loading.module.css b/src/components/ui/loading/loading.module.css new file mode 100644 index 0000000..b12ba9f --- /dev/null +++ b/src/components/ui/loading/loading.module.css @@ -0,0 +1,25 @@ +.wrapper { + display: flex; + justify-content: center; + align-items: center; + + width: 100%; + min-height: 200px; +} + +.spinner { + width: 48px; + height: 48px; + + border: 5px solid #e0e0e0; + border-top: 5px solid #3498db; + + border-radius: 50%; + animation: spin 0.8s linear infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} \ No newline at end of file diff --git a/src/components/ui/loading/loading.tsx b/src/components/ui/loading/loading.tsx new file mode 100644 index 0000000..536cc99 --- /dev/null +++ b/src/components/ui/loading/loading.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import styles from "./loading.module.css"; + +const Loading: React.FC = () => { + return ( +
+
+
+ ); +}; + +export default Loading; \ No newline at end of file diff --git a/src/stories/Loading.stories.jsx b/src/stories/Loading.stories.jsx new file mode 100644 index 0000000..6986aa8 --- /dev/null +++ b/src/stories/Loading.stories.jsx @@ -0,0 +1,13 @@ +import Loading from "../components/ui/loading/loading.tsx"; + + +export default { + title: 'UI/Loading', + component: Loading, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +}; + +export const Primary = {}; \ No newline at end of file From ffa6cd649443966a7dec2d909cdc1165fb5f22c9 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 14:47:36 +0100 Subject: [PATCH 22/32] Use Loading component --- src/pages/Volunteers/VolunteersPage.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/Volunteers/VolunteersPage.tsx b/src/pages/Volunteers/VolunteersPage.tsx index 869d6a5..ae43fbc 100644 --- a/src/pages/Volunteers/VolunteersPage.tsx +++ b/src/pages/Volunteers/VolunteersPage.tsx @@ -6,6 +6,7 @@ import ToolBar from "../../components/ToolBar/ToolBar"; import filter from "../../utils/filter"; import getUserById from "../../utils/users/getUserById"; import User from "./interfaces/user.interface"; +import Loading from "../../components/ui/loading/loading"; interface Filters { alphabetical: "asc" | "desc"; @@ -57,6 +58,7 @@ const VolunteerPage: React.FC = () => { fetchUsers(); }, []); + if(loading) return ; return (
@@ -67,13 +69,9 @@ const VolunteerPage: React.FC = () => { />
- {loading ? ( -
Chargement des bénévoles…
- ) : ( - filter(users, filters, "user").map((user: User) => ( + {filter(users, filters, "user").map((user: User) => ( - )) - )} + ))}
From ad770c105549493d1980c99459a5a39bec47d946 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Tue, 24 Feb 2026 15:40:35 +0100 Subject: [PATCH 23/32] fix reverb from cross origin --- src/utils/echo/initEcho.js | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/utils/echo/initEcho.js b/src/utils/echo/initEcho.js index 9d27b37..4e59d4b 100644 --- a/src/utils/echo/initEcho.js +++ b/src/utils/echo/initEcho.js @@ -14,8 +14,31 @@ export default function initEcho() { encrypted: import.meta.env.VITE_ENCRYPTED === 'true', cluster: import.meta.env.VITE_CLUSTER, enabledTransports: ['ws', 'wss'], + authorizer: (channel) => { + return { + authorize: (socketId, callback) => { + fetch(`${import.meta.env.VITE_API_URL}/broadcasting/auth`, { + method: 'POST', + credentials: 'include', + headers: { + 'Content-Type': 'application/json', + 'X-Requested-With': 'XMLHttpRequest', + }, + body: JSON.stringify({ + socket_id: socketId, + channel_name: channel.name, + }), + }) + .then(res => res.json()) + .then(data => callback(null, data)) + .catch(err => callback(err, null)); + }, + }; + }, }); + + window.Echo = echoInstance; return echoInstance; } From bd415209a524ea598d34104a8f3df57102dc7d39 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 16:34:23 +0100 Subject: [PATCH 24/32] Merge VolunteerProfilePage into ProfilePage --- src/pages/Profile/ProfilePage.tsx | 251 +++++++++++++----------------- src/router.js | 10 +- 2 files changed, 114 insertions(+), 147 deletions(-) diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index 84c2211..fccbfc1 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -1,165 +1,132 @@ -import { useContext, useEffect } from "react"; +import {useContext, useEffect, useState} from "react"; import styles from "./ProfilePage.module.css"; - -import { AuthContext } from "../../contexts/auth/AuthContext"; +import {AuthContext} from "../../contexts/auth/AuthContext"; import formatDate from "../../utils/date/formatDate"; +import Task from "../../components/Task/Task"; +import SettingsModal from "./components/SettingsModal/SettingsModal"; +import { useParams } from "react-router"; +import { useNavigate } from "react-router"; +import getUserById from "../../utils/users/getUserById.js"; -//import Task from "../../components/Task/Task"; -//import SettingsModal from "./components/SettingsModal/SettingsModal"; interface TaskType { - id: number; - title?: string; - completed?: boolean; - [key: string]: unknown; + id: number; + title?: string; + completed?: boolean; + + [key: string]: unknown; } interface User { - name: string; - lastname: string; - role: string; - email: string; - phone: string | null; - created_at: string; - tasks: TaskType[]; + id: number; + name: string; + lastname: string; + role: string; + email: string; + phone: string | null; + created_at: string; + tasks: TaskType[]; } interface AuthContextType { - user: User | null; - update: () => void; + user: User; + update: () => void; } - -function ProfilePage(){ - const { user, update } = useContext(AuthContext) as AuthContextType; - - useEffect(() => { - update(); - }, []); - - return ( -
-
-
-
- Photo de profil -
- -
-
-

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

-
- -
-
-

- Role : {user?.role} -

-

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

-
- -
-

- Mail : {user?.email} -

-

- Téléphone :{" "} - {user?.phone ?? "Pas de numéro enregistré"} -

-
- -
- {/* */} -
-
- -

Tâches :

- - {/* {user && user.tasks.length > 0 ? ( - user.tasks.map((task) => ( - - )) - ) : ( -

Aucune tâche pour le moment.

- )}*/} -
-
-
-
- ); -} - -export default ProfilePage; - - -/*import React, { useContext, useEffect } from "react"; -import styles from "./ProfilePage.module.css"; -import { AuthContext } from "../../contexts/auth/AuthContext.js"; -import formatDate from "../../utils/date/formatDate.js"; -import Task from "../../components/Task/Task"; -import SettingsModal from "./components/SettingsModal/SettingsModal.jsx"; - function ProfilePage() { - const { user, update } = useContext(AuthContext); + const navigate = useNavigate(); + const { id } = useParams(); + const { user, update } = useContext(AuthContext) as AuthContextType; + const [profileUser, setProfileUser] = useState(null); + + const isOwnProfile = !id || user.id.toString() === id; useEffect(() => { - update(); - }, []) + update(); + (async () => { - return ( -
-
-
-
- Photo de profil -
-
-
-

{user?.name} {user?.lastname}

+ if(!isOwnProfile) { + console.log(id); + const res = await getUserById(id); + + if (res.status === 404) { + navigate("/404"); + return; + } + + if (res.status !== 200) { + console.error("Erreur lors du chargement du profil", res); + return; + } + + setProfileUser(res.data); + } else setProfileUser(user) + }) () + }, []); + + return ( +
+
+
+
+ Photo de profil +
+ +
+
+

+ {profileUser?.name} {profileUser?.lastname} +

+
+ +
+
+

+ Role : {profileUser?.role} +

+

+ Membre depuis :{" "} + {profileUser && formatDate(profileUser.created_at)} +

+
+ +
+

+ Mail : {profileUser?.email} +

+

+ Téléphone :{" "} + {profileUser?.phone ?? "Pas de numéro enregistré"} +

+
+ + {isOwnProfile && ( +
+ +
+ )} +
+ +

Tâches :

+ + {profileUser && profileUser.tasks.length > 0 ? ( + profileUser.tasks.map((task) => ( + + )) + ) : ( +

Aucune tâche pour le moment.

+ )} +
+
-
-
-

Role : {user?.role}

-

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

-
-
-

Mail : {user?.email}

-

Téléphone : {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}

-
-
- -
-
- -

Tâches :

- {user && user.tasks.length > 0 ? ( - user.tasks.map((task, index) => ( - - )) - ) : ( -

Aucune tâche pour le moment.

- )} - -
-
-
- ); + ); } -export default ProfilePage;*/ \ No newline at end of file +export default ProfilePage; \ No newline at end of file diff --git a/src/router.js b/src/router.js index 9d40c88..f7ee98e 100644 --- a/src/router.js +++ b/src/router.js @@ -47,10 +47,6 @@ const router = createBrowserRouter([ path: "/admin", Component:AdminPage, }, - { - path:"/profile", - Component:ProfilePage, - }, { path: "/events", Component: EventsPage, @@ -59,9 +55,13 @@ const router = createBrowserRouter([ path: "/volunteers", Component: VolunteersPage, }, + { + path:"/profile", + Component:ProfilePage, + }, { path: "/profile/:id", - Component: VolunteerProfilePage, + Component: ProfilePage, }, { path: "/events/:id", From 4ee690a6d5930c9ac98ef8a7a2690785bf630bb3 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 16:34:34 +0100 Subject: [PATCH 25/32] Fix display --- src/pages/Profile/ProfilePage.module.css | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css index 3c5b26b..a03cb05 100644 --- a/src/pages/Profile/ProfilePage.module.css +++ b/src/pages/Profile/ProfilePage.module.css @@ -3,17 +3,20 @@ padding: 12px; box-sizing: border-box; } + .profileboard { width: 100%; padding: 16px; border-radius: 20px; box-sizing: border-box; } -.settingImage{ - width:100%; - display: flex; - justify-content: center; + +.settingImage { + display: flex; + justify-content: center; + align-items: center; } + .contentWrapper { display: flex; flex-direction: column; @@ -49,9 +52,9 @@ .description h2 { font-size: 1.6rem; margin-bottom: 10px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .description button { From 8871d169df24b1fd0d029b876c1c0a486453bd29 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 16:46:38 +0100 Subject: [PATCH 26/32] Show ManageMember component --- src/pages/Profile/ProfilePage.tsx | 5 + .../components/manageMember/ManageMember.jsx | 0 .../deactivateMember/deactivateMemberBtn.jsx | 0 .../manageMember/manageMember.module.css | 0 .../manageMember/modifyrole/ModifyRole.jsx | 0 .../VolunteerProfile/VolunteerProfilePage.jsx | 84 --------- .../VolunteerProfilePage.module.css | 163 ------------------ 7 files changed, 5 insertions(+), 247 deletions(-) rename src/pages/{VolunteerProfile => Profile}/components/manageMember/ManageMember.jsx (100%) rename src/pages/{VolunteerProfile => Profile}/components/manageMember/deactivateMember/deactivateMemberBtn.jsx (100%) rename src/pages/{VolunteerProfile => Profile}/components/manageMember/manageMember.module.css (100%) rename src/pages/{VolunteerProfile => Profile}/components/manageMember/modifyrole/ModifyRole.jsx (100%) delete mode 100644 src/pages/VolunteerProfile/VolunteerProfilePage.jsx delete mode 100644 src/pages/VolunteerProfile/VolunteerProfilePage.module.css diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index fccbfc1..f0037f9 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -7,6 +7,7 @@ import SettingsModal from "./components/SettingsModal/SettingsModal"; import { useParams } from "react-router"; import { useNavigate } from "react-router"; import getUserById from "../../utils/users/getUserById.js"; +import ManageMember from "./components/manageMember/ManageMember.jsx"; interface TaskType { @@ -25,6 +26,7 @@ interface User { email: string; phone: string | null; created_at: string; + isAdmin: boolean; tasks: TaskType[]; } @@ -83,6 +85,9 @@ function ProfilePage() {

{profileUser?.name} {profileUser?.lastname}

+ {(user?.isAdmin && profileUser && !isOwnProfile) && ( + + )}
diff --git a/src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx b/src/pages/Profile/components/manageMember/ManageMember.jsx similarity index 100% rename from src/pages/VolunteerProfile/components/manageMember/ManageMember.jsx rename to src/pages/Profile/components/manageMember/ManageMember.jsx diff --git a/src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx b/src/pages/Profile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx similarity index 100% rename from src/pages/VolunteerProfile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx rename to src/pages/Profile/components/manageMember/deactivateMember/deactivateMemberBtn.jsx diff --git a/src/pages/VolunteerProfile/components/manageMember/manageMember.module.css b/src/pages/Profile/components/manageMember/manageMember.module.css similarity index 100% rename from src/pages/VolunteerProfile/components/manageMember/manageMember.module.css rename to src/pages/Profile/components/manageMember/manageMember.module.css diff --git a/src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx b/src/pages/Profile/components/manageMember/modifyrole/ModifyRole.jsx similarity index 100% rename from src/pages/VolunteerProfile/components/manageMember/modifyrole/ModifyRole.jsx rename to src/pages/Profile/components/manageMember/modifyrole/ModifyRole.jsx diff --git a/src/pages/VolunteerProfile/VolunteerProfilePage.jsx b/src/pages/VolunteerProfile/VolunteerProfilePage.jsx deleted file mode 100644 index 763b7f7..0000000 --- a/src/pages/VolunteerProfile/VolunteerProfilePage.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import styles from "./VolunteerProfilePage.module.css"; -import { useParams, useNavigate } from "react-router"; -import { useEffect, useState, useContext } from "react"; -import getUserById from "../../utils/users/getUserById.js"; -import formatDate from "../../utils/date/formatDate.js"; -import Task from "../../components/Task/Task.jsx"; -import ManageMember from "./components/manageMember/ManageMember.jsx"; -import { AuthContext } from "../../contexts/auth/AuthContext.js"; - -export default function VolunteerProfilePage() { - const { id } = useParams(); - const navigate = useNavigate(); - const { user: currentUser } = useContext(AuthContext); - - const [user, setUser] = useState(null); - - useEffect(() => { - (async () => { - const res = await getUserById(id); - - if (res.status === 404) { - navigate("/404"); - return; - } - - if (res.status !== 200) { - console.error("Erreur lors du chargement du profil", res); - return; - } - - setUser(res.data); - })(); - }, [id, navigate]); - - if (!user) return null; - - return ( -
-
-
-
- Photo de profil -
- -
-
-

{user.name} {user.lastname}

- {currentUser?.isAdmin && ( - - )} -
- -
-
-

Role : {user.role}

-

Membre depuis : {formatDate(user.created_at)}

-
-
-

Mail : {user.email}

-

- Téléphone :{" "} - {user.phone ?? "Pas de numéro enregistré"} -

-
-
- -

Tâches :

- {user.tasks?.length > 0 ? ( - user.tasks.map((task, index) => ( - - )) - ) : ( -

Aucune tâche pour le moment.

- )} -
-
-
-
- ); -} diff --git a/src/pages/VolunteerProfile/VolunteerProfilePage.module.css b/src/pages/VolunteerProfile/VolunteerProfilePage.module.css deleted file mode 100644 index 834af59..0000000 --- a/src/pages/VolunteerProfile/VolunteerProfilePage.module.css +++ /dev/null @@ -1,163 +0,0 @@ -.container { - width: 100%; - padding: 10px; - box-sizing: border-box; -} - -.profileboard { - width: 100%; - padding: 15px; - border-radius: 20px; - box-sizing: border-box; -} - -.contentWrapper { - display: flex; - flex-direction: column; - align-items: center; - width: 100%; -} - -.profilePictureContainer { - width: 120px; - height: 120px; - margin-bottom: 15px; -} - -.profilePicture { - width: 100%; - height: 100%; - border-radius: 50%; - object-fit: cover; -} - -.description { - width: 100%; - text-align: left; - margin-left:4%; -} - -.topDescription { - display: flex; - flex-direction: column; - align-items: center; - gap: 10px; - margin-bottom: 15px; -} - -.infoBlock { - width: 100%; - background: rgba(255, 255, 255, 0.1); - padding: 10px; - border-radius: 5px; -} - -.eventTasks { - max-height: 0; - overflow: hidden; - transition: max-height 0.3s ease-out, opacity 0.2s ease; - opacity: 0; - padding-left: 20px; -} - -.eventTasks.expanded { - max-height: 500px; - opacity: 1; - margin-top: 10px; -} -.description h2{ - font-size:30px; - -} -.profilePicture{ - width:90%; -} - -.settingsBtns { - display: flex; - gap: 5px; - justify-content: right; -} - -@media screen and (min-width: 768px) { - .contentWrapper { - flex-direction: row; - justify-content: flex-start; - align-items: flex-start; - } - - .profilePictureContainer { - width: 150px; - height: 150px; - margin-right: 20px; - margin-bottom: 0; - } - - .description { - width: calc(100% - 170px); - margin-left:4%; - } - - .topDescription { - flex-direction: row; - justify-content: space-between; - } - - .infoBlock { - width: 48%; - } - - .event { - padding: 15px; - } - .description h2{ - font-size:30px; - } - .profilePicture{ - width:90%; - } -} -.description button{ - width:50px; - height:50px; - -} - -.headerProfile { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-bottom: 20px; -} - -@media screen and (min-width: 1024px) { - .container { - max-width: 100%; - margin: 0 auto; - padding: 20px; - } - - .profileboard { - padding: 25px; - } - - .profilePictureContainer { - width: 30%; - height:auto; - } - .profilePicture{ - width:90%; - } - .description { - width: calc(100% - 200px); - margin-left:4%; - } - - .event { - padding: 18px; - } - .description h2{ - font-size:30px; - } -} From e30dd780ba3d6f6d7963b84f892e7aa7a920f1fe Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 16:59:25 +0100 Subject: [PATCH 27/32] Remove VolunteerProfilePage import --- src/router.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/router.js b/src/router.js index f7ee98e..662f8f8 100644 --- a/src/router.js +++ b/src/router.js @@ -8,7 +8,6 @@ import ProfilePage from "./pages/Profile/ProfilePage"; import EventsPage from "./pages/Events/EventsPage.jsx"; import AdminPage from "./pages/Admin/AdminPage.jsx"; import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx"; -import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx"; import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx"; import eventDetail from "./pages/eventDetail/eventDetail.jsx"; import legalNotices from "./pages/LegalNotices/LegalNotices.jsx"; From c012a2a063d1133d667f1a147299ee499327ba2e Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 16:59:34 +0100 Subject: [PATCH 28/32] Convert to TS --- .../SettingsModal/SettingsModal.jsx | 86 --------- .../SettingsModal/SettingsModal.tsx | 167 ++++++++++++++++++ 2 files changed, 167 insertions(+), 86 deletions(-) delete mode 100644 src/pages/Profile/components/SettingsModal/SettingsModal.jsx create mode 100644 src/pages/Profile/components/SettingsModal/SettingsModal.tsx diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx b/src/pages/Profile/components/SettingsModal/SettingsModal.jsx deleted file mode 100644 index c5e0ff3..0000000 --- a/src/pages/Profile/components/SettingsModal/SettingsModal.jsx +++ /dev/null @@ -1,86 +0,0 @@ -import Modal from "../../../../components/ui/modal/modal.tsx"; -import Button from "../../../../components/ui/button/button.tsx"; -import styles from "./SettingsModal.module.css" -import { useContext, useState } from "react"; -import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx"; -import { AuthContext } from "../../../../contexts/auth/AuthContext.js"; -import TextInput from "../../../../components/ui/input/input.tsx"; -import updateUser from "../../../../utils/users/updateUser.js"; -import deleteUser from "../../../../utils/users/deleteUser.js"; - - -export default function SettingsModal() { - - const { user, logout, update } = useContext(AuthContext); - - const [open, setOpen] = useState(false); - const [isDelete, setIsDelete] = useState(false); - - const [name, setName] = useState(user?.name); - const [lastname, setLastName] = useState(user?.lastname); - const [phone, setPhone] = useState(user?.phone); - - const handleLogout = () => { - logout(); - } - - const handleSubmit = async () => { - await updateUser(name, lastname, phone); - update(); - } - - const handleDelete = async () => { - await deleteUser(); - update(); - } - - return ( - <> - - - setOpen(false)}> -
- -
-

Compte

- - - -
-

Changer de Prénom

- setName(e.target.value)} type={"text"} /> -
- -
-

Changer de nom

- setLastName(e.target.value)} type={"text"} /> -
- -
-

Changer de numéro de téléphone

- setPhone(e.target.value)} type={"text"} /> -
- - - -
- -
-

Apparence

- -
-
- - - - setIsDelete(false)}> -
-

Êtes vous vraiment sûr de vouloir supprimer votre compte ?

- -
- - - ) -} \ No newline at end of file diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.tsx b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx new file mode 100644 index 0000000..fa6701f --- /dev/null +++ b/src/pages/Profile/components/SettingsModal/SettingsModal.tsx @@ -0,0 +1,167 @@ +import {useContext, useState, ChangeEvent} from "react"; +import Modal from "../../../../components/ui/modal/modal"; +import Button from "../../../../components/ui/button/button"; +import styles from "./SettingsModal.module.css"; +import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx"; +import {AuthContext} from "../../../../contexts/auth/AuthContext"; +import TextInput from "../../../../components/ui/input/input"; +import updateUser from "../../../../utils/users/updateUser.js"; +import deleteUser from "../../../../utils/users/deleteUser.js"; + +interface TaskType { + id: number; + title?: string; + completed?: boolean; + + [key: string]: unknown; +} + +interface User { + id: number; + name: string; + lastname: string; + role: string; + email: string; + phone: string | null; + created_at: string; + isAdmin: boolean; + tasks: TaskType[]; +} + +interface AuthContextType { + user: User; + update: () => void; + logout: () => void; +} + +export default function SettingsModal() { + const {user, logout, update} = useContext(AuthContext) as AuthContextType; + + const [open, setOpen] = useState(false); + const [isDelete, setIsDelete] = useState(false); + + const [name, setName] = useState(user?.name ?? ""); + const [lastname, setLastName] = useState(user?.lastname ?? ""); + const [phone, setPhone] = useState(user?.phone ?? ""); + + const handleLogout = (): void => { + logout(); + }; + + const handleSubmit = async (): Promise => { + await updateUser(name, lastname, phone || null); + update(); + setOpen(false); + }; + + const handleDelete = async (): Promise => { + await deleteUser(); + update(); + }; + + const handleNameChange = (e: ChangeEvent): void => { + setName(e.target.value); + }; + + const handleLastnameChange = (e: ChangeEvent): void => { + setLastName(e.target.value); + }; + + const handlePhoneChange = (e: ChangeEvent): void => { + setPhone(e.target.value); + }; + + + return ( + <> + + + setOpen(false)} + > +
+
+

Compte

+ + + + + +
+

Changer de Prénom

+ +
+ +
+

Changer de nom

+ +
+ +
+

Changer de numéro de téléphone

+ +
+ + +
+ +
+

Apparence

+ +
+
+ + + setIsDelete(false)} + > +
+

+ Êtes vous vraiment sûr de vouloir supprimer votre compte ? +

+ +
+ + + ); +} \ No newline at end of file From d8baa33330c018c5274a0436947c67ed708e0f9c Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 17:00:45 +0100 Subject: [PATCH 29/32] Fix className error --- src/components/ui/button/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/button/button.tsx b/src/components/ui/button/button.tsx index 1866c39..b57fc8c 100644 --- a/src/components/ui/button/button.tsx +++ b/src/components/ui/button/button.tsx @@ -7,7 +7,7 @@ interface ButtonProps { children: ReactNode; variant?: ButtonVariant; onClick?: MouseEventHandler; - className?: string; + className?: string | undefined; } const Button = ({ From f0534bd0f5505ac5dbdbbfa63a28b0d7219fd6f1 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 17:17:47 +0100 Subject: [PATCH 30/32] Fix style --- .../SettingsModal/SettingsModal.module.css | 71 +++++++++++++------ 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css index d6b0b12..7808db3 100644 --- a/src/pages/Profile/components/SettingsModal/SettingsModal.module.css +++ b/src/pages/Profile/components/SettingsModal/SettingsModal.module.css @@ -1,73 +1,98 @@ .content { width: 100%; - padding: 16px; + padding: 20px; display: flex; flex-direction: column; - gap: 20px; + gap: 28px; } .modifyIcon { - height: 28px; - width: 28px; + height: 26px; + width: 26px; + transition: transform 0.2s ease, opacity 0.2s ease; +} + +.modifyIcon:hover { + transform: rotate(15deg); + opacity: 0.8; } .section { display: flex; flex-direction: column; - gap: 12px; - margin-top: 10px; + gap: 16px; + padding: 18px; + border-radius: 12px; + background: var(--glass-bg, rgba(255, 255, 255, 0.25)); + backdrop-filter: blur(6px); } .section h3 { - font-size: 1.1rem; - margin-bottom: 5px; + font-size: 1.15rem; + font-weight: 600; } .section h4 { - font-size: 0.95rem; + font-size: 0.9rem; font-weight: 500; -} - -.submitBtn { - width: 100%; - margin-top: 15px; + opacity: 0.85; } .section button { width: 100%; } -@media (min-width: 600px) { +.submitBtn { + width: 100%; + text-align: center; + margin-top: 10px; +} + +.alignText { + text-align: center; + line-height: 1.5; +} + +.section :global(input) { + width: 100%; + box-sizing: border-box; +} + +@media (min-width: 640px) { .content { - padding: 24px; + padding: 28px; + gap: 32px; } - .section h3 { - font-size: 1.2rem; + .section { + padding: 22px; + gap: 18px; } .submitBtn { width: auto; align-self: center; - min-width: 200px; + min-width: 220px; } .section button { width: fit-content; } } + @media (min-width: 900px) { .content { - padding: 30px; - gap: 30px; + padding: 36px; + gap: 36px; } .section { - gap: 14px; + padding: 26px; + border-radius: 16px; } .modifyIcon { height: 30px; width: 30px; } -} +} \ No newline at end of file From 8d7a55c5f85429f0722f8bc291ff2a5bd4ca8514 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 17:29:24 +0100 Subject: [PATCH 31/32] Fix update --- src/pages/Profile/ProfilePage.tsx | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/pages/Profile/ProfilePage.tsx b/src/pages/Profile/ProfilePage.tsx index f0037f9..8e613d0 100644 --- a/src/pages/Profile/ProfilePage.tsx +++ b/src/pages/Profile/ProfilePage.tsx @@ -4,8 +4,8 @@ import {AuthContext} from "../../contexts/auth/AuthContext"; import formatDate from "../../utils/date/formatDate"; import Task from "../../components/Task/Task"; import SettingsModal from "./components/SettingsModal/SettingsModal"; -import { useParams } from "react-router"; -import { useNavigate } from "react-router"; +import {useParams} from "react-router"; +import {useNavigate} from "react-router"; import getUserById from "../../utils/users/getUserById.js"; import ManageMember from "./components/manageMember/ManageMember.jsx"; @@ -35,21 +35,20 @@ interface AuthContextType { update: () => void; } - function ProfilePage() { const navigate = useNavigate(); - const { id } = useParams(); - const { user, update } = useContext(AuthContext) as AuthContextType; + const {id} = useParams(); + const {user, update} = useContext(AuthContext) as AuthContextType; const [profileUser, setProfileUser] = useState(null); const isOwnProfile = !id || user.id.toString() === id; useEffect(() => { - update(); + (async () => { - if(!isOwnProfile) { + if (!isOwnProfile) { console.log(id); const res = await getUserById(id); @@ -64,9 +63,12 @@ function ProfilePage() { } setProfileUser(res.data); - } else setProfileUser(user) - }) () - }, []); + } else { + update(); + setProfileUser(user) + } + })() + }, [user]); return (
@@ -86,7 +88,7 @@ function ProfilePage() { {profileUser?.name} {profileUser?.lastname} {(user?.isAdmin && profileUser && !isOwnProfile) && ( - + )}
@@ -113,7 +115,7 @@ function ProfilePage() { {isOwnProfile && (
- +
)}
From 39b21f8ff8ccda999c486d8c183875df01d520d8 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 24 Feb 2026 17:41:15 +0100 Subject: [PATCH 32/32] Convert to TS --- src/components/Task/Task.jsx | 29 --------------- src/components/Task/Task.tsx | 71 ++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 29 deletions(-) delete mode 100644 src/components/Task/Task.jsx create mode 100644 src/components/Task/Task.tsx diff --git a/src/components/Task/Task.jsx b/src/components/Task/Task.jsx deleted file mode 100644 index d14cabf..0000000 --- a/src/components/Task/Task.jsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, {useEffect, useState} from "react"; -import getEventById from "../../utils/events/getEventById.js"; -import styles from "./Task.module.css"; -import formatDate from "../../utils/date/formatDate.js"; - -const Task = ({ task }) => { - const [event, setEvent] = useState(null); - - useEffect(() => { - (async () => { - const e = await getEventById(task.id); - setEvent(e.data); - }) () - }, []) - - return ( -
-
-
-

{event && event.name} - {task.name}

-

{task.description}

-

{formatDate(task.start)}

-
-
-
- ); -} - -export default Task; \ No newline at end of file diff --git a/src/components/Task/Task.tsx b/src/components/Task/Task.tsx new file mode 100644 index 0000000..7c939b2 --- /dev/null +++ b/src/components/Task/Task.tsx @@ -0,0 +1,71 @@ +import { useEffect, useState } from "react"; +import getEventById from "../../utils/events/getEventById.js"; +import styles from "./Task.module.css"; +import formatDate from "../../utils/date/formatDate"; + +interface TaskType { + 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; + }; +} + +interface EventType { + id: number; + name: string; + description?: string; + location?: string; + start?: string; + end?: string; + created_at?: string; + updated_at?: string; +} + +interface TaskProps { + task: TaskType; +} + +const Task: React.FC = ({ task }) => { + const [event, setEvent] = useState(null); + + useEffect(() => { + const fetchEvent = async (): Promise => { + try { + const e = await getEventById(task.events_id); + setEvent(e.data as EventType); + } catch (error) { + console.error("Erreur lors du chargement de l'événement", error); + } + }; + + fetchEvent(); + }, [task.events_id]); + + return ( +
+
+
+

+ {event?.name} - {task.name} +

+

{task.description}

+

+ {formatDate(task.start)} +

+
+
+
+ ); +}; + +export default Task; \ No newline at end of file