Merge branch 'refac/taskContext' into 'dev'

Refac/taskcontext

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!72

src/contexts/eventDetail/eventDetail.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const EventDetailContext = createContext(null);

src/contexts/eventDetail/eventDetailProvider.jsx

@@ -0,0 +1,21 @@
+import {useState} from 'react';
+import { EventDetailContext } from "./eventDetail.js"
+import getEventById from "../../utils/events/getEventById.js";
+
+export function EventDetailProvider({ children }) {
+
+    const [tasks, setTasks] = useState([]);
+    const [eventInfo, setEventInfo] = useState([]);
+
+    const updateEventInfo = async (id) => {
+        const e = await getEventById(id);
+        setEventInfo(e);
+        setTasks(e.tasks)
+    }
+
+    return (
+        <EventDetailContext.Provider value={{ tasks, eventInfo, updateEventInfo }}>
+            {children}
+        </EventDetailContext.Provider>
+    );
+}

src/main.jsx

@@ -1,18 +1,21 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
+import {StrictMode} from 'react'
+import {createRoot} from 'react-dom/client'
 import './index.css'
-import { RouterProvider } from "react-router";
+import {RouterProvider} from "react-router";
 import router from './router';
-import { AuthProvider } from "./contexts/auth/authProvider.jsx";
+import {AuthProvider} from "./contexts/auth/authProvider.jsx";
 import {EventProvider} from "./contexts/events/EventProvider.jsx";
+import {EventDetailProvider} from "./contexts/eventDetail/eventDetailProvider.jsx";
 
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
+    <StrictMode>
         <AuthProvider>
             <EventProvider>
-                <RouterProvider router={router} />
+                <EventDetailProvider>
+                    <RouterProvider router={router}/>
+                </EventDetailProvider>
             </EventProvider>
         </AuthProvider>
-  </StrictMode>,
+    </StrictMode>,
 )

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

@@ -0,0 +1,116 @@
+import styles from "../../eventDetail.module.css";
+import Button from "../../../../components/ui/button/button.jsx";
+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 }) {
+
+    const [openTaskModal, setOpenTaskModal] = useState(false);
+
+    const [taskName, setTaskName] = useState("");
+    const [taskDescription, setTaskDescription] = useState("");
+    const [taskLocation, setTaskLocation] = useState("");
+    const [maxParticipants, setMaxParticipants] = useState("");
+    const [startTime, setStartTime] = useState("");
+    const [endTime, setEndTime] = useState("");
+
+    const { updateEventInfo } = useContext(EventDetailContext)
+
+    const createTask = async () => {
+        const success = await createTaskApi({
+            eventId: id,
+            name: taskName,
+            description: taskDescription,
+            start: startTime,
+            end: endTime,
+            location: taskLocation,
+            maxParticipants,
+        });
+
+        if (success) {
+            setOpenTaskModal(false);
+            setTaskName("");
+            setTaskDescription("");
+            setTaskLocation("");
+            setMaxParticipants("");
+            setStartTime("");
+            setEndTime("");
+
+            updateEventInfo(id)
+        } else {
+            console.log("⚠️ Échec de la création de la task");
+        }
+    };
+
+    return <>
+
+        <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
+
+        <Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
+            <div className={styles.modalContent}>
+
+                <div>
+                    <p>Nom de la tâche</p>
+                    <TextInput
+                        value={taskName}
+                        onChange={(e) => setTaskName(e.target.value)}
+                        placeholder="Nom de la tâche"
+                    />
+                </div>
+
+                <div>
+                    <p>Description</p>
+                    <TextInput
+                        value={taskDescription}
+                        onChange={(e) => setTaskDescription(e.target.value)}
+                        placeholder="Description de la tâche"
+                    />
+                </div>
+
+                <div>
+                    <p>Lieu</p>
+                    <TextInput
+                        value={taskLocation}
+                        onChange={(e) => setTaskLocation(e.target.value)}
+                        placeholder="Lieu"
+                    />
+                </div>
+
+                <div>
+                    <p>Nombre maximum de participants</p>
+                    <TextInput
+                        type="number"
+                        value={maxParticipants}
+                        onChange={(e) => setMaxParticipants(e.target.value)}
+                        placeholder="Participants max"
+                    />
+                </div>
+
+                <div>
+                    <p>Heure de début</p>
+                    <TextInput
+                        type="datetime-local"
+                        value={startTime}
+                        onChange={(e) => setStartTime(e.target.value)}
+                    />
+                </div>
+
+                <div>
+                    <p>Heure de fin</p>
+                    <TextInput
+                        type="datetime-local"
+                        value={endTime}
+                        onChange={(e) => setEndTime(e.target.value)}
+                    />
+                </div>
+
+                <Button variant="default" onClick={createTask}> Créer la tâche </Button>
+
+            </div>
+        </Modal>
+
+    </>
+}

src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx

@@ -0,0 +1,42 @@
+import styles from "../../eventDetail.module.css";
+import Button from "../../../../components/ui/button/button.jsx";
+import Modal from "../../../../components/ui/modal/modal.jsx";
+import { useContext, useState } from "react";
+import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
+import { EventContext } from "../../../../contexts/events/EventContext.js";
+import { useNavigate } from "react-router";
+
+export default function DeleteEventBtn({ id }) {
+
+    const { eventInfo } = useContext(EventDetailContext)
+    const { removeEvent } = useContext(EventContext)
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const handleDelete = () => {
+        setOpen(true);
+    }
+
+    const delEvent = async () => {
+        const result = await removeEvent(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/events");
+        }
+    }
+
+    return <>
+
+        <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
+            <div className={styles.modalContent}>
+                <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
+
+                <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
+            </div>
+        </Modal>
+
+    </>
+}

src/pages/eventDetail/eventDetail.jsx

@@ -1,82 +1,25 @@
-import { useState, useEffect, useContext } from "react";
+import {useEffect, useContext} from "react";
 import styles from "./eventDetail.module.css";
-import { useParams } from "react-router";
-import getEventById from "../../utils/events/getEventById.js";
-import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import {useParams} from "react-router";
+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 TextInput from "../../components/ui/input/input.jsx";
-import createTaskApi from "../../utils/tasks/createTask.js";
+import {AuthContext} from "../../contexts/auth/AuthContext.js";
+import {EventDetailContext} from "../../contexts/eventDetail/eventDetail.js";
+import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";
+import DeleteEventBtn from "./components/deleteEventBtn/deleteEventBtn.jsx";
 
 
 function EventDetail() {
 
     const params = useParams();
     const id = params.id;
-    const { user } = useContext(AuthContext)
-    const { removeEvent } = useContext(EventContext)
-    const navigate = useNavigate();
-
-    const [open, setOpen] = useState(false);
-    const [event, setEvent] = useState(null);
-
-    const [openTaskModal, setOpenTaskModal] = useState(false);
-    const [taskName, setTaskName] = useState("");
-    const [taskDescription, setTaskDescription] = useState("");
-    const [taskLocation, setTaskLocation] = useState("");
-    const [maxParticipants, setMaxParticipants] = useState("");
-    const [startTime, setStartTime] = useState("");
-    const [endTime, setEndTime] = useState("");
-
+    const {user} = useContext(AuthContext)
+    const {tasks, updateEventInfo, eventInfo} = useContext(EventDetailContext)
 
     useEffect(() => {
-        (async () => {
-            const e = await getEventById(id);
-            setEvent(e);
-        }) ()
+        updateEventInfo(id);
     }, [])
 
-    const handleDelete = () => {
-        setOpen(true);
-    }
-
-    const delEvent = async () => {
-        const result = await removeEvent(id);
-
-        if (result.status === 200 || result.status === 204) {
-            setOpen(false);
-            navigate("/events");
-        }
-    }
-
-    const createTask = async () => {
-        const success = await createTaskApi({
-            eventId: id,
-            name: taskName,
-            description: taskDescription,
-            start: startTime,
-            end: endTime,
-            location: taskLocation,
-            maxParticipants,
-        });
-
-        if (success) {
-            setOpenTaskModal(false);
-            setTaskName("");
-            setTaskDescription("");
-            setTaskLocation("");
-            setMaxParticipants("");
-            setStartTime("");
-            setEndTime("");
-        } else {
-            console.log("⚠️ Échec de la création de la task");
-        }
-    };
-
 
     return (
         <div className={styles.allContent}>
@@ -84,15 +27,15 @@ function EventDetail() {
                 <div className={styles.textImage}>
                     <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
                     <div className={styles.eventInfo}>
-                        <h2>{event?.name}</h2>
+                        <h2>{eventInfo?.name}</h2>
                         <div className={styles.eventContent}>
                             <div>
-                                <p>{event && formatDateLetter(event.start)}</p>
-                                <p>{event?.description}</p>
+                                <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
+                                <p>{eventInfo?.description}</p>
                             </div>
                             {user?.isAdmin && <div className={styles.manageEvent}>
-                                <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
-                                <Button variant={"default"} className={styles.manageBtn} onClick={() => setOpenTaskModal(true)}>Créer tâche</Button>
+                                <DeleteEventBtn id={id}/>
+                                <CreateTaskBtn id={id}/>
                             </div>}
                         </div>
                     </div>
@@ -100,83 +43,11 @@ function EventDetail() {
 
                 <h2>Tâches</h2>
                 <div className={styles.tasks}>
-                    {event?.tasks?.map((task, index) => (
-                        <EventTask task={task} key={index} />
+                    {tasks?.map((task, index) => (
+                        <EventTask task={task} key={index}/>
                     ))}
                 </div>
             </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>
-
-            <Modal open={openTaskModal} onClose={() => setOpenTaskModal(false)} title={"Créer tâche"}>
-                <div className={styles.modalContent}>
-
-                    <div>
-                        <p>Nom de la tâche</p>
-                        <TextInput
-                            value={taskName}
-                            onChange={(e) => setTaskName(e.target.value)}
-                            placeholder="Nom de la tâche"
-                        />
-                    </div>
-
-                    <div>
-                        <p>Description</p>
-                        <TextInput
-                            value={taskDescription}
-                            onChange={(e) => setTaskDescription(e.target.value)}
-                            placeholder="Description de la tâche"
-                        />
-                    </div>
-
-                    <div>
-                        <p>Lieu</p>
-                        <TextInput
-                            value={taskLocation}
-                            onChange={(e) => setTaskLocation(e.target.value)}
-                            placeholder="Lieu"
-                        />
-                    </div>
-
-                    <div>
-                        <p>Nombre maximum de participants</p>
-                        <TextInput
-                            type="number"
-                            value={maxParticipants}
-                            onChange={(e) => setMaxParticipants(e.target.value)}
-                            placeholder="Participants max"
-                        />
-                    </div>
-
-                    <div>
-                        <p>Heure de début</p>
-                        <TextInput
-                            type="datetime-local"
-                            value={startTime}
-                            onChange={(e) => setStartTime(e.target.value)}
-                        />
-                    </div>
-
-                    <div>
-                        <p>Heure de fin</p>
-                        <TextInput
-                            type="datetime-local"
-                            value={endTime}
-                            onChange={(e) => setEndTime(e.target.value)}
-                        />
-                    </div>
-
-                    <Button variant="default" onClick={createTask}> Créer la tâche </Button>
-
-                </div>
-            </Modal>
-
         </div>
     );
 }