DeleteTask feature

src/contexts/eventDetail/eventDetailProvider.jsx

@@ -1,20 +1,27 @@
 import {useState} from 'react';
 import { EventDetailContext } from "./eventDetail.js"
 import getEventById from "../../utils/events/getEventById.js";
+import deleteTaskFunction from "../../utils/tasks/deleteTask.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)
     }
 
+    const deleteTask = async (id, eventId) => {
+        await deleteTaskFunction(id);
+        await updateEventInfo(eventId);
+    }
+
     return (
-        <EventDetailContext.Provider value={{ tasks, eventInfo, updateEventInfo }}>
+        <EventDetailContext.Provider value={{ tasks, eventInfo, updateEventInfo, deleteTask }}>
             {children}
         </EventDetailContext.Provider>
     );

src/pages/eventDetail/components/EventTask/EventTask.jsx

@@ -3,11 +3,15 @@ import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
 import Button from "../../../../components/ui/button/button.jsx";
 import assign from "../../../../utils/tasks/assign.js";
 import unAssign from "../../../../utils/tasks/unAssign.js";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import isAssigned from "../../../../utils/tasks/isAssigned.js";
 import Modal from "../../../../components/ui/modal/modal.jsx";
+import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
+import DeleteTaskBtn from "../deleteTaskBtn/deleteTaskBtn.jsx";
 
-export default function EventTask({ task, index }) {
+export default function EventTask({ task, index, eventId }) {
+
+    const { user } = useContext(AuthContext)
 
     const [assigned, setAssigned] = useState(false);
     const [open, setOpen] = useState(false);
@@ -23,6 +27,7 @@ export default function EventTask({ task, index }) {
         checkAssign();
     }, [])
 
+
     const handleRegisterBtn = async () => {
         const res = await assign(task.id);
 
@@ -74,11 +79,14 @@ export default function EventTask({ task, index }) {
                 <p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
                 <p>{task.description}</p>
             </div>
-            {assigned ?
-                <Button variant={"danger"} onClick={() => handleUnassign()}> Se désinscrire </Button>
-            :
-                <Button onClick={() => handleRegisterBtn()}> S’inscrire </Button>
-            }
+            <div className={styles.manageTaskBtn}>
+                {assigned ?
+                    <Button variant={"danger"} onClick={() => handleUnassign()}> Se désinscrire </Button>
+                    :
+                    <Button onClick={() => handleRegisterBtn()}> S’inscrire </Button>
+                }
+                <DeleteTaskBtn eventId={eventId} taskId={task.id} taskName={task.name} />
+            </div>
         </div>
 
         <Modal open={open} onClose={setOpen} title={title}>

src/pages/eventDetail/components/EventTask/eventTask.module.css

@@ -9,6 +9,12 @@
     opacity: 0.5;
 }
 
+.manageTaskBtn {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
 .content {
     margin: 16px 0px 16px 0px;
     padding: 10px 20px 10px 20px;

src/pages/eventDetail/components/deleteTaskBtn/deleteTaskBtn.jsx

@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
+import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.js";
+import Button from "../../../../components/ui/button/button.jsx";
+import { useState } from "react";
+import Modal from "../../../../components/ui/modal/modal.jsx";
+import styles from "../../eventDetail.module.css";
+
+export default function DeleteTaskBtn({ taskId, eventId, taskName }) {
+
+    const { user } = useContext(AuthContext)
+    const { deleteTask } = useContext(EventDetailContext)
+
+    const [openModal, setOpenModal] = useState(false);
+
+    if(!user?.isAdmin) return null;
+
+    return <>
+        <Button variant={"danger"} onClick={() => setOpenModal(true)}> Supprimer </Button>
+
+        <Modal open={openModal} onClose={setOpenModal} title={"Suppression"}>
+            <div className={styles.modalContent}>
+                <p className={styles.modalContent}>Etes-vous sur de vouloir supprimer la tâche {taskName} ? </p>
+                <Button variant={"danger"} onClick={() => deleteTask(taskId, eventId)}> Confirmer </Button>
+            </div>
+        </Modal>
+    </>
+}

src/pages/eventDetail/eventDetail.jsx

@@ -44,7 +44,7 @@ function EventDetail() {
                 <h2>Tâches</h2>
                 <div className={styles.tasks}>
                     {tasks?.map((task, index) => (
-                        <EventTask task={task} key={index}/>
+                        <EventTask task={task} key={index} eventId={id} />
                     ))}
                 </div>
             </div>

src/utils/tasks/deleteTask.js

@@ -0,0 +1,37 @@
+import getXSRFToken from "../getXSRF.js";
+
+export default async function deleteTask(taskId) {
+    const csrfToken = await getXSRFToken();
+
+    try {
+        const res = await fetch(
+            `${import.meta.env.VITE_API_URL}/api/events/tasks/${taskId}`,
+            {
+                method: 'DELETE',
+                credentials: 'include',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'X-XSRF-TOKEN': csrfToken,
+                },
+                body: JSON.stringify({
+                    task_id: taskId
+                }),
+            }
+        );
+
+        const data = await res.json();
+
+        return {
+            status: res.status,
+            message: data?.message ?? null,
+        };
+
+    } catch (err) {
+        console.error("❌ Erreur réseau :", err);
+        return {
+            status: 0,
+            message: "Network error",
+        };
+    }
+}