Convert TS

src/pages/EventDetail/components/EventTask/EventTask.tsx

@@ -0,0 +1,119 @@
+import styles from "./EventTask.module.css";
+import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
+import Button from "../../../../components/ui/Button/Button";
+import assign from "../../../../utils/tasks/assign";
+import unAssign from "../../../../utils/tasks/unAssign";
+import { useContext, useEffect, useState } from "react";
+import isAssigned from "../../../../utils/tasks/isAssigned";
+import Modal from "../../../../components/ui/Modal/Modal";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext";
+import DeleteTaskBtn from "../DeleteTaskBtn/DeleteTaskBtn";
+
+type EventTaskProps = {
+    task: any;
+    index: number;
+    eventId: string | number;
+};
+
+export default function EventTask({ task, index, eventId }: EventTaskProps) {
+
+    const { update } = useContext(AuthContext) as any;
+
+    const [assigned, setAssigned] = useState<boolean>(false);
+    const [open, setOpen] = useState<boolean>(false);
+    const [title, setTitle] = useState<string>("");
+    const [message, setMessage] = useState<string>("");
+
+    async function checkAssign() {
+        const data = await isAssigned(task.id);
+        setAssigned(data?.data.assigned);
+    }
+
+    useEffect(() => {
+        checkAssign();
+    }, []);
+
+    const handleRegisterBtn = async () => {
+        const res = await assign(task.id);
+
+        switch (res.status) {
+            case 200:
+                update();
+                setTitle("Inscription réussie");
+                setMessage(`Vous êtes maintenant inscrit à la tâche ${task.name}`);
+                setOpen(true);
+                setAssigned(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;
+        }
+    };
+
+    const handleUnassign = async () => {
+        const res = await unAssign(task.id);
+
+        switch (res.status) {
+            case 200:
+                update();
+                setTitle("Désinscription réussie");
+                setMessage(`Vous n'êtes plus inscrit à la tâche ${task.name}`);
+                setOpen(true);
+                setAssigned(false);
+                break;
+
+            case 409:
+                setTitle("Erreur lors de la désinscription");
+                setMessage(`Vous n'êtes pas inscrit à cette tâche`);
+                setOpen(true);
+                break;
+        }
+    };
+
+    return (
+        <div style={{ "--i": index } as any} key={index} className={styles.content}>
+            <div className={styles.task}>
+                <div>
+          <span>
+            <strong>{task.name}</strong>
+          </span>
+                    <p className={styles.taskDate}>
+                        {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
+                    </p>
+                    <p>{task.description}</p>
+                </div>
+
+                <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(false)} title={title}>
+                <p className={styles.modalContent}>{message}</p>
+            </Modal>
+        </div>
+    );
+}