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 1/5] 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 ? ( ) : ( @@ -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 2/5] 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 3/5] 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 4/5] 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 5/5] 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
LunMarMerJeuVenSamDimLunMarMerJeuVenSamDim
handleDayClick(day)} > - {day || ""} + {day}