Display data

src/pages/eventDetail/eventDetail.jsx

@@ -1,37 +1,24 @@
-import {useState} from "react";
+import { useState, useEffect } from "react";
 import styles from "./eventDetail.module.css";
 import { useParams } from "react-router";
+import getEventById from "../../utils/event/getEventById.js";
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import Button from "../../components/ui/button/button.jsx";
 
 
-function eventDetail() {
+function EventDetail() {
 
     const params = useParams();
     const id = params.id;
 
-    const [tasks, setTasks] = useState([
-        { text: "Préparer les slides", registered: false },
-        { text: "Réserver la salle", registered: false },
-        { text: "Envoyer les invitations", registered: false },
-        { text: "Tester la configuration technique", registered: false },
-        { text: "Organiser le catering", registered: false },
-    ]);
+    const [event, setEvent] = useState(null);
 
-    const event = {
-        title: "Conférence React 2025",
-        date: "27 Décembre 2025",
-        location: "Paris, France",
-        description: "azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop azertyuiop"
-    };
-
-    const toggleRegister = (index) => {
-        setTasks((prevTasks) =>
-            prevTasks.map((task, i) =>
-                i === index
-                    ? { ...task, registered: !task.registered }
-                    : task
-            )
-        );
-    };
+    useEffect(() => {
+        (async () => {
+            const e = await getEventById(id);
+            setEvent(e);
+        }) ()
+    }, [])
 
     return (
         <div className={styles.allContent}>
@@ -39,25 +26,24 @@ function eventDetail() {
                 <div className={styles.textImage}>
                     <img src="/public/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
                     <div className={styles.eventInfo}>
-                        <h2>{event.title}</h2>
-                        <p>Date: {event.date}</p>
-                        <p>Lieu: {event.location}</p>
-                        <p>Description: {event.description}</p>
+                        <h2>{event?.name}</h2>
+                        <p>{event && formatDateLetter(event.start)}</p>
+                        <p>{event?.description}</p>
                     </div>
                 </div>
 
                 <h2>Tâches</h2>
                 <ul className={styles.tasks}>
-                    {tasks.map((task, index) => (
+                    {event?.tasks?.map((task, index) => (
                         <li style={{"--i": index}} key={index}>
-                            <div className={styles.tasksButton}>
-                                <span><strong>{task.text}</strong></span>
-                                <button
-                                    className={styles.registerButton}
-                                    onClick={() => toggleRegister(index)}
-                                >
-                                    {task.registered ? "Se désinscrire" : "S’inscrire"}
-                                </button>
+                            <div className={styles.task}>
+                                <div>
+                                    <span><strong>{task.name}</strong></span>
+                                    <p className={styles.taskDate}> {event && formatDateLetter(task.start)} - {event && formatDateLetter(task.end)} </p>
+                                    <p>{task.description}</p>
+                                </div>
+
+                                <Button> {task.registered ? "Se désinscrire" : "S’inscrire"} </Button>
                             </div>
                         </li>
                     ))}
@@ -67,4 +53,4 @@ function eventDetail() {
     );
 }
 
-export default eventDetail;
+export default EventDetail;

src/pages/eventDetail/eventDetail.module.css

@@ -38,24 +38,14 @@
     flex-shrink: 0;
 }
 
-.registerButton {
-    margin-left: auto;
-    padding: 5px 10px;
-    border-radius: 12px;
-    border: none;
-    cursor: pointer;
-    background: #019AFF;
-    color: white;
-    font-weight: 600;
-}
-
 .registerButton:hover {
     opacity: 0.85;
 }
 
-.tasksButton {
+.task {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     gap: 16px;
 }
 
@@ -64,6 +54,10 @@
     padding: 0;
 }
 
+.taskDate {
+    opacity: 0.5;
+}
+
 .tasks li {
     margin: 16px 0px 16px 0px;
     padding: 10px 20px 10px 20px;