Merge branch 'features/linkHomePage' into 'dev'

Features/linkhomepage

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!55

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";
+import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js";
+
+function Calendar({ events = [] }) {
 
-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"],
-    };
     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 [selectedDay, setSelectedDay] = useState(null);
-        const year = today.getFullYear();
+
-        const month = String(today.getMonth() + 1).padStart(2, "0");
+    const eventsByDate = useMemo(() => {
-        const day = String(today.getDate()).padStart(2, "0");
+        return events.reduce((acc, ev) => {
-        const key = `${year}-${month}-${day}`;
+            if (!ev?.start) return acc;
-        return {date: key, events: events[key] || []};
+
-    });
+            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 = () => {
+    const selectDay = (year, month, day) => {
-        let newMonth = currentMonth - 1;
+        const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-        let newYear = currentYear;
+        setSelectedDay({
-
+            date: key,
-        if (newMonth < 0) {
+            events: eventsByDate[key] || []
-            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 handleDayClick = (day) => {
         if (!day) return;
-        const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+        selectDay(currentYear, currentMonth, day);
-        setSelectedDay({date: key, events: events[key] || []});
     };
 
     return (
         <div className={styles.glassCard}>
             <div className={styles.calendarContainer}>
+
                 <div className={styles.calendarHeader}>
-                    <button onClick={handlePrevMonth}>◀</button>
+                    <button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
                     <p>{monthNames[currentMonth]} {currentYear}</p>
-                    <button onClick={handleNextMonth}>▶</button>
+                    <button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
                 </div>
 
                 <table className={styles.calendar}>
                     <thead>
                     <tr>
-                        <th>Lun</th>
+                        <th>Lun</th><th>Mar</th><th>Mer</th>
-                        <th>Mar</th>
+                        <th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
-                        <th>Mer</th>
-                        <th>Jeu</th>
-                        <th>Ven</th>
-                        <th>Sam</th>
-                        <th>Dim</th>
                     </tr>
                     </thead>
-
                     <tbody>
-                    {Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
+                    {Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
-                        <tr key={weekIndex}>
+                        <tr key={w}>
-                            {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
+                            {days.slice(w * 7, w * 7 + 7).map((day, i) => {
+                                if (!day) return <td key={i}></td>;
+
                                 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 (
                                     <td
-                                        key={index}
+                                        key={i}
                                         className={[
-                                            day === today.getDate() &&
-                                            currentMonth === today.getMonth() &&
-                                            currentYear === today.getFullYear()
-                                                ? styles.today : "",
                                             hasEvent ? styles.hasEvent : "",
                                             selectedDay?.date === key ? styles.selected : ""
                                         ].join(" ")}
                                         onClick={() => handleDayClick(day)}
                                     >
-                                        {day || ""}
+                                        {day}
                                     </td>
                                 );
                             })}
@@ -125,12 +102,15 @@ function Calendar() {
 
                 {selectedDay && (
                     <div className={styles.eventBox}>
-                        <h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
+                        <h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
 
                         {selectedDay.events.length > 0 ? (
                             <ul>
-                                {selectedDay.events.map((ev, i) => (
+                                {selectedDay.events.map(ev => (
-                                    <li key={i}>{ev}</li>
+                                    <li key={ev.id}>
+                                        <strong>{ev.name}</strong><br />
+                                        {ev.description}
+                                    </li>
                                 ))}
                             </ul>
                         ) : (

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 { formatDateLetter } from "../../utils/date/formatDateLetter.js";
-import getAllEvents from "../../utils/event/getAllEvents.js";
 
 
-function EventList() {
+function EventList({ events }) {
-
-    const [events, setEvents] = useState([]);
-
-    useEffect(() => {
-        (async () => {
-            const data = await getAllEvents();
-            setEvents(data.data);
-            console.log(data.data);
-        }) ()
-    }, [])
 
     const sortedEvents = useMemo(() => {
         return [...events].sort(

src/pages/Home/HomePage.jsx

@@ -1,13 +1,24 @@
 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 (
         <div className={styles.allContent}>
-            <Calendar />
+            <Calendar events={events} />
-
+            <EventList events={events} />
-            <EventList />
         </div>
     );
 }

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}`;
+}