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;