implement incomplet events

src/components/IncompleteEvent/IncompleteEvent.jsx

@@ -1,35 +1,87 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./IncompleteEvent.module.css";
+import getAllEvents from "../../utils/event/getAllEvents";
 
 function IncompleteEvent() {
-  const incompleteEvents = [
-  { title: "Événement A", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement B", tasks: ["Réservation de la salle", "Vérification du matériel"] },
-  { title: "Événement C", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-  { title: "Événement D", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm"] },
-  { title: "Événement E", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement F", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-  { title: "Événement G", tasks: ["Communication sur les réseaux", "Enormément de comm", "Toujours + de comm,Communication sur les réseaux",
-     "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm","Communication sur les réseaux", "Enormément de comm", "Toujours + de comm]"] },
-];
+  const [events, setEvents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      try {
+        const data = await getAllEvents();
+        if (data) {
+          setEvents(data);
+        } else {
+          setError("Aucun événement trouvé.");
+        }
+      } catch (err) {
+        setError("Erreur lors de la récupération des événements.");
+        console.error(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchEvents();
+  }, []);
+
+  if (loading) {
+    return (
+      <div className={`${styles.rightBlock} glassCard`}>
+        <h2>Derniers événements</h2>
+        <div className={styles.eventsContainer}>
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>Chargement des événements...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`${styles.rightBlock} glassCard`}>
+        <h2>Derniers événements</h2>
+        <div className={styles.eventsContainer}>
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className={`${styles.rightBlock} glassCard`}>
-      <h2>Événements incomplets</h2>
+      <h2>Derniers événements</h2>
       <div className={styles.eventsContainer}>
-        {incompleteEvents.map((event, index) => (
-          <div key={index} className={`glassCard ${styles.eventCard}`}>
-            <h3>{event.title}</h3>
-            <ul className={styles.tasksList}>
-            {event.tasks.map((task, taskIndex) => (
-              <li key={taskIndex}>{task}</li>
-            ))}
-          </ul>
+        {events.length > 0 ? (
+          events.map((event, index) => (
+            <div key={event.id} className={`glassCard ${styles.eventCard}`}>
+              <h3>{event.name}</h3>
+              <p className={styles.eventDate}>
+                {new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
+              </p>
+              <p className={styles.eventDescription}>{event.description}</p>
+              <h4>Tâches associées :</h4>
+              <ul className={styles.tasksList}>
+                {event.tasks && event.tasks.length > 0 ? (
+                  event.tasks.map((task, taskIndex) => (
+                    <li key={taskIndex}>{task.name}</li>
+                  ))
+                ) : (
+                  <li>Aucune tâche associée.</li>
+                )}
+              </ul>
+            </div>
+          ))
+        ) : (
+          <div className={`${styles.emptyEvent} glassCard`}>
+            <p>Aucun événement disponible.</p>
           </div>
-        ))}
+        )}
       </div>
     </div>
   );