Show task is assigned to user + fix assign user

src/components/eventTask/EventTask.jsx

@@ -2,14 +2,51 @@ import styles from "./eventTask.module.css";
 import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
 import Button from "../ui/button/button.jsx";
 import assign from "../../utils/tasks/assign.js";
+import { useEffect, useState } from "react";
+import isAssigned from "../../utils/tasks/isAssigned.js";
+import Modal from "../ui/modal/modal.jsx";
 
 export default function EventTask({ task, index }) {
 
-    const handleRegisterBtn = async (eventId) => {
+    const [assigned, setAssigned] = useState(false);
-        console.log(eventId);
+    const [open, setOpen] = useState(false);
-        await assign(eventId);
+    const [title, setTitle] = useState("");
+    const [message, setMessage] = useState("");
+
+    async function checkAssign() {
+        const data = await isAssigned(task.id);
+        setAssigned(data?.assigned);
     }
 
+    useEffect(() => {
+        checkAssign();
+    }, [])
+
+    const handleRegisterBtn = async () => {
+        const res = await assign(task.id);
+        checkAssign();
+
+        switch (res.status) {
+            case 200:
+                setTitle("Inscription réussie")
+                setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
+                setOpen(true);
+                break;
+
+            case 409:
+                setTitle("Erreur lors de l'inscription")
+                setMessage("Vous êtes déjà inscrit à cette tâche")
+                setOpen(true);
+                break;
+
+            case 403:
+                setTitle("Erreur lors de l'inscription")
+                setMessage("Le nombre maximum d'inscription pour cette tâche à été atteint")
+                setOpen(true);
+                break;
+        }
+    };
+
     return <div style={{"--i": index}} key={index} className={styles.content}>
         <div className={styles.task}>
             <div>
@@ -17,7 +54,15 @@ export default function EventTask({ task, index }) {
                 <p className={styles.taskDate}> {formatDateLetter(task.start)} - {formatDateLetter(task.end)} </p>
                 <p>{task.description}</p>
             </div>
-            <Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
+            {assigned ?
+                <Button variant={"danger"} onClick={() => handleRegisterBtn(task.id)}> Se désinscrire </Button>
+            :
+                <Button onClick={() => handleRegisterBtn(task.id)}> S’inscrire </Button>
+            }
         </div>
+
+        <Modal open={open} onClose={setOpen} title={title}>
+            <p className={styles.modalContent}>{message}</p>
+        </Modal>
     </div>
 }

src/components/eventTask/eventTask.module.css

@@ -25,6 +25,10 @@
     animation-delay: calc(var(--i) * 0.1s);
 }
 
+.modalContent {
+    text-align: center;
+}
+
 @keyframes fadeInUp {
     from {
         opacity: 0;

src/pages/eventDetail/eventDetail.jsx

@@ -3,8 +3,6 @@ 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";
-import assign from "../../utils/tasks/assign.js";
 import EventTask from "../../components/eventTask/EventTask.jsx";
 
 
@@ -22,11 +20,6 @@ function EventDetail() {
         }) ()
     }, [])
 
-    const handleRegisterBtn = async (eventId) => {
-        console.log(eventId);
-        await assign(eventId);
-    }
-
     return (
         <div className={styles.allContent}>
             <div className={`glassCard`}>

src/utils/tasks/assign.js

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

src/utils/tasks/isAssigned.js

@@ -0,0 +1,24 @@
+export default async function isAssigned(taskId) {
+    try {
+        const res = await fetch(
+            `http://${import.meta.env.VITE_API_URL}/api/events/tasks/${taskId}/assigned`,
+            {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Accept': 'application/json',
+                },
+            }
+        );
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        return await res.json();
+
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}