Link hompeage eventlist to backend

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 (
         <div className={styles.glassCard}>
                 <h2>Liste des événements à venir</h2>
                 {sortedEvents.length > 0 ? (
                     <ul className={styles.eventList}>
-                        {sortedEvents.map((eventGroup) => (
-                            <li key={eventGroup.date} className={styles.eventGroup}>
-                                <div className={styles.eventDate}>
-                                    <strong>{formatDateLetter(eventGroup.date)}</strong>
+                        {sortedEvents.map((eventGroup, index) => (
+
+                            <li key={index} className={styles.eventGroup}>
+                                <div className={styles.eventTitle}>
+                                    <p className={styles.title}>{eventGroup.name}</p>
+                                    <p>{formatDateLetter(eventGroup.start)} - {formatDateLetter(eventGroup.end)}</p>
                                 </div>
                                 <ul className={styles.eventDetails}>
-                                    {eventGroup.events.map((event, i) => (
-                                        <li key={i}>- {event}</li>
+                                    {eventGroup.tasks.map((task, i) => (
+                                        <li key={i} className={styles.eventTasks}>
+                                            <p>- {task.name} - {task.description}</p>
+                                            <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                                        </li>
                                     ))}
                                 </ul>
                             </li>
+
                         ))}
                     </ul>
                 ) : (
@@ -42,4 +55,4 @@ function eventList() {
     );
 }
 
-export default eventList;
+export default EventList;

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%;

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