Create deleteEvent component

src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx

@@ -0,0 +1,42 @@
+import styles from "../../eventDetail.module.css";
+import Button from "../../../../components/ui/button/button.jsx";
+import Modal from "../../../../components/ui/modal/modal.jsx";
+import { useContext, useState } from "react";
+import { EventDetailContext } from "../../../../contexts/eventDetail/eventDetail.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/eventDetail.jsx

@@ -1,85 +1,54 @@
-import {useState, useEffect, useContext} from "react";
+import {useEffect, useContext} from "react";
 import styles from "./eventDetail.module.css";
 import {useParams} from "react-router";
 import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
 import EventTask from "./components/EventTask/EventTask.jsx";
-import Button from "../../components/ui/button/button.jsx";
-import Modal from "../../components/ui/modal/modal.jsx";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import { EventContext } from "../../contexts/events/EventContext.js";
-import { EventDetailContext } from "../../contexts/eventDetail/eventDetail.js";
-import {useNavigate} from "react-router";
+import {AuthContext} from "../../contexts/auth/AuthContext.js";
+import {EventDetailContext} from "../../contexts/eventDetail/eventDetail.js";
 import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx";
+import DeleteEventBtn from "./components/deleteEventBtn/deleteEventBtn.jsx";
 
 
 function EventDetail() {
 
     const params = useParams();
     const id = params.id;
-    const { user } = useContext(AuthContext)
-    const { removeEvent } = useContext(EventContext)
-    const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext)
-    const navigate = useNavigate();
-
-    const [open, setOpen] = useState(false);
+    const {user} = useContext(AuthContext)
+    const {tasks, updateEventInfo, eventInfo} = useContext(EventDetailContext)
 
     useEffect(() => {
         updateEventInfo(id);
     }, [])
 
-    const handleDelete = () => {
-        setOpen(true);
-    }
-
-    const delEvent = async () => {
-        const result = await removeEvent(id);
-
-        if (result.status === 200 || result.status === 204) {
-            setOpen(false);
-            navigate("/events");
-        }
-    }
-
 
     return (
-            <div className={styles.allContent}>
-                <div className={`glassCard`}>
-                    <div className={styles.textImage}>
-                        <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
-                        <div className={styles.eventInfo}>
-                            <h2>{eventInfo?.name}</h2>
-                            <div className={styles.eventContent}>
-                                <div>
-                                    <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
-                                    <p>{eventInfo?.description}</p>
-                                </div>
-                                {user?.isAdmin && <div className={styles.manageEvent}>
-                                    <Button variant={"danger"} className={styles.manageBtn}
-                                            onClick={handleDelete}>Supprimer</Button>
-                                    <CreateTaskBtn id={id}/>
-                                </div>}
+        <div className={styles.allContent}>
+            <div className={`glassCard`}>
+                <div className={styles.textImage}>
+                    <img src="/icons/theme/dark.svg" alt="Illustration événement" className={styles.eventImage}/>
+                    <div className={styles.eventInfo}>
+                        <h2>{eventInfo?.name}</h2>
+                        <div className={styles.eventContent}>
+                            <div>
+                                <p>{eventInfo && formatDateLetter(eventInfo.start)}</p>
+                                <p>{eventInfo?.description}</p>
                             </div>
+                            {user?.isAdmin && <div className={styles.manageEvent}>
+                                <DeleteEventBtn id={id}/>
+                                <CreateTaskBtn id={id}/>
+                            </div>}
                         </div>
                     </div>
-
-                    <h2>Tâches</h2>
-                    <div className={styles.tasks}>
-                        {tasks?.map((task, index) => (
-                            <EventTask task={task} key={index}/>
-                        ))}
-                    </div>
                 </div>
 
-                <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>
-
-
+                <h2>Tâches</h2>
+                <div className={styles.tasks}>
+                    {tasks?.map((task, index) => (
+                        <EventTask task={task} key={index}/>
+                    ))}
+                </div>
             </div>
+        </div>
     );
 }