Use eventDetail context

src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx

@@ -1,9 +1,10 @@
 import styles from "../../eventDetail.module.css";
 import Button from "../../../../components/ui/button/button.jsx";
-import { useState } from "react";
+import {useContext, useState} from "react";
 import TextInput from "../../../../components/ui/input/input.jsx";
 import Modal from "../../../../components/ui/modal/modal.jsx";
 import createTaskApi from "../../../../utils/tasks/createTask.js";
+import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js";
 
 export default function CreateTaskBtn({ id }) {
 
@@ -16,6 +17,8 @@ export default function CreateTaskBtn({ id }) {
     const [startTime, setStartTime] = useState("");
     const [endTime, setEndTime] = useState("");
 
+    const { updateEventInfo } = useContext(EventDetailContext)
+
     const createTask = async () => {
         const success = await createTaskApi({
             eventId: id,
@@ -35,6 +38,8 @@ export default function CreateTaskBtn({ id }) {
             setMaxParticipants("");
             setStartTime("");
             setEndTime("");
+
+            updateEventInfo(id)
         } else {
             console.log("⚠️ Échec de la création de la task");
         }

src/pages/eventDetail/eventDetail.jsx

@@ -1,14 +1,14 @@
-import { useState, useEffect, useContext } from "react";
+import {useState, useEffect, useContext} from "react";
 import styles from "./eventDetail.module.css";
-import { useParams } from "react-router";
+import {useParams} from "react-router";
-import getEventById from "../../utils/events/getEventById.js";
+import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
-import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
 import EventTask from "./components/EventTask/EventTask.jsx";
 import Button from "../../components/ui/button/button.jsx";
 import Modal from "../../components/ui/modal/modal.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 import { EventContext } from "../../contexts/events/EventContext.js";
-import { useNavigate } from "react-router";
+import { EventDetailContext } from "../../contexts/eventDetail/eventDetail.js";
+import {useNavigate} from "react-router";
 import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";
 
 
@@ -18,17 +18,13 @@ function EventDetail() {
     const id = params.id;
     const { user } = useContext(AuthContext)
     const { removeEvent } = useContext(EventContext)
+    const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext)
     const navigate = useNavigate();
 
     const [open, setOpen] = useState(false);
-    const [event, setEvent] = useState(null);
-
 
     useEffect(() => {
-        (async () => {
+        updateEventInfo(id);
-            const e = await getEventById(id);
-            setEvent(e);
-        }) ()
     }, [])
 
     const handleDelete = () => {
@@ -46,43 +42,44 @@ function EventDetail() {
 
 
     return (
-        <div className={styles.allContent}>
+            <div className={styles.allContent}>
-            <div className={`glassCard`}>
+                <div className={`glassCard`}>
-                <div className={styles.textImage}>
+                    <div className={styles.textImage}>
-                    <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
+                        <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
-                    <div className={styles.eventInfo}>
+                        <div className={styles.eventInfo}>
-                        <h2>{event?.name}</h2>
+                            <h2>{eventInfo?.name}</h2>
-                        <div className={styles.eventContent}>
+                            <div className={styles.eventContent}>
-                            <div>
+                                <div>
-                                <p>{event && formatDateLetter(event.start)}</p>
+                                    <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
-                                <p>{event?.description}</p>
+                                    <p>{eventInfo?.description}</p>
+                                </div>
+                                {user?.isAdmin && <div className={styles.manageEvent}>
+                                    <Button variant={"danger"} className={styles.manageBtn}
+                                            onClick={handleDelete}>Supprimer</Button>
+                                    <CreateTaskBtn id={id}/>
+                                </div>}
                             </div>
-                            {user?.isAdmin && <div className={styles.manageEvent}>
-                                <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
-                                <CreateTaskBtn id={id} />
-                            </div>}
                         </div>
                     </div>
+
+                    <h2>Tâches</h2>
+                    <div className={styles.tasks}>
+                        {tasks?.map((task, index) => (
+                            <EventTask task={task} key={index}/>
+                        ))}
+                    </div>
                 </div>
 
-                <h2>Tâches</h2>
+                <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
-                <div className={styles.tasks}>
+                    <div className={styles.modalContent}>
-                    {event?.tasks?.map((task, index) => (
+                        <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
-                        <EventTask task={task} key={index} />
+
-                    ))}
+                        <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
-                </div>
+                    </div>
+                </Modal>
+
+
             </div>
-
-            <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
-                <div className={styles.modalContent}>
-                    <p>Etes-vous sur de vouloir supprimer l'événement {event?.name} ?</p>
-
-                    <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
-                </div>
-            </Modal>
-
-
-        </div>
     );
 }