Convert TS

src/pages/EventDetail/components/DeleteTaskBtn/DeleteTaskBtn.jsx

@@ -1,28 +0,0 @@
-import { useContext } from "react";
-import { AuthContext } from "../../../../contexts/Auth/AuthContext.js";
-import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
-import Button from "../../../../components/ui/Button/Button";
-import { useState } from "react";
-import Modal from "../../../../components/ui/Modal/Modal";
-import styles from "../../EventDetailPage.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); setOpenModal(false) }}> Confirmer </Button>
-            </div>
-        </Modal>
-    </>
-}

src/pages/EventDetail/components/DeleteTaskBtn/DeleteTaskBtn.tsx

@@ -0,0 +1,48 @@
+import { useContext, useState } from "react";
+import { AuthContext } from "../../../../contexts/Auth/AuthContext";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import styles from "../../EventDetailPage.module.css";
+
+type DeleteTaskBtnProps = {
+    taskId: string | number;
+    eventId: string | number;
+    taskName: string;
+};
+
+export default function DeleteTaskBtn({ taskId, eventId, taskName }: DeleteTaskBtnProps) {
+
+    const { user } = useContext(AuthContext) as any;
+    const { deleteTask } = useContext(EventDetailContext) as any;
+
+    const [openModal, setOpenModal] = useState<boolean>(false);
+
+    if (!user?.isAdmin) return null;
+
+    return (
+        <>
+            <Button variant={"danger"} onClick={() => setOpenModal(true)}>
+                Supprimer
+            </Button>
+
+            <Modal open={openModal} onClose={() => setOpenModal(false)} 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);
+                            setOpenModal(false);
+                        }}
+                    >
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}