Create update event component

src/pages/EventDetail/EventDetailPage.tsx

@@ -7,6 +7,7 @@ import { AuthContext } from "../../contexts/Auth/AuthContext";
 import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContext";
 import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn";
 import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn";
+import EditEventBtn from "./components/EditEventBtn/EditEventBtn";
 
 function EventDetailPage() {
     const params = useParams();
@@ -42,6 +43,7 @@ function EventDetailPage() {
 
                             {user?.isAdmin && (
                                 <div className={styles.manageEvent}>
+                                    <EditEventBtn id={id} />
                                     <DeleteEventBtn id={id} />
                                     <CreateTaskBtn id={id} />
                                 </div>

src/pages/EventDetail/components/EditEventBtn/EditEventBtn.tsx

@@ -0,0 +1,92 @@
+import styles from "../../EventDetailPage.module.css";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import TextInput from "../../../../components/ui/Input/Input";
+import { useContext, useState, useEffect } from "react";
+import { EventDetailContext } from "../../../../contexts/EventDetail/EventDetailContext";
+import updateEvent from "../../../../utils/events/updateEvent";
+
+type EditEventBtnProps = {
+    id: string | number;
+};
+
+export default function EditEventBtn({ id }: EditEventBtnProps) {
+    const { eventInfo, updateEventInfo } = useContext(EventDetailContext) as any;
+
+    const [open, setOpen] = useState(false);
+    const [name, setName] = useState<string>("");
+    const [description, setDescription] = useState<string>("");
+    const [start, setStart] = useState<string>("");
+    const [end, setEnd] = useState<string>("");
+
+    useEffect(() => {
+        if (open && eventInfo) {
+            setName(eventInfo.name ?? "");
+            setDescription(eventInfo.description ?? "");
+            setStart(eventInfo.start ? eventInfo.start.slice(0, 16) : "");
+            setEnd(eventInfo.end ? eventInfo.end.slice(0, 16) : "");
+        }
+    }, [open, eventInfo]);
+
+    const handleSubmit = async () => {
+        const res = await updateEvent(Number(id), name, description, start, end);
+        await updateEventInfo(id);
+        setOpen(false);
+    };
+
+    return (
+        <>
+            <Button
+                variant={"default"}
+                className={styles.manageBtn}
+                onClick={() => setOpen(true)}
+            >
+                Modifier
+            </Button>
+
+            <Modal open={open} onClose={() => setOpen(false)} title={"Modifier l'événement"}>
+                <div className={styles.modalContent}>
+                    <div>
+                        <p>Nom</p>
+                        <TextInput
+                            value={name}
+                            onChange={(e: any) => setName(e.target.value)}
+                            placeholder="Nom de l'événement"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Description</p>
+                        <TextInput
+                            value={description}
+                            onChange={(e: any) => setDescription(e.target.value)}
+                            placeholder="Description"
+                        />
+                    </div>
+
+                    <div>
+                        <p>Début</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={start}
+                            onChange={(e: any) => setStart(e.target.value)}
+                        />
+                    </div>
+
+                    <div>
+                        <p>Fin</p>
+                        <TextInput
+                            type="datetime-local"
+                            value={end}
+                            onChange={(e: any) => setEnd(e.target.value)}
+                        />
+                    </div>
+
+                    <Button variant="default" onClick={handleSubmit}>
+                        Confirmer
+                    </Button>
+                </div>
+            </Modal>
+        </>
+    );
+}