Convert TS

src/pages/EventDetail/components/DeleteEventBtn/DeleteEventBtn.jsx

@@ -1,42 +0,0 @@
-import styles from "../../EventDetailPage.module.css";
-import Button from "../../../../components/ui/Button/Button";
-import Modal from "../../../../components/ui/Modal/Modal";
-import { useContext, useState } from "react";
-import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext.js";
-import { EventContext } from "../../../../contexts/Events/EventContext.js";
-import { useNavigate } from "react-router";
-
-export default function DeleteEventBtn({ id }) {
-
-    const { eventInfo } = useContext(EventDetailContext)
-    const { removeEvent } = useContext(EventContext)
-    const [open, setOpen] = useState(false);
-    const navigate = useNavigate();
-
-    const handleDelete = () => {
-        setOpen(true);
-    }
-
-    const delEvent = async () => {
-        const result = await removeEvent(id);
-
-        if (result.status === 200 || result.status === 204) {
-            setOpen(false);
-            navigate("/events");
-        }
-    }
-
-    return <>
-
-        <Button variant={"danger"} className={styles.manageBtn} onClick={handleDelete}>Supprimer</Button>
-
-        <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
-            <div className={styles.modalContent}>
-                <p>Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?</p>
-
-                <Button variant={"default"} onClick={delEvent}>Confirmer</Button>
-            </div>
-        </Modal>
-
-    </>
-}

src/pages/EventDetail/components/DeleteEventBtn/DeleteEventBtn.tsx

@@ -0,0 +1,56 @@
+import styles from "../../EventDetailPage.module.css";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import { useContext, useState } from "react";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
+import { EventContext } from "../../../../contexts/Events/EventContext";
+import { useNavigate } from "react-router";
+
+type DeleteEventBtnProps = {
+    id: string | number;
+};
+
+export default function DeleteEventBtn({ id }: DeleteEventBtnProps) {
+    const { eventInfo } = useContext(EventDetailContext) as any;
+    const { removeEvent } = useContext(EventContext) as any;
+
+    const [open, setOpen] = useState(false);
+    const navigate = useNavigate();
+
+    const handleDelete = () => {
+        setOpen(true);
+    };
+
+    const delEvent = async () => {
+        const result = await removeEvent(id);
+
+        if (result.status === 200 || result.status === 204) {
+            setOpen(false);
+            navigate("/events");
+        }
+    };
+
+    return (
+        <>
+            <Button
+                variant={"danger"}
+                className={styles.manageBtn}
+                onClick={handleDelete}
+            >
+                Supprimer
+            </Button>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={"Suppression"}>
+                <div className={styles.modalContent}>
+                    <p>
+                        Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?
+                    </p>
+
+                    <Button variant={"default"} onClick={delEvent}>
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}