From 883b9b6c4b4163869248db0250ed121385b823c0 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Mon, 15 Dec 2025 16:31:41 +0100 Subject: [PATCH 01/30] dynamic display of notifications --- src/components/Header/Header.jsx | 8 +++++--- src/utils/getUserNotifications.js | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 03a1161..b8f3860 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,23 +2,25 @@ import styles from "./Header.module.css" import { Link, NavLink } from "react-router"; import { useEffect, useRef, useState } from "react"; import getUserNotifications from "../../utils/getUserNotifications.js"; +import getUser from "../../utils/getUser.js"; function Header() { const [notificationMenu, setnotificationMenu] = useState(false); const [unreadNotification, setunreadNotification] = useState(true); const [mobileMenu, setMobileMenu] = useState(false); - const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]); + const [notifications, setNotifications] = useState([]); const notificationRef = useRef(null); useEffect(() => { async function loadNotifications() { - const notifData = await getUserNotifications(); + const user = await getUser(); + const notifData = await getUserNotifications(user.id); setNotifications(notifData || []); } - //loadNotifications(); + loadNotifications(); const handleClickOutside = (event) => { if ( notificationRef.current && diff --git a/src/utils/getUserNotifications.js b/src/utils/getUserNotifications.js index 1b93395..8f750ee 100644 --- a/src/utils/getUserNotifications.js +++ b/src/utils/getUserNotifications.js @@ -1,7 +1,7 @@ -export default async function getUserNotifications() { +export default async function getUserNotifications(id) { try { const response = await fetch( - 'http://localhost:80/api/users/1/notifications', + `http://${import.meta.env.VITE_API_URL}/api/users/${id}/notifications`, { method: 'GET', credentials: 'include', From 0aaafed26ae4fb467a2a536acec7d703a3631210 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Wed, 17 Dec 2025 14:16:08 +0100 Subject: [PATCH 02/30] move utils files --- src/components/Header/Header.jsx | 27 +++++++++++++++++-- src/components/SearchBar/SearchBar.jsx | 4 +-- src/components/Task/Task.jsx | 2 +- .../createEventBtn/CreateEventBtn.jsx | 2 +- src/pages/Events/EventsPage.jsx | 2 +- src/utils/{event => events}/createEvent.js | 0 src/utils/{event => events}/getAllEvents.js | 0 src/utils/{event => events}/getEventById.js | 0 src/utils/{ => events}/searchEvents.js | 0 src/utils/filter.js | 4 +-- .../notifications/deleteNotificationUser.js | 26 ++++++++++++++++++ .../getUserNotifications.js | 0 src/utils/{ => users}/searchUsers.js | 0 13 files changed, 58 insertions(+), 9 deletions(-) rename src/utils/{event => events}/createEvent.js (100%) rename src/utils/{event => events}/getAllEvents.js (100%) rename src/utils/{event => events}/getEventById.js (100%) rename src/utils/{ => events}/searchEvents.js (100%) create mode 100644 src/utils/notifications/deleteNotificationUser.js rename src/utils/{ => notifications}/getUserNotifications.js (100%) rename src/utils/{ => users}/searchUsers.js (100%) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index b8f3860..259bd7d 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,8 +1,9 @@ import styles from "./Header.module.css" import { Link, NavLink } from "react-router"; import { useEffect, useRef, useState } from "react"; -import getUserNotifications from "../../utils/getUserNotifications.js"; +import getUserNotifications from "../../utils/notifications/getUserNotifications.js"; import getUser from "../../utils/getUser.js"; +import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js"; function Header() { const [notificationMenu, setnotificationMenu] = useState(false); @@ -37,6 +38,28 @@ function Header() { }; }, []); + + + + + async function deleteNotification(notificationId) { + try { + const user = await getUser(); + const result = await deleteNotificationUser(user.id, notificationId); + + console.log(result); + + if (result) { + setNotifications(prev => prev.filter(n => n.id !== notificationId)); + } + } catch (err) { + console.error('Erreur suppression notification :', err); + } + } + + + + return (
@@ -114,7 +137,7 @@ function Header() {

{notification.content}

diff --git a/src/components/SearchBar/SearchBar.jsx b/src/components/SearchBar/SearchBar.jsx index d39f095..6635d98 100644 --- a/src/components/SearchBar/SearchBar.jsx +++ b/src/components/SearchBar/SearchBar.jsx @@ -1,8 +1,8 @@ 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 searchEvents from "../../utils/events/searchEvents.js"; +import searchUsers from "../../utils/users/searchUsers.js"; import { useLocation } from "react-router"; diff --git a/src/components/Task/Task.jsx b/src/components/Task/Task.jsx index 740aeda..1be1990 100644 --- a/src/components/Task/Task.jsx +++ b/src/components/Task/Task.jsx @@ -1,5 +1,5 @@ import React, {useEffect, useState} from "react"; -import getEventById from "../../utils/event/getEventById.js"; +import getEventById from "../../utils/events/getEventById.js"; import styles from "./Task.module.css"; import formatDate from "../../utils/date/formatDate.js"; diff --git a/src/components/createEventBtn/CreateEventBtn.jsx b/src/components/createEventBtn/CreateEventBtn.jsx index 3e638db..cc7677f 100644 --- a/src/components/createEventBtn/CreateEventBtn.jsx +++ b/src/components/createEventBtn/CreateEventBtn.jsx @@ -3,7 +3,7 @@ import { useState } from "react"; import Modal from "../ui/modal/modal.jsx"; import Button from "../ui/button/button.jsx"; import TextInput from "../ui/input/input.jsx"; -import createEvent from "../../utils/event/createEvent.js" +import createEvent from "../../utils/events/createEvent.js" export default function CreateEventBtn() { diff --git a/src/pages/Events/EventsPage.jsx b/src/pages/Events/EventsPage.jsx index 19fa549..4c56864 100644 --- a/src/pages/Events/EventsPage.jsx +++ b/src/pages/Events/EventsPage.jsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; import Event from "../../components/Event/Event.jsx"; import styles from "./EventsPage.module.css"; import ToolBar from "../../components/ToolBar/ToolBar.jsx"; -import getAllEvents from "../../utils/event/getAllEvents.js"; +import getAllEvents from "../../utils/events/getAllEvents.js"; import filter from "../../utils/filter.js"; diff --git a/src/utils/event/createEvent.js b/src/utils/events/createEvent.js similarity index 100% rename from src/utils/event/createEvent.js rename to src/utils/events/createEvent.js diff --git a/src/utils/event/getAllEvents.js b/src/utils/events/getAllEvents.js similarity index 100% rename from src/utils/event/getAllEvents.js rename to src/utils/events/getAllEvents.js diff --git a/src/utils/event/getEventById.js b/src/utils/events/getEventById.js similarity index 100% rename from src/utils/event/getEventById.js rename to src/utils/events/getEventById.js diff --git a/src/utils/searchEvents.js b/src/utils/events/searchEvents.js similarity index 100% rename from src/utils/searchEvents.js rename to src/utils/events/searchEvents.js diff --git a/src/utils/filter.js b/src/utils/filter.js index 1495a74..0ed30d7 100644 --- a/src/utils/filter.js +++ b/src/utils/filter.js @@ -4,9 +4,9 @@ function filter(elements, filters, type) { const dB = new Date(dateB); if (filters.yearOrder === "asc") { - return dA - dB; // plus ancien -> plus récent + return dA - dB; } else { - return dB - dA; // plus récent -> plus ancien + return dB - dA; } }; diff --git a/src/utils/notifications/deleteNotificationUser.js b/src/utils/notifications/deleteNotificationUser.js new file mode 100644 index 0000000..0b8bef1 --- /dev/null +++ b/src/utils/notifications/deleteNotificationUser.js @@ -0,0 +1,26 @@ +import getXSRFToken from "../getXSRF.js"; + +export default async function deleteNotificationUser(userId, notificationId) { + const csrfToken = await getXSRFToken(); + + try { + const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/delete/notification/${notificationId}`, { + method: 'DELETE', + credentials: 'include', + headers: { + 'Accept': 'application/json', + 'X-XSRF-TOKEN': csrfToken + } + }); + + if (!res.ok) { + throw new Error(`Erreur serveur : ${res.status}`); + } + + const data = await res.json(); + return data; + } catch (err) { + console.error('Erreur :', err); + return null; + } +} diff --git a/src/utils/getUserNotifications.js b/src/utils/notifications/getUserNotifications.js similarity index 100% rename from src/utils/getUserNotifications.js rename to src/utils/notifications/getUserNotifications.js diff --git a/src/utils/searchUsers.js b/src/utils/users/searchUsers.js similarity index 100% rename from src/utils/searchUsers.js rename to src/utils/users/searchUsers.js From 21259f2838630efbc5617886fe4929c30fc4f791 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Wed, 17 Dec 2025 17:22:10 +0100 Subject: [PATCH 03/30] update notification routes call --- src/components/Header/Header.jsx | 7 ++----- src/utils/notifications/deleteNotificationUser.js | 4 ++-- src/utils/notifications/getUserNotifications.js | 4 ++-- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 259bd7d..7c91356 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -2,7 +2,6 @@ import styles from "./Header.module.css" import { Link, NavLink } from "react-router"; import { useEffect, useRef, useState } from "react"; import getUserNotifications from "../../utils/notifications/getUserNotifications.js"; -import getUser from "../../utils/getUser.js"; import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js"; function Header() { @@ -16,8 +15,7 @@ function Header() { useEffect(() => { async function loadNotifications() { - const user = await getUser(); - const notifData = await getUserNotifications(user.id); + const notifData = await getUserNotifications(); setNotifications(notifData || []); } @@ -44,8 +42,7 @@ function Header() { async function deleteNotification(notificationId) { try { - const user = await getUser(); - const result = await deleteNotificationUser(user.id, notificationId); + const result = await deleteNotificationUser(notificationId); console.log(result); diff --git a/src/utils/notifications/deleteNotificationUser.js b/src/utils/notifications/deleteNotificationUser.js index 0b8bef1..804c1dd 100644 --- a/src/utils/notifications/deleteNotificationUser.js +++ b/src/utils/notifications/deleteNotificationUser.js @@ -1,10 +1,10 @@ import getXSRFToken from "../getXSRF.js"; -export default async function deleteNotificationUser(userId, notificationId) { +export default async function deleteNotificationUser(notificationId) { const csrfToken = await getXSRFToken(); try { - const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/delete/notification/${notificationId}`, { + const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/delete/notification/${notificationId}`, { method: 'DELETE', credentials: 'include', headers: { diff --git a/src/utils/notifications/getUserNotifications.js b/src/utils/notifications/getUserNotifications.js index 8f750ee..491471f 100644 --- a/src/utils/notifications/getUserNotifications.js +++ b/src/utils/notifications/getUserNotifications.js @@ -1,7 +1,7 @@ -export default async function getUserNotifications(id) { +export default async function getUserNotifications() { try { const response = await fetch( - `http://${import.meta.env.VITE_API_URL}/api/users/${id}/notifications`, + `http://${import.meta.env.VITE_API_URL}/api/users/notifications`, { method: 'GET', credentials: 'include', From 2df24024d72e6aed2bb6c6e197490265f6db88ba Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Sat, 27 Dec 2025 17:51:12 +0100 Subject: [PATCH 04/30] correction eventDetail --- src/layout.jsx | 4 +- src/pages/eventDetail/eventDetail.jsx | 58 ++++++++++++++++++++ src/pages/eventDetail/eventDetail.module.css | 44 +++++++++++++++ src/router.js | 7 ++- 4 files changed, 110 insertions(+), 3 deletions(-) create mode 100644 src/pages/eventDetail/eventDetail.jsx create mode 100644 src/pages/eventDetail/eventDetail.module.css diff --git a/src/layout.jsx b/src/layout.jsx index 4fa0991..313b6ae 100644 --- a/src/layout.jsx +++ b/src/layout.jsx @@ -9,11 +9,11 @@ import { AuthContext } from "./contexts/auth/AuthContext.js"; function Layout(){ - const { user, loading } = useContext(AuthContext); + /*const { user, loading } = useContext(AuthContext); if (loading) return

Loading

; if (!user) return ; - if(user && user.validate === 0) return ; + if(user && user.validate === 0) return ;*/ return (
diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx new file mode 100644 index 0000000..5f196cb --- /dev/null +++ b/src/pages/eventDetail/eventDetail.jsx @@ -0,0 +1,58 @@ +import { useState } from "react"; +import styles from "./eventDetail.module.css"; + + +function eventDetail(){ + + const [tasks, setTasks] = useState([ + { text: "Préparer les slides", completed: false }, + { text: "Réserver la salle", completed: false }, + { text: "Envoyer les invitations", completed: false }, + { text: "Tester la configuration technique", completed: false }, + { text: "Organiser le catering", completed: false }, + ]); + + const event = { + title: "Conférence React 2025", + date: "27 Décembre 2025", + location: "Paris, France", + description: + "Une conférence dédiée aux développeurs React pour partager les dernières nouveautés et bonnes pratiques.", + }; + + const toggleTask = (index) => { + const newTasks = [...tasks]; + newTasks[index].completed = !newTasks[index].completed; + setTasks(newTasks); + }; + + return ( +
+

{event.title}

+
+

Date: {event.date}

+

Lieu: {event.location}

+

Description: {event.description}

+
+ +

Tâches

+
    + {tasks.map((task, index) => ( +
  • + toggleTask(index)} + /> + {task.text} +
    • + ))} +
+
+ ); +} + +export default eventDetail; diff --git a/src/pages/eventDetail/eventDetail.module.css b/src/pages/eventDetail/eventDetail.module.css new file mode 100644 index 0000000..3c314c4 --- /dev/null +++ b/src/pages/eventDetail/eventDetail.module.css @@ -0,0 +1,44 @@ +.container { + max-width: 600px; + margin: 40px auto; + background-color: #fff; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0,0,0,0.1); + padding: 20px; + font-family: Arial, sans-serif; +} + +.title { + font-size: 2rem; + color: #333; + margin-bottom: 10px; +} + +.eventInfo p { + margin: 5px 0; + font-size: 1rem; + color: #555; +} + +.tasks { + list-style: none; + padding: 0; +} + +.tasks li { + background-color: #f9f9f9; + margin: 5px 0; + padding: 10px; + border-radius: 5px; + display: flex; + align-items: center; +} + +.tasks li.completed { + text-decoration: line-through; + opacity: 0.6; +} + +.tasks input[type="checkbox"] { + margin-right: 10px; +} diff --git a/src/router.js b/src/router.js index 73e049e..abe0254 100644 --- a/src/router.js +++ b/src/router.js @@ -10,6 +10,7 @@ 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"; const router = createBrowserRouter([ { @@ -59,7 +60,11 @@ const router = createBrowserRouter([ { path: "/profile/:id", Component: VolunteerProfilePage, - } + }, + { + path: "/eventDetail", + Component: eventDetail, + }, ] } ]) From 31e494bb36dd4229b9c155a12e92700696e23508 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Mon, 5 Jan 2026 09:37:07 +0100 Subject: [PATCH 05/30] merge dev --- src/components/Header/Header.jsx | 8 ++++---- src/pages/eventDetail/eventDetail.jsx | 13 +------------ 2 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index d467539..a83573b 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,9 +55,9 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {user.isAdmin && isActive ? styles.activeLink : styles.link}> + {/*{user.isAdmin && isActive ? styles.activeLink : styles.link}> Administration - } + }*/}
@@ -89,9 +89,9 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {user.isAdmin && isActive ? styles.activeLink : styles.link}> + {/*{user.isAdmin && isActive ? styles.activeLink : styles.link}> Administration - } + }*/} diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 5f196cb..64c7721 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/src/pages/eventDetail/eventDetail.jsx @@ -4,7 +4,7 @@ import styles from "./eventDetail.module.css"; function eventDetail(){ - const [tasks, setTasks] = useState([ + const [tasks] = useState([ { text: "Préparer les slides", completed: false }, { text: "Réserver la salle", completed: false }, { text: "Envoyer les invitations", completed: false }, @@ -20,12 +20,6 @@ function eventDetail(){ "Une conférence dédiée aux développeurs React pour partager les dernières nouveautés et bonnes pratiques.", }; - const toggleTask = (index) => { - const newTasks = [...tasks]; - newTasks[index].completed = !newTasks[index].completed; - setTasks(newTasks); - }; - return (

{event.title}

@@ -42,11 +36,6 @@ function eventDetail(){ key={index} className={task.completed ? styles.completed : ""} > - toggleTask(index)} - /> {task.text} ))} From 3fc095b3ebf13377d8e352d9349e06ff88b836b5 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Mon, 5 Jan 2026 11:01:42 +0100 Subject: [PATCH 06/30] fin de homepage (800 essais) --- src/components/homePage/calendar.module.css | 10 +++++++--- src/components/homePage/eventList.jsx | 2 -- src/components/homePage/eventList.module.css | 14 ++++++++++++-- src/pages/Home/HomePage.module.css | 6 ++++++ 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/components/homePage/calendar.module.css b/src/components/homePage/calendar.module.css index 5431a08..17080bb 100644 --- a/src/components/homePage/calendar.module.css +++ b/src/components/homePage/calendar.module.css @@ -1,6 +1,5 @@ .calendarContainer { padding: 20px; - font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; @@ -120,7 +119,7 @@ } .eventBox ul { - list-style-type: disc; + list-style: none; } .eventGroup{ @@ -162,9 +161,14 @@ @media (max-width: 768px) { .glassCard { width: 100%; - margin: 0px; margin-top: 16px; margin-bottom: 16px; + } + + .calendarContainer { + padding: 20px; display: flex; + flex-direction: column; + align-items: center; } } \ No newline at end of file diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index 1faf7e3..be7e903 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -18,7 +18,6 @@ function eventList() { return (
-

Liste des événements à venir

{sortedEvents.length > 0 ? (
    @@ -38,7 +37,6 @@ function eventList() { ) : (

    Aucun événement planifié pour l'instant.

    )} -
); diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 3288f5e..5be6fea 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -49,8 +49,17 @@ h2{ justify-content: center; } -.eventListContainer{ - width: 100%; +.eventGroup{ + margin: 16px 0px 16px 0px; + padding: 10px 20px 10px 20px; + border-radius: 20px; + border: none; + background: transparent; + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { @@ -60,5 +69,6 @@ h2{ margin-top: 16px; margin-bottom: 16px; display: flex; + flex-direction: column; } } \ No newline at end of file diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index ddb110b..e3aca0a 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -1,3 +1,9 @@ +.allContent{ + display: flex; + justify-content: center; + gap:80px; +} + @media (max-width: 768px) { .allContent{ display: flex; From 68d2db0ed3809d9c2ab78aa3bc235f625c348ac1 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Mon, 5 Jan 2026 11:15:17 +0100 Subject: [PATCH 07/30] correction erreur responsive --- src/components/Header/Header.jsx | 8 ++++---- src/layout.jsx | 4 ++-- src/pages/Home/HomePage.module.css | 10 ++-------- 3 files changed, 8 insertions(+), 14 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 5b4300f..290cb24 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,11 +55,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {user?.isAdmin && ( + {/*{user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )} + )}*/}
@@ -91,11 +91,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {user?.isAdmin && ( + {/*{user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )} + )}*/} diff --git a/src/layout.jsx b/src/layout.jsx index ebbd503..3e477a4 100644 --- a/src/layout.jsx +++ b/src/layout.jsx @@ -9,11 +9,11 @@ import { AuthContext } from "./contexts/auth/AuthContext.js"; function Layout(){ - const { user, loading } = useContext(AuthContext); + /*const { user, loading } = useContext(AuthContext); if (loading) return

Loading

; if (!user) return ; - if(user && user.validate === 0) return ; + if(user && user.validate === 0) return ;*/ return (
diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index a4b8268..bc243f3 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -1,7 +1,7 @@ .allContent{ display: flex; - justify-content: center; - gap:80px; + flex-direction: row; + gap: 7%; } @media (max-width: 768px) { @@ -10,10 +10,4 @@ flex-direction: column; gap: 0px; } -} - -.allContent{ - display: flex; - flex-direction: row; - gap: 7%; } \ No newline at end of file From 1936151267b25ba116b4c78746a8c919ebbbd90b Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Mon, 5 Jan 2026 12:09:01 +0100 Subject: [PATCH 08/30] fix visuel homepage --- src/components/homePage/calendar.module.css | 3 ++- src/components/homePage/eventList.module.css | 5 +++-- src/pages/Home/HomePage.module.css | 3 ++- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/homePage/calendar.module.css b/src/components/homePage/calendar.module.css index 17080bb..534d2c1 100644 --- a/src/components/homePage/calendar.module.css +++ b/src/components/homePage/calendar.module.css @@ -137,7 +137,7 @@ .glassCard { width: 45%; - max-height: 475px; + max-height: 450px; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; @@ -163,6 +163,7 @@ width: 100%; margin-top: 16px; margin-bottom: 16px; + max-height: 450px; } .calendarContainer { diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 5be6fea..0b27a64 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -1,6 +1,6 @@ .glassCard { width: 45%; - max-height: 475px; + max-height: 450px; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; @@ -45,6 +45,7 @@ } h2{ + font-size: 30px; display: flex; justify-content: center; } @@ -65,9 +66,9 @@ h2{ @media (max-width: 768px) { .glassCard { width: 100%; - margin: 0px; margin-top: 16px; margin-bottom: 16px; + max-height: 450px; display: flex; flex-direction: column; } diff --git a/src/pages/Home/HomePage.module.css b/src/pages/Home/HomePage.module.css index bc243f3..8d3602d 100644 --- a/src/pages/Home/HomePage.module.css +++ b/src/pages/Home/HomePage.module.css @@ -1,7 +1,8 @@ .allContent{ display: flex; flex-direction: row; - gap: 7%; + justify-content: center; + gap: 80px; } @media (max-width: 768px) { From 4a5e2210c8140cef886e496c58123677d2b1afb1 Mon Sep 17 00:00:00 2001 From: Antoine Ordonneau Date: Mon, 5 Jan 2026 16:06:32 +0100 Subject: [PATCH 09/30] resolve merge conflict --- src/components/Header/Header.jsx | 8 ++++---- src/layout.jsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index a83573b..d467539 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,9 +55,9 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user.isAdmin && isActive ? styles.activeLink : styles.link}> + {user.isAdmin && isActive ? styles.activeLink : styles.link}> Administration - }*/} + }
@@ -89,9 +89,9 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user.isAdmin && isActive ? styles.activeLink : styles.link}> + {user.isAdmin && isActive ? styles.activeLink : styles.link}> Administration - }*/} + } diff --git a/src/layout.jsx b/src/layout.jsx index 313b6ae..4fa0991 100644 --- a/src/layout.jsx +++ b/src/layout.jsx @@ -9,11 +9,11 @@ import { AuthContext } from "./contexts/auth/AuthContext.js"; function Layout(){ - /*const { user, loading } = useContext(AuthContext); + const { user, loading } = useContext(AuthContext); if (loading) return

Loading

; if (!user) return ; - if(user && user.validate === 0) return ;*/ + if(user && user.validate === 0) return ; return (
From 7f5be9ea32f373c90c7df67e3a251439e73d13fb Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 14:54:00 +0100 Subject: [PATCH 10/30] Link hompeage eventlist to backend --- src/components/homePage/eventList.jsx | 51 ++++++++++++-------- src/components/homePage/eventList.module.css | 19 +++++++- src/utils/date/formatDateLetter.js | 10 ++-- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index be7e903..115b2cc 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,37 +1,50 @@ -import {useMemo} from "react"; +import { useMemo, useEffect, useState } from "react"; import styles from "./eventList.module.css"; import formatDateLetter from "../../utils/date/formatDateLetter.js"; -function eventList() { - const events = { - "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], - "2025-11-10": ["Cours de React", "Rendez-vous médecin"], - "2025-11-14": ["Sortie cinéma"], - "2025-11-15": ["Sortie cinéma"], - "2025-11-17": ["Sortie cinéma"], - }; +import getAllEvents from "../../utils/event/getAllEvents.js"; + + +function EventList() { + + const [events, setEvents] = useState([]); + + useEffect(() => { + (async () => { + const data = await getAllEvents(); + setEvents(data.data); + console.log(data.data); + }) () + }, []) const sortedEvents = useMemo(() => { - return Object.entries(events) - .map(([dateKey, eventList]) => ({date: dateKey, events: eventList})) - .sort((a, b) => new Date(a.date) - new Date(b.date)); + return [...events].sort( + (a, b) => new Date(a.start) - new Date(b.start) + ); }, [events]); + return (

Liste des événements à venir

{sortedEvents.length > 0 ? (
    - {sortedEvents.map((eventGroup) => ( -
  • -
    - {formatDateLetter(eventGroup.date)} + {sortedEvents.map((eventGroup, index) => ( + +
  • +
    +

    {eventGroup.name}

    +

    {formatDateLetter(eventGroup.start)} - {formatDateLetter(eventGroup.end)}

      - {eventGroup.events.map((event, i) => ( -
    • - {event}
      • + {eventGroup.tasks.map((task, i) => ( +
    • +

      - {task.name} - {task.description}

      +

      {formatDateLetter(task.start)} - {formatDateLetter(task.end)}

      +
      • ))}
    • + ))}
) : ( @@ -42,4 +55,4 @@ function eventList() { ); } -export default eventList; \ No newline at end of file +export default EventList; \ No newline at end of file diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 0b27a64..30810e2 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -35,9 +35,8 @@ } .eventDetails { - list-style: none; + margin-top: 10px; padding: 0; - margin: 0; } .dateSelected{ @@ -63,6 +62,22 @@ h2{ inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } +.eventTitle { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-weight: bold; +} + +.eventTasks { + display: flex; + flex-direction: row; + justify-content: space-between; +} + @media (max-width: 768px) { .glassCard { width: 100%; diff --git a/src/utils/date/formatDateLetter.js b/src/utils/date/formatDateLetter.js index 8143337..67cd8f6 100644 --- a/src/utils/date/formatDateLetter.js +++ b/src/utils/date/formatDateLetter.js @@ -3,6 +3,10 @@ export default function formatDateLetter(d) { "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; - const [year, month, day] = d.split('-'); - return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; -}; \ No newline at end of file + + const [datePart, timePart] = d.split(' '); + const [year, month, day] = datePart.split('-'); + const [hours, minutes] = timePart.split(':'); + + return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`; +} From 0f0c51cfbd6f6fed7ec4b6d0bc0600424753ffaa Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 14:54:08 +0100 Subject: [PATCH 11/30] Uncomment links --- src/components/Header/Header.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 290cb24..5b4300f 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,11 +55,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )}
@@ -91,11 +91,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )} From 929ef5fa82db216e1589b9a15dfa42eb8aae33bf Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 14:54:00 +0100 Subject: [PATCH 12/30] Link hompeage eventlist to backend --- src/components/homePage/eventList.jsx | 51 ++++++++++++-------- src/components/homePage/eventList.module.css | 19 +++++++- src/utils/date/formatDateLetter.js | 10 ++-- 3 files changed, 56 insertions(+), 24 deletions(-) diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index be7e903..115b2cc 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,37 +1,50 @@ -import {useMemo} from "react"; +import { useMemo, useEffect, useState } from "react"; import styles from "./eventList.module.css"; import formatDateLetter from "../../utils/date/formatDateLetter.js"; -function eventList() { - const events = { - "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], - "2025-11-10": ["Cours de React", "Rendez-vous médecin"], - "2025-11-14": ["Sortie cinéma"], - "2025-11-15": ["Sortie cinéma"], - "2025-11-17": ["Sortie cinéma"], - }; +import getAllEvents from "../../utils/event/getAllEvents.js"; + + +function EventList() { + + const [events, setEvents] = useState([]); + + useEffect(() => { + (async () => { + const data = await getAllEvents(); + setEvents(data.data); + console.log(data.data); + }) () + }, []) const sortedEvents = useMemo(() => { - return Object.entries(events) - .map(([dateKey, eventList]) => ({date: dateKey, events: eventList})) - .sort((a, b) => new Date(a.date) - new Date(b.date)); + return [...events].sort( + (a, b) => new Date(a.start) - new Date(b.start) + ); }, [events]); + return (

Liste des événements à venir

{sortedEvents.length > 0 ? (
    - {sortedEvents.map((eventGroup) => ( -
  • -
    - {formatDateLetter(eventGroup.date)} + {sortedEvents.map((eventGroup, index) => ( + +
  • +
    +

    {eventGroup.name}

    +

    {formatDateLetter(eventGroup.start)} - {formatDateLetter(eventGroup.end)}

      - {eventGroup.events.map((event, i) => ( -
    • - {event}
      • + {eventGroup.tasks.map((task, i) => ( +
    • +

      - {task.name} - {task.description}

      +

      {formatDateLetter(task.start)} - {formatDateLetter(task.end)}

      +
      • ))}
    • + ))}
) : ( @@ -42,4 +55,4 @@ function eventList() { ); } -export default eventList; \ No newline at end of file +export default EventList; \ No newline at end of file diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 0b27a64..30810e2 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -35,9 +35,8 @@ } .eventDetails { - list-style: none; + margin-top: 10px; padding: 0; - margin: 0; } .dateSelected{ @@ -63,6 +62,22 @@ h2{ inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } +.eventTitle { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-weight: bold; +} + +.eventTasks { + display: flex; + flex-direction: row; + justify-content: space-between; +} + @media (max-width: 768px) { .glassCard { width: 100%; diff --git a/src/utils/date/formatDateLetter.js b/src/utils/date/formatDateLetter.js index 8143337..67cd8f6 100644 --- a/src/utils/date/formatDateLetter.js +++ b/src/utils/date/formatDateLetter.js @@ -3,6 +3,10 @@ export default function formatDateLetter(d) { "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; - const [year, month, day] = d.split('-'); - return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; -}; \ No newline at end of file + + const [datePart, timePart] = d.split(' '); + const [year, month, day] = datePart.split('-'); + const [hours, minutes] = timePart.split(':'); + + return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`; +} From d98c6db3c29923ceab27de24ebb12e7a75a9c93a Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 14:54:08 +0100 Subject: [PATCH 13/30] Uncomment links --- src/components/Header/Header.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 290cb24..5b4300f 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,11 +55,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )}
@@ -91,11 +91,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )} From 5d7a79f82aeedcd4bd1ae942abd895554a070242 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 15:15:02 +0100 Subject: [PATCH 14/30] link homepage calendar to backend --- src/components/homePage/calendar.jsx | 124 +++++++++++---------------- 1 file changed, 52 insertions(+), 72 deletions(-) diff --git a/src/components/homePage/calendar.jsx b/src/components/homePage/calendar.jsx index f8ed8f2..a54f369 100644 --- a/src/components/homePage/calendar.jsx +++ b/src/components/homePage/calendar.jsx @@ -1,30 +1,39 @@ -import {useState} from "react"; +import { useState, useMemo, useEffect } from "react"; import styles from "./calendar.module.css"; import formatDateLetter from "../../utils/date/formatDateLetter.js"; -function Calendar() { - const events = { - "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], - "2025-11-10": ["Cours de React", "Rendez-vous médecin"], - "2025-11-14": ["Sortie cinéma"], - "2025-11-15": ["Sortie cinéma"], - "2025-11-17": ["Sortie cinéma"], - }; +function Calendar({ events = [] }) { + const monthNames = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; const today = new Date(); + const [currentMonth, setCurrentMonth] = useState(today.getMonth()); const [currentYear, setCurrentYear] = useState(today.getFullYear()); - const [selectedDay, setSelectedDay] = useState(() => { - const year = today.getFullYear(); - const month = String(today.getMonth() + 1).padStart(2, "0"); - const day = String(today.getDate()).padStart(2, "0"); - const key = `${year}-${month}-${day}`; - return {date: key, events: events[key] || []}; - }); + const [selectedDay, setSelectedDay] = useState(null); + + const eventsByDate = useMemo(() => { + return events.reduce((acc, ev) => { + if (!ev?.start) return acc; + + const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD + if (!acc[dateKey]) acc[dateKey] = []; + acc[dateKey].push(ev); + return acc; + }, {}); + }, [events]); + + useEffect(() => { + const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`; + + setSelectedDay({ + date: key, + events: eventsByDate[key] || [] + }); + }, [eventsByDate]); const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const firstDay = new Date(currentYear, currentMonth, 1).getDay(); @@ -34,87 +43,55 @@ function Calendar() { for (let i = 0; i < startDay; i++) days.push(null); for (let i = 1; i <= daysInMonth; i++) days.push(i); - const handlePrevMonth = () => { - let newMonth = currentMonth - 1; - let newYear = currentYear; - - if (newMonth < 0) { - newMonth = 11; - newYear--; - } - - setCurrentMonth(newMonth); - setCurrentYear(newYear); - - const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; - setSelectedDay({date: key, events: events[key] || []}); - }; - - const handleNextMonth = () => { - let newMonth = currentMonth + 1; - let newYear = currentYear; - - if (newMonth > 11) { - newMonth = 0; - newYear++; - } - - setCurrentMonth(newMonth); - setCurrentYear(newYear); - - const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; - setSelectedDay({date: key, events: events[key] || []}); + const selectDay = (year, month, day) => { + const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; + setSelectedDay({ + date: key, + events: eventsByDate[key] || [] + }); }; const handleDayClick = (day) => { if (!day) return; - const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - setSelectedDay({date: key, events: events[key] || []}); + selectDay(currentYear, currentMonth, day); }; return (
+
- +

{monthNames[currentMonth]} {currentYear}

- +
- - - - - - - + + - - {Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => ( - - {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { + {Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => ( + + {days.slice(w * 7, w * 7 + 7).map((day, i) => { + if (!day) return ; + const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - const hasEvent = events[key]; + const hasEvent = (eventsByDate[key]?.length ?? 0) > 0; return ( ); })} @@ -125,12 +102,15 @@ function Calendar() { {selectedDay && (
-

Événements du {formatDateLetter(selectedDay.date)}

+

Événements du {selectedDay.date}

{selectedDay.events.length > 0 ? (
    - {selectedDay.events.map((ev, i) => ( -
  • {ev}
    • + {selectedDay.events.map(ev => ( +
  • + {ev.name}
    + {ev.description} +
    • ))}
) : ( @@ -143,4 +123,4 @@ function Calendar() { ); } -export default Calendar; \ No newline at end of file +export default Calendar; From ca03ef147e949417978c159e2e148e4140d0658a Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 15:15:27 +0100 Subject: [PATCH 15/30] Fetch events from homepage --- src/components/homePage/eventList.jsx | 15 ++------------- src/pages/Home/HomePage.jsx | 19 +++++++++++++++---- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index 115b2cc..d6b0b69 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,20 +1,9 @@ -import { useMemo, useEffect, useState } from "react"; +import { useMemo } from "react"; import styles from "./eventList.module.css"; import formatDateLetter from "../../utils/date/formatDateLetter.js"; -import getAllEvents from "../../utils/event/getAllEvents.js"; -function EventList() { - - const [events, setEvents] = useState([]); - - useEffect(() => { - (async () => { - const data = await getAllEvents(); - setEvents(data.data); - console.log(data.data); - }) () - }, []) +function EventList({ events }) { const sortedEvents = useMemo(() => { return [...events].sort( diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index 21b8881..02bde02 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,15 +1,26 @@ import styles from "./HomePage.module.css"; import Calendar from "../../components/homePage/calendar.jsx"; import EventList from "../../components/homePage/eventList.jsx"; +import { useState, useEffect } from "react"; +import getAllEvents from "../../utils/event/getAllEvents.js"; function HomePage() { + + const [events, setEvents] = useState([]); + + useEffect(() => { + (async () => { + const data = await getAllEvents(); + setEvents(data.data); + }) () + }, []) + return (
- - - + +
); } -export default HomePage; \ No newline at end of file +export default HomePage; From d6cff2d4748320e9a881b3c5dd15772397a976bf Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 15:18:52 +0100 Subject: [PATCH 16/30] Format date --- src/components/homePage/calendar.jsx | 4 ++-- src/components/homePage/eventList.jsx | 2 +- src/utils/date/formatDateLetter.js | 12 +++++++++++- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/homePage/calendar.jsx b/src/components/homePage/calendar.jsx index a54f369..ab2da6d 100644 --- a/src/components/homePage/calendar.jsx +++ b/src/components/homePage/calendar.jsx @@ -1,6 +1,6 @@ import { useState, useMemo, useEffect } from "react"; import styles from "./calendar.module.css"; -import formatDateLetter from "../../utils/date/formatDateLetter.js"; +import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js"; function Calendar({ events = [] }) { @@ -102,7 +102,7 @@ function Calendar({ events = [] }) { {selectedDay && (
-

Événements du {selectedDay.date}

+

Événements du {formatDateLetterJS(selectedDay.date)}

{selectedDay.events.length > 0 ? (
    diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index d6b0b69..3643509 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,6 +1,6 @@ import { useMemo } from "react"; import styles from "./eventList.module.css"; -import formatDateLetter from "../../utils/date/formatDateLetter.js"; +import { formatDateLetter } from "../../utils/date/formatDateLetter.js"; function EventList({ events }) { diff --git a/src/utils/date/formatDateLetter.js b/src/utils/date/formatDateLetter.js index 67cd8f6..3480835 100644 --- a/src/utils/date/formatDateLetter.js +++ b/src/utils/date/formatDateLetter.js @@ -1,4 +1,4 @@ -export default function formatDateLetter(d) { +export function formatDateLetter(d) { const monthNames = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" @@ -10,3 +10,13 @@ export default function formatDateLetter(d) { return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`; } + + +export function formatDateLetterJS(d) { + const monthNames = [ + "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", + "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" + ]; + const [year, month, day] = d.split('-'); + return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; +} \ No newline at end of file From b58a1a321ddc5475a0017af933d92e136d82884b Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Wed, 7 Jan 2026 17:04:10 +0100 Subject: [PATCH 17/30] Add date to event create --- .../createEventBtn/CreateEventBtn.jsx | 26 ++++++++++++++++--- .../createEventBtn/createEventBtn.module.css | 18 +++++++++++++ src/utils/event/createEvent.js | 4 +-- 3 files changed, 42 insertions(+), 6 deletions(-) diff --git a/src/components/createEventBtn/CreateEventBtn.jsx b/src/components/createEventBtn/CreateEventBtn.jsx index 3e638db..7e99ec4 100644 --- a/src/components/createEventBtn/CreateEventBtn.jsx +++ b/src/components/createEventBtn/CreateEventBtn.jsx @@ -11,10 +11,15 @@ export default function CreateEventBtn() { const [isOpen, setIsOpen] = useState(false); const [name, setName] = useState(""); const [description, setDescription] = useState(""); + const [start, setStart] = useState(""); + const [end, setEnd] = useState(""); const handleCreateEvent = async () => { - if(name !== "" || description !== "") await createEvent(name, description); + if(name !== "" || description !== "" || start !== "" || end !== "") { + await createEvent(name, description, start, end); + console.log(start); + } setIsOpen(false); } @@ -26,16 +31,29 @@ export default function CreateEventBtn() {

    Titre

    - setName(e.target.value)} /> + setName(e.target.value)} />

    Description

    - setDescription(e.target.value)} /> + setDescription(e.target.value)} /> +
    + +
    +

    Date

    +
    +
    +

    Début

    + setStart(e.target.value)} /> +
    +
    +

    Fin

    + setEnd(e.target.value)} /> +
    +
    -
    diff --git a/src/components/createEventBtn/createEventBtn.module.css b/src/components/createEventBtn/createEventBtn.module.css index 5676052..045d533 100644 --- a/src/components/createEventBtn/createEventBtn.module.css +++ b/src/components/createEventBtn/createEventBtn.module.css @@ -26,6 +26,14 @@ } margin: 1em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.input { + width: 70%; } .create { @@ -38,4 +46,14 @@ gap: 10px; margin-top: 15px; margin-bottom: 15px; +} + +.dateInputContainer { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +.dateInput { + margin: 1em; } \ No newline at end of file diff --git a/src/utils/event/createEvent.js b/src/utils/event/createEvent.js index 4098dd7..d1b0735 100644 --- a/src/utils/event/createEvent.js +++ b/src/utils/event/createEvent.js @@ -1,6 +1,6 @@ import getXSRFToken from "../getXSRF.js"; -export default async function createEvent(name, description) { +export default async function createEvent(name, description, start, end) { const csrfToken = await getXSRFToken(); try { @@ -12,7 +12,7 @@ export default async function createEvent(name, description) { 'X-XSRF-TOKEN': csrfToken, 'Accept': 'application/json' }, - body: JSON.stringify({ name, description }), + body: JSON.stringify({ name, description, start, end }), }); const data = await response.json(); From 42748ad722aa5799a03090727f8fd9add5685ce2 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Thu, 8 Jan 2026 15:00:43 +0100 Subject: [PATCH 18/30] add read notifications route and update notifications behavior --- .env.exemple | 12 +- package-lock.json | 192 ++++++++++++++++++- package.json | 3 + src/components/Header/Header.jsx | 57 +++++- src/utils/echo/initEcho.js | 21 ++ src/utils/notifications/readNotifications.js | 27 +++ 6 files changed, 301 insertions(+), 11 deletions(-) create mode 100644 src/utils/echo/initEcho.js create mode 100644 src/utils/notifications/readNotifications.js diff --git a/.env.exemple b/.env.exemple index 3452b5c..5136f91 100644 --- a/.env.exemple +++ b/.env.exemple @@ -1 +1,11 @@ -VITE_API_URL= \ No newline at end of file +VITE_API_URL= + +BROADCASTER = reverb +REVERB_KEY = local +REVERB_HOST = 127.0.0.1 +REVERB_PORT = 8080 +FORCE_TLS = false +DISABLE_STATS = true +ENCRYPTED = false +CLUSTER = mt1 +ENABLED_TRANSPORTS = [ws, wss] \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c714a7e..1381366 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,10 @@ "name": "sae-front", "version": "0.0.0", "dependencies": { + "@laravel/echo-react": "^2.2.6", "chart.js": "^4.5.1", + "laravel-echo": "^2.2.7", + "pusher-js": "^8.4.0", "react": "^19.1.1", "react-chartjs-2": "^5.3.1", "react-dom": "^19.1.1", @@ -1116,6 +1119,20 @@ "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==", "license": "MIT" }, + "node_modules/@laravel/echo-react": { + "version": "2.2.6", + "resolved": "https://registry.npmjs.org/@laravel/echo-react/-/echo-react-2.2.6.tgz", + "integrity": "sha512-xI5ekwEBhxKfSu/qIv9efXPLoM9RrszI51llWpNY4o71C1l5R7teMV8BbXA+1UbI0ijSyAI7MHxlkP6Cy3AVLw==", + "license": "MIT", + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "pusher-js": "*", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "socket.io-client": "*" + } + }, "node_modules/@mdx-js/react": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz", @@ -1535,6 +1552,13 @@ "win32" ] }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz", + "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==", + "license": "MIT", + "peer": true + }, "node_modules/@standard-schema/spec": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz", @@ -2906,6 +2930,70 @@ "node": ">=14" } }, + "node_modules/engine.io-client": { + "version": "6.6.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz", + "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==", + "license": "MIT", + "peer": true, + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.17.1", + "xmlhttprequest-ssl": "~2.1.1" + } + }, + "node_modules/engine.io-client/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.17.1", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz", + "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz", + "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==", + "license": "MIT", + "peer": true, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/es-module-lexer": { "version": "1.7.0", "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.7.0.tgz", @@ -3800,6 +3888,19 @@ "node": ">=6" } }, + "node_modules/laravel-echo": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/laravel-echo/-/laravel-echo-2.2.7.tgz", + "integrity": "sha512-MgD3ZFXqH5OOVdRjxNHPyQ0ijRr5+nLr7MtyF2XP+kRfhl+Qaa7qVzbtCn1HMgXuTn4SWH6ivn4qWVLlvRl8kg==", + "license": "MIT", + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "pusher-js": "*", + "socket.io-client": "*" + } + }, "node_modules/levn": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", @@ -4023,7 +4124,6 @@ "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", - "dev": true, "license": "MIT" }, "node_modules/nanoid": { @@ -4410,6 +4510,15 @@ "node": ">=6" } }, + "node_modules/pusher-js": { + "version": "8.4.0", + "resolved": "https://registry.npmjs.org/pusher-js/-/pusher-js-8.4.0.tgz", + "integrity": "sha512-wp3HqIIUc1GRyu1XrP6m2dgyE9MoCsXVsWNlohj0rjSkLf+a0jLvEyVubdg58oMk7bhjBWnFClgp8jfAa6Ak4Q==", + "license": "MIT", + "dependencies": { + "tweetnacl": "^1.0.3" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -4788,6 +4897,72 @@ "dev": true, "license": "MIT" }, + "node_modules/socket.io-client": { + "version": "4.8.1", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz", + "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.6.1", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-client/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "license": "MIT", + "peer": true, + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser/node_modules/debug": { + "version": "4.3.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz", + "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -5205,6 +5380,12 @@ "dev": true, "license": "0BSD" }, + "node_modules/tweetnacl": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz", + "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw==", + "license": "Unlicense" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5638,6 +5819,15 @@ } } }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz", + "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==", + "peer": true, + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/package.json b/package.json index 996fc4e..9e4e83d 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,10 @@ "test": "vitest" }, "dependencies": { + "@laravel/echo-react": "^2.2.6", "chart.js": "^4.5.1", + "laravel-echo": "^2.2.7", + "pusher-js": "^8.4.0", "react": "^19.1.1", "react-chartjs-2": "^5.3.1", "react-dom": "^19.1.1", diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 7c91356..9f7046f 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -1,25 +1,54 @@ import styles from "./Header.module.css" import { Link, NavLink } from "react-router"; -import { useEffect, useRef, useState } from "react"; +import {useContext, useEffect, useRef, useState} from "react"; import getUserNotifications from "../../utils/notifications/getUserNotifications.js"; import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js"; +import initEcho from "../../utils/echo/initEcho.js" +import readNotifications from "../../utils/notifications/readNotifications.js"; +import {AuthContext} from "../../contexts/auth/AuthContext.js"; + function Header() { + const { update } = useContext(AuthContext); const [notificationMenu, setnotificationMenu] = useState(false); - const [unreadNotification, setunreadNotification] = useState(true); + const [unreadNotification, setunreadNotification] = useState(false); const [mobileMenu, setMobileMenu] = useState(false); const [notifications, setNotifications] = useState([]); const notificationRef = useRef(null); + useEffect(() => { + const echo = initEcho(); + + echo.private("admins-private") + .listen(".user.created", (event) => { + const newNotification = { + id: Date.now(), + content: `Nouvel demande d'inscription : ${event.user.name} ${event.user.lastname}`, + is_new: true + }; + setNotifications(prevNotifications => [newNotification, ...prevNotifications]); + setunreadNotification(true); + }); + + return () => { + echo.leave("admins-private"); + }; + }, []); useEffect(() => { + async function loadNotifications() { const notifData = await getUserNotifications(); + const data = notifData || []; setNotifications(notifData || []); + const hasUnread = data.some(n => n.pivot && n.pivot.unread === 1); + + setunreadNotification(hasUnread); } loadNotifications(); + const handleClickOutside = (event) => { if ( notificationRef.current && @@ -40,12 +69,25 @@ function Header() { + const toggleNotificationMenu = async () => { + try { + setnotificationMenu(!notificationMenu); + if (unreadNotification) { + const result = await readNotifications(); + if (result) { + setunreadNotification(false); + update(); + } + } + } catch (err) { + console.error('Erreur suppression notification :', err); + } + } + + async function deleteNotification(notificationId) { try { const result = await deleteNotificationUser(notificationId); - - console.log(result); - if (result) { setNotifications(prev => prev.filter(n => n.id !== notificationId)); } @@ -81,10 +123,7 @@ function Header() {
    @@ -124,7 +124,7 @@ function Calendar() {
LunMarMerJeuVenSamDimLunMarMerJeuVenSamDim
handleDayClick(day)} > - {day || ""} + {day}
{selectedDay && ( -
+

Événements du {formatDateLetter(selectedDay.date)}

{selectedDay.events.length > 0 ? ( diff --git a/src/components/homePage/calendar.module.css b/src/components/homePage/calendar.module.css index 534d2c1..ef2f189 100644 --- a/src/components/homePage/calendar.module.css +++ b/src/components/homePage/calendar.module.css @@ -109,13 +109,6 @@ border-radius: 20px; padding: 15px; margin-top: 16px; - border: none; - background: rgb(255, 255, 255, 0.25); - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventBox ul { @@ -137,21 +130,11 @@ .glassCard { width: 45%; - max-height: 450px; + max-height: 100%; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: scroll; - } .glassCard::-webkit-scrollbar{ diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index be7e903..f6e1de4 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -17,12 +17,12 @@ function eventList() { }, [events]); return ( -
+

Liste des événements à venir

{sortedEvents.length > 0 ? (
    {sortedEvents.map((eventGroup) => ( -
  • +
  • {formatDateLetter(eventGroup.date)}
    diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 0b27a64..b0598e2 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -1,20 +1,10 @@ .glassCard { width: 45%; - max-height: 450px; + max-height: 100%; margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); overflow: scroll; - } .glassCard::-webkit-scrollbar{ @@ -53,14 +43,6 @@ h2{ .eventGroup{ margin: 16px 0px 16px 0px; padding: 10px 20px 10px 20px; - border-radius: 20px; - border: none; - background: transparent; - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { diff --git a/src/index.css b/src/index.css index a4fe9a0..be95afd 100644 --- a/src/index.css +++ b/src/index.css @@ -52,33 +52,30 @@ body { } -/*.glassCard { - width: 100%; - height: fit-content; - background: rgba(255, 255, 255, 0.65); - backdrop-filter: blur(3px); - -webkit-backdrop-filter: blur(3px); - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.3); - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.1), - inset 0 1px 0 rgba(255, 255, 255, 0.5), - inset 0 -1px 0 rgba(255, 255, 255, 0.1), - inset 0 0 8px 4px rgba(255, 255, 255, 0.4); - position: relative; - overflow: hidden; -}*/ - - -/* style a montrer a giovanni prcq il est + bo */ .glassCard { - background: rgba(255, 255, 255, 0.2); - backdrop-filter: blur(10px); - border-radius: 20px; - padding: 15px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - border: 1px solid rgba(255, 255, 255, 0.3); + padding: 10px 20px 10px 20px; + background: rgba(255, 255, 255, 0.54); + backdrop-filter: blur(3px); + -webkit-backdrop-filter: blur(3px); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + inset 0 -1px 0 rgba(255, 255, 255, 0.05), + inset 0 0 8px 4px rgba(255, 255, 255, 0.2); } + +.glassBorder{ + border-radius: 20px; + border: none; + background: rgba(255, 255, 255, 0.5); + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); +} + h1 { font-size: 3.2em; line-height: 1.1; diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 64c7721..4d4669a 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/src/pages/eventDetail/eventDetail.jsx @@ -1,47 +1,70 @@ -import { useState } from "react"; +import {useState} from "react"; import styles from "./eventDetail.module.css"; +import { useParams } from "react-router"; -function eventDetail(){ +function eventDetail() { - const [tasks] = useState([ - { text: "Préparer les slides", completed: false }, - { text: "Réserver la salle", completed: false }, - { text: "Envoyer les invitations", completed: false }, - { text: "Tester la configuration technique", completed: false }, - { text: "Organiser le catering", completed: false }, + const params = useParams(); + const id = params.id; + + const [tasks, setTasks] = useState([ + { text: "Préparer les slides", registered: false }, + { text: "Réserver la salle", registered: false }, + { text: "Envoyer les invitations", registered: false }, + { text: "Tester la configuration technique", registered: false }, + { text: "Organiser le catering", registered: false }, ]); const event = { title: "Conférence React 2025", date: "27 Décembre 2025", location: "Paris, France", - description: - "Une conférence dédiée aux développeurs React pour partager les dernières nouveautés et bonnes pratiques.", + description: "azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop" + }; + + const toggleRegister = (index) => { + setTasks((prevTasks) => + prevTasks.map((task, i) => + i === index + ? { ...task, registered: !task.registered } + : task + ) + ); }; return ( -
    -

    {event.title}

    -
    -

    Date: {event.date}

    -

    Lieu: {event.location}

    -

    Description: {event.description}

    -
    +
    +
    +
    + Illustration événement +
    +

    {event.title}

    +

    Date: {event.date}

    +

    Lieu: {event.location}

    +

    Description: {event.description}

    +
    +
    -

    Tâches

    -
      - {tasks.map((task, index) => ( -
    • - {task.text} -
      • - ))} -
    +

    Tâches

    +
      + {tasks.map((task, index) => ( +
    • +
      + {task.text} + +
      +
      • + ))} +
    +
    ); } -export default eventDetail; +export default eventDetail; \ No newline at end of file diff --git a/src/pages/eventDetail/eventDetail.module.css b/src/pages/eventDetail/eventDetail.module.css index 3c314c4..4c81bb5 100644 --- a/src/pages/eventDetail/eventDetail.module.css +++ b/src/pages/eventDetail/eventDetail.module.css @@ -1,23 +1,62 @@ -.container { - max-width: 600px; - margin: 40px auto; - background-color: #fff; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0,0,0,0.1); - padding: 20px; - font-family: Arial, sans-serif; +.allContent{ + margin: 16px 0px 16px 0px; + align-self: center; + width: 90%; } -.title { - font-size: 2rem; - color: #333; - margin-bottom: 10px; + +.textImage { + display: flex; + gap: 24px; +} + +.eventImage { + width: 40%; + aspect-ratio: 16 / 9; + background-color: #e0e0e0; + border-radius: 16px; + flex-shrink: 0; +} + +.eventInfo { + flex: 1; + min-width: 0; + overflow-wrap: break-word; } .eventInfo p { - margin: 5px 0; - font-size: 1rem; - color: #555; + white-space: normal; + overflow-wrap: break-word; +} + +.eventImage { + width: 40%; + height: 100%; + aspect-ratio: 16 / 9; + background-color: #e0e0e0; + border-radius: 16px; + flex-shrink: 0; +} + +.registerButton { + margin-left: auto; + padding: 5px 10px; + border-radius: 12px; + border: none; + cursor: pointer; + background: #019AFF; + color: white; + font-weight: 600; +} + +.registerButton:hover { + opacity: 0.85; +} + +.tasksButton { + display: flex; + align-items: center; + gap: 16px; } .tasks { @@ -26,19 +65,28 @@ } .tasks li { - background-color: #f9f9f9; - margin: 5px 0; - padding: 10px; - border-radius: 5px; - display: flex; - align-items: center; + margin: 16px 0px 16px 0px; + padding: 10px 20px 10px 20px; + border-radius: 20px; + border: none; + background: transparent; + box-shadow: + inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), + inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), + inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), + inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); + opacity: 0; + animation: fadeInUp 0.6s ease-out forwards; + animation-delay: calc(var(--i) * 0.1s); } -.tasks li.completed { - text-decoration: line-through; - opacity: 0.6; -} - -.tasks input[type="checkbox"] { - margin-right: 10px; +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } } diff --git a/src/router.js b/src/router.js index abe0254..9e3d04f 100644 --- a/src/router.js +++ b/src/router.js @@ -62,7 +62,7 @@ const router = createBrowserRouter([ Component: VolunteerProfilePage, }, { - path: "/eventDetail", + path: "/events/:id", Component: eventDetail, }, ] From b0d7d3c0af8d8933f4f262378fac3e7ee02bef3e Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 11 Jan 2026 20:05:20 +0100 Subject: [PATCH 23/30] update notifications css --- src/components/Header/Header.jsx | 14 ++---- src/components/Header/Header.module.css | 12 +---- .../NotificationCard/NotificationCard.jsx | 34 ++++++++++++++ .../NotificationCard.module.css | 46 +++++++++++++++++++ src/utils/date/formatTime.js | 8 ++++ .../listeners/userNotificationsListener.js | 6 +++ 6 files changed, 98 insertions(+), 22 deletions(-) create mode 100644 src/components/NotificationCard/NotificationCard.jsx create mode 100644 src/components/NotificationCard/NotificationCard.module.css create mode 100644 src/utils/date/formatTime.js diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 3402bd2..72d7264 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -11,6 +11,8 @@ import readNotifications from "../../utils/notifications/readNotifications.js"; import getUser from "../../utils/getUser.js"; import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener"; import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js"; +import NotificationCard from "../NotificationCard/NotificationCard.jsx"; + @@ -176,17 +178,7 @@ function Header() { {notifications.length === 0 ? (

    Vous n'avez aucune notification !

    ) : ( - notifications.map((notification, index) => ( -
    -

    {notification.content}

    - -
    - )) + )}
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index e684823..952529d 100644 --- a/src/components/Header/Header.module.css +++ b/src/components/Header/Header.module.css @@ -150,7 +150,7 @@ .notificationDiv { position: absolute; - width: 250px; + width: 300px; top: 105%; right: 2rem; opacity: 0; @@ -186,16 +186,6 @@ border-radius: 50%; } -.closeBtn { - display: flex; - align-items: center; - justify-content: center; - border: none; - cursor: pointer; - background: none; - margin: 0; - width: fit-content; -} .closeBtn:focus { outline: none; diff --git a/src/components/NotificationCard/NotificationCard.jsx b/src/components/NotificationCard/NotificationCard.jsx new file mode 100644 index 0000000..50774b4 --- /dev/null +++ b/src/components/NotificationCard/NotificationCard.jsx @@ -0,0 +1,34 @@ +import formatDate from "../../utils/date/formatDate.js"; +import formatTime from "../../utils/date/formatTime.js"; + +import styles from "./NotificationCard.module.css" + + +function NotificationCard({notifications, deleteNotification}) { + return ( + notifications.map((notification, index) => ( +
+
+ + Le {formatDate(notification.created_at)} à {formatTime(notification.created_at)} + + +
+ +
+

+ {notification.content} +

+
+
+ )) + ); +} + +export default NotificationCard; \ No newline at end of file diff --git a/src/components/NotificationCard/NotificationCard.module.css b/src/components/NotificationCard/NotificationCard.module.css new file mode 100644 index 0000000..db01e1a --- /dev/null +++ b/src/components/NotificationCard/NotificationCard.module.css @@ -0,0 +1,46 @@ +.notificationCard { + padding: 1.25rem; + display: flex; + flex-direction: column; + gap: 0.75rem; + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + transition: background 0.2s ease; +} + +.cardHeader { + display: flex; + justify-content: space-between; + align-items: center; +} + +.timeTag { + font-size: 0.9rem; + font-weight: 500; + color: #019AFF; + letter-spacing: 0.2px; +} + +.message { + margin: 0; + font-size: 1.1rem; + line-height: 1.5; + color: #2c3e50; + font-weight: 400; +} + +.closeIconButton { + background: none; + border: none; + width: 28px; + height: 28px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 1.1rem; + color: #2c3e50; +} + +.closeIconButton:hover { + color: #cc0000; +} \ No newline at end of file diff --git a/src/utils/date/formatTime.js b/src/utils/date/formatTime.js new file mode 100644 index 0000000..6012db2 --- /dev/null +++ b/src/utils/date/formatTime.js @@ -0,0 +1,8 @@ +export default function formatTime(d) { + const date = new Date(d); + + const hh = String(date.getUTCHours()).padStart(2, '0'); + const min = String(date.getUTCMinutes()).padStart(2, '0'); + + return `${hh}:${min}`; +} \ No newline at end of file diff --git a/src/utils/echo/listeners/userNotificationsListener.js b/src/utils/echo/listeners/userNotificationsListener.js index d51bcee..ef538ba 100644 --- a/src/utils/echo/listeners/userNotificationsListener.js +++ b/src/utils/echo/listeners/userNotificationsListener.js @@ -1,3 +1,5 @@ +import formatDateTime from '../../date/formatTime.js'; + export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => { if (!userData?.id) return null; @@ -8,6 +10,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -17,6 +20,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -26,6 +30,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -35,6 +40,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`, + created_at: formatDateTime(Date.now()), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); From 69e7fdb35c84741a05a22c571c3f59ad4da79cf6 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 11 Jan 2026 23:24:15 +0100 Subject: [PATCH 24/30] correct created_at attribute of notifications --- src/utils/echo/listeners/userCreatedListener.js | 1 + src/utils/echo/listeners/userNotificationsListener.js | 10 ++++------ 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/utils/echo/listeners/userCreatedListener.js b/src/utils/echo/listeners/userCreatedListener.js index 3cd8e04..dddab10 100644 --- a/src/utils/echo/listeners/userCreatedListener.js +++ b/src/utils/echo/listeners/userCreatedListener.js @@ -6,6 +6,7 @@ export const userCreatedListener = (echo, userData, setNotifications, setunreadN const newNotification = { id: Date.now(), content: `Nouvelle demande d'inscription : ${event.user.name} ${event.user.lastname}`, + created_at: Date.now(), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); diff --git a/src/utils/echo/listeners/userNotificationsListener.js b/src/utils/echo/listeners/userNotificationsListener.js index ef538ba..6b07beb 100644 --- a/src/utils/echo/listeners/userNotificationsListener.js +++ b/src/utils/echo/listeners/userNotificationsListener.js @@ -1,5 +1,3 @@ -import formatDateTime from '../../date/formatTime.js'; - export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => { if (!userData?.id) return null; @@ -10,7 +8,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, - created_at: formatDateTime(Date.now()), + created_at: Date.now(), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -20,7 +18,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`, - created_at: formatDateTime(Date.now()), + created_at: Date.now(), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -30,7 +28,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`, - created_at: formatDateTime(Date.now()), + created_at: Date.now(), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); @@ -40,7 +38,7 @@ export const userNotificationsListener = (echo, userData, setNotifications, setu const newNotification = { id: Date.now(), content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`, - created_at: formatDateTime(Date.now()), + created_at: Date.now(), pivot: { unread: 1 } }; setNotifications(prev => [newNotification, ...prev]); From 007ba0b758c9472612974a820a698d97df620294 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Sun, 11 Jan 2026 23:26:11 +0100 Subject: [PATCH 25/30] ? --- package-lock.json | 37 ++++++++----------------------------- 1 file changed, 8 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ef73dc..fb4813e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,6 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1641,7 +1640,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -1751,7 +1751,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz", "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1996,7 +1995,6 @@ "integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/mocker": "4.0.13", "@vitest/utils": "4.0.13", @@ -2020,7 +2018,6 @@ "integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/browser": "4.0.13", "@vitest/mocker": "4.0.13", @@ -2195,7 +2192,6 @@ "integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/utils": "4.0.13", "pathe": "^2.0.3" @@ -2249,7 +2245,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2484,7 +2479,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -2568,7 +2562,6 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", "license": "MIT", - "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -2782,17 +2775,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" - }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } + "peer": true }, "node_modules/dom-helpers": { "version": "5.2.1", @@ -2858,7 +2842,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -2922,7 +2905,6 @@ "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3832,6 +3814,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -4226,7 +4209,6 @@ "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "playwright-core": "1.56.1" }, @@ -4308,6 +4290,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -4323,6 +4306,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -4335,7 +4319,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/prompts": { "version": "2.4.2", @@ -4411,7 +4396,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4494,7 +4478,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4668,7 +4651,6 @@ "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -4856,7 +4838,6 @@ "integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^1.6.0", @@ -5360,7 +5341,6 @@ "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5451,7 +5431,6 @@ "integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.13", "@vitest/mocker": "4.0.13", From f2db26150c9e53972221b14523a77bacf509b97e Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Mon, 12 Jan 2026 00:26:55 +0100 Subject: [PATCH 26/30] Fix --- src/components/homePage/calendar.jsx | 2 +- src/components/homePage/eventList.jsx | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/homePage/calendar.jsx b/src/components/homePage/calendar.jsx index d84fb08..9b53629 100644 --- a/src/components/homePage/calendar.jsx +++ b/src/components/homePage/calendar.jsx @@ -102,7 +102,7 @@ function Calendar({ events = [] }) { {selectedDay && (
-

Événements du {formatDateLetter(selectedDay.date)}

+

Événements du {formatDateLetterJS(selectedDay.date)}

{selectedDay.events.length > 0 ? (
    diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index b7c7650..3d9b366 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -19,9 +19,11 @@ function EventList({ events }) {
      {sortedEvents.map((eventGroup) => (
    • -
      - {formatDateLetter(eventGroup.date)} +
      +

      {eventGroup.name}

      +

      {formatDateLetter(eventGroup.start)}

      + {/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
        {eventGroup.tasks.map((task, i) => (
      • From 104307d9e814a00ef6b010c45317345a97afdb31 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Mon, 12 Jan 2026 09:46:01 +0100 Subject: [PATCH 27/30] fix login and register form --- src/components/loginform/loginForm.module.css | 1 + src/pages/Register/RegisterPage.jsx | 2 +- src/pages/Register/RegisterPage.module.css | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/loginform/loginForm.module.css b/src/components/loginform/loginForm.module.css index b726fa7..f2908de 100644 --- a/src/components/loginform/loginForm.module.css +++ b/src/components/loginform/loginForm.module.css @@ -33,6 +33,7 @@ input::placeholder{ .inputContainer { padding: 15px; + width: 100%; } .loginButton { diff --git a/src/pages/Register/RegisterPage.jsx b/src/pages/Register/RegisterPage.jsx index 2046c9a..f0547c3 100644 --- a/src/pages/Register/RegisterPage.jsx +++ b/src/pages/Register/RegisterPage.jsx @@ -117,7 +117,7 @@ function RegisterPage() {
        - +
diff --git a/src/pages/Register/RegisterPage.module.css b/src/pages/Register/RegisterPage.module.css index 7c221bb..1f560be 100644 --- a/src/pages/Register/RegisterPage.module.css +++ b/src/pages/Register/RegisterPage.module.css @@ -40,4 +40,5 @@ h1 { .inputContainer { padding: 15px; + width: 100%; } \ No newline at end of file From af6d0a5649ddae7f3e465fe101d98469c87731d6 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Mon, 12 Jan 2026 09:59:12 +0100 Subject: [PATCH 28/30] change notifications timeTag style --- src/components/NotificationCard/NotificationCard.module.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/NotificationCard/NotificationCard.module.css b/src/components/NotificationCard/NotificationCard.module.css index db01e1a..7fadd31 100644 --- a/src/components/NotificationCard/NotificationCard.module.css +++ b/src/components/NotificationCard/NotificationCard.module.css @@ -14,8 +14,6 @@ } .timeTag { - font-size: 0.9rem; - font-weight: 500; color: #019AFF; letter-spacing: 0.2px; } From 5d76670a4086d5b8bbf53eaaa8049f999e9eafa7 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Mon, 12 Jan 2026 10:15:04 +0100 Subject: [PATCH 29/30] use UI button component on filter and toolbar --- src/components/Filter/Filter.jsx | 21 +++++++++++++-------- src/components/ToolBar/ToolBar.jsx | 9 +++++---- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/Filter/Filter.jsx b/src/components/Filter/Filter.jsx index 3dcf4ae..d323cc9 100644 --- a/src/components/Filter/Filter.jsx +++ b/src/components/Filter/Filter.jsx @@ -1,4 +1,5 @@ import styles from "./Filter.module.css"; +import Button from "../ui/button/button.jsx" function Filter({isFilterVisible, filters, setFilters}){ const setAlphabeticalOrder = (order) => { @@ -18,31 +19,35 @@ function Filter({isFilterVisible, filters, setFilters}){ return (
- + - + - + - +
) diff --git a/src/components/ToolBar/ToolBar.jsx b/src/components/ToolBar/ToolBar.jsx index 67ff494..3c4c298 100644 --- a/src/components/ToolBar/ToolBar.jsx +++ b/src/components/ToolBar/ToolBar.jsx @@ -3,6 +3,7 @@ import Filter from "../Filter/Filter.jsx"; import {useEffect, useState} from "react"; import SearchBar from "../SearchBar/SearchBar.jsx"; import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx"; +import Button from "../ui/button/button.jsx"; function ToolBar({setFilters, filters, showCreate = true}) { @@ -40,14 +41,14 @@ function ToolBar({setFilters, filters, showCreate = true}) { ) : null} - +
- +
From 2b3bd4a864482f8c29fcb06a2fd3cb63defcd830 Mon Sep 17 00:00:00 2001 From: Giovanni-Josserand Date: Mon, 12 Jan 2026 14:04:00 +0100 Subject: [PATCH 30/30] update glassBorder class --- src/components/homePage/calendar.module.css | 8 -------- src/components/homePage/eventList.module.css | 10 +--------- src/index.css | 2 +- src/pages/Profile/ProfilePage.jsx | 4 ++-- src/pages/Profile/ProfilePage.module.css | 2 -- 5 files changed, 4 insertions(+), 22 deletions(-) diff --git a/src/components/homePage/calendar.module.css b/src/components/homePage/calendar.module.css index 9bbfda8..95b2b74 100644 --- a/src/components/homePage/calendar.module.css +++ b/src/components/homePage/calendar.module.css @@ -106,16 +106,8 @@ .eventBox { width: 100%; - border-radius: 20px; padding: 15px; margin-top: 16px; - border: none; - background: rgb(255, 255, 255, 0.25); - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventBox ul { diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index 6bb0b67..fb9c1f3 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -50,16 +50,8 @@ h2{ } .eventGroup{ - margin: 16px 0px 16px 0px; + margin: 16px 0 16px 0; padding: 10px 20px 10px 20px; - border-radius: 20px; - border: none; - background: transparent; - box-shadow: - inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), - inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), - inset -0.25px 0.25px 1px rgba(0, 0, 0, 0.2), - inset 0.25px -0.25px 1px rgba(0, 0, 0, 0.2); } .eventTitle { diff --git a/src/index.css b/src/index.css index be95afd..c18fc90 100644 --- a/src/index.css +++ b/src/index.css @@ -68,7 +68,7 @@ body { .glassBorder{ border-radius: 20px; border: none; - background: rgba(255, 255, 255, 0.5); + background: rgb(255, 255, 255, 0.25); box-shadow: inset 1.25px 1.25px 1px rgba(255, 255, 255, 1), inset -1.25px -1.25px 1px rgba(255, 255, 255, 1), diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx index a47e87c..9f61466 100644 --- a/src/pages/Profile/ProfilePage.jsx +++ b/src/pages/Profile/ProfilePage.jsx @@ -24,11 +24,11 @@ function ProfilePage() {

{user.name} {user.lastname}

-
+

Role : {user.role}

Membre depuis : {formatDate(user.created_at)}

-
+

Mail : {user.email}

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

diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css index 9b20a37..2ebba4b 100644 --- a/src/pages/Profile/ProfilePage.module.css +++ b/src/pages/Profile/ProfilePage.module.css @@ -47,9 +47,7 @@ .infoBlock { width: 100%; - background: rgba(255, 255, 255, 0.1); padding: 10px; - border-radius: 5px; } .eventTasks {