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) => {
-        console.log(eventId);
-        await assign(eventId);
+    const [assigned, setAssigned] = useState(false);
+    const [open, setOpen] = useState(false);
+    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;