From 6c51e7081741567d9e80dc44a08caa3a954a4109 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 27 Jan 2026 14:39:00 +0100 Subject: [PATCH 1/4] Create createTaskBtn.jsx component --- .../createTaskBtn/createTaskBtn.jsx | 111 ++++++++++++++++++ .../createTaskBtn/createTaskBtn.module.css | 0 src/pages/eventDetail/eventDetail.jsx | 99 +--------------- 3 files changed, 113 insertions(+), 97 deletions(-) create mode 100644 src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx create mode 100644 src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css diff --git a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx new file mode 100644 index 0000000..1995f34 --- /dev/null +++ b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx @@ -0,0 +1,111 @@ +import styles from "../../eventDetail.module.css"; +import Button from "../../../../components/ui/button/button.jsx"; +import { useState } from "react"; +import TextInput from "../../../../components/ui/input/input.jsx"; +import Modal from "../../../../components/ui/modal/modal.jsx"; +import createTaskApi from "../../../../utils/tasks/createTask.js"; + +export default function CreateTaskBtn({ id }) { + + const [openTaskModal, setOpenTaskModal] = useState(false); + + const [taskName, setTaskName] = useState(""); + const [taskDescription, setTaskDescription] = useState(""); + const [taskLocation, setTaskLocation] = useState(""); + const [maxParticipants, setMaxParticipants] = useState(""); + const [startTime, setStartTime] = useState(""); + const [endTime, setEndTime] = useState(""); + + const createTask = async () => { + const success = await createTaskApi({ + eventId: id, + name: taskName, + description: taskDescription, + start: startTime, + end: endTime, + location: taskLocation, + maxParticipants, + }); + + if (success) { + setOpenTaskModal(false); + setTaskName(""); + setTaskDescription(""); + setTaskLocation(""); + setMaxParticipants(""); + setStartTime(""); + setEndTime(""); + } else { + console.log("⚠️ Échec de la création de la task"); + } + }; + + return <> + + + + setOpenTaskModal(false)} title={"Créer tâche"}> +
+ +
+

Nom de la tâche

+ setTaskName(e.target.value)} + placeholder="Nom de la tâche" + /> +
+ +
+

Description

+ setTaskDescription(e.target.value)} + placeholder="Description de la tâche" + /> +
+ +
+

Lieu

+ setTaskLocation(e.target.value)} + placeholder="Lieu" + /> +
+ +
+

Nombre maximum de participants

+ setMaxParticipants(e.target.value)} + placeholder="Participants max" + /> +
+ +
+

Heure de début

+ setStartTime(e.target.value)} + /> +
+ +
+

Heure de fin

+ setEndTime(e.target.value)} + /> +
+ + + +
+ + + +} \ No newline at end of file diff --git a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 18dd310..6484c9e 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/src/pages/eventDetail/eventDetail.jsx @@ -9,8 +9,7 @@ import Modal from "../../components/ui/modal/modal.jsx"; import { AuthContext } from "../../contexts/auth/AuthContext.js"; import { EventContext } from "../../contexts/events/EventContext.js"; import { useNavigate } from "react-router"; -import TextInput from "../../components/ui/input/input.jsx"; -import createTaskApi from "../../utils/tasks/createTask.js"; +import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx"; function EventDetail() { @@ -24,14 +23,6 @@ function EventDetail() { const [open, setOpen] = useState(false); const [event, setEvent] = useState(null); - const [openTaskModal, setOpenTaskModal] = useState(false); - const [taskName, setTaskName] = useState(""); - const [taskDescription, setTaskDescription] = useState(""); - const [taskLocation, setTaskLocation] = useState(""); - const [maxParticipants, setMaxParticipants] = useState(""); - const [startTime, setStartTime] = useState(""); - const [endTime, setEndTime] = useState(""); - useEffect(() => { (async () => { @@ -53,30 +44,6 @@ function EventDetail() { } } - const createTask = async () => { - const success = await createTaskApi({ - eventId: id, - name: taskName, - description: taskDescription, - start: startTime, - end: endTime, - location: taskLocation, - maxParticipants, - }); - - if (success) { - setOpenTaskModal(false); - setTaskName(""); - setTaskDescription(""); - setTaskLocation(""); - setMaxParticipants(""); - setStartTime(""); - setEndTime(""); - } else { - console.log("⚠️ Échec de la création de la task"); - } - }; - return (
@@ -92,7 +59,7 @@ function EventDetail() {
{user?.isAdmin &&
- +
} @@ -114,68 +81,6 @@ function EventDetail() { - setOpenTaskModal(false)} title={"Créer tâche"}> -
- -
-

Nom de la tâche

- setTaskName(e.target.value)} - placeholder="Nom de la tâche" - /> -
- -
-

Description

- setTaskDescription(e.target.value)} - placeholder="Description de la tâche" - /> -
- -
-

Lieu

- setTaskLocation(e.target.value)} - placeholder="Lieu" - /> -
- -
-

Nombre maximum de participants

- setMaxParticipants(e.target.value)} - placeholder="Participants max" - /> -
- -
-

Heure de début

- setStartTime(e.target.value)} - /> -
- -
-

Heure de fin

- setEndTime(e.target.value)} - /> -
- - - -
- ); From 93f9001eb5d205fa50aed20f96a340547bf31899 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 27 Jan 2026 16:09:59 +0100 Subject: [PATCH 2/4] Create eventDetail context --- src/contexts/eventDetail/eventDetail.js | 3 +++ .../eventDetail/eventDetailProvider.jsx | 21 +++++++++++++++++++ src/main.jsx | 17 ++++++++------- 3 files changed, 34 insertions(+), 7 deletions(-) create mode 100644 src/contexts/eventDetail/eventDetail.js create mode 100644 src/contexts/eventDetail/eventDetailProvider.jsx diff --git a/src/contexts/eventDetail/eventDetail.js b/src/contexts/eventDetail/eventDetail.js new file mode 100644 index 0000000..e59c12b --- /dev/null +++ b/src/contexts/eventDetail/eventDetail.js @@ -0,0 +1,3 @@ +import { createContext } from "react"; + +export const EventDetailContext = createContext(null); \ No newline at end of file diff --git a/src/contexts/eventDetail/eventDetailProvider.jsx b/src/contexts/eventDetail/eventDetailProvider.jsx new file mode 100644 index 0000000..92117d3 --- /dev/null +++ b/src/contexts/eventDetail/eventDetailProvider.jsx @@ -0,0 +1,21 @@ +import {useState} from 'react'; +import { EventDetailContext } from "./eventDetail.js" +import getEventById from "../../utils/events/getEventById.js"; + +export function EventDetailProvider({ children }) { + + const [tasks, setTasks] = useState([]); + const [eventInfo, setEventInfo] = useState([]); + + const updateEventInfo = async (id) => { + const e = await getEventById(id); + setEventInfo(e); + setTasks(e.tasks) + } + + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index 2653f1c..bd63d05 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -1,18 +1,21 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' +import {StrictMode} from 'react' +import {createRoot} from 'react-dom/client' import './index.css' -import { RouterProvider } from "react-router"; +import {RouterProvider} from "react-router"; import router from './router'; -import { AuthProvider } from "./contexts/auth/authProvider.jsx"; +import {AuthProvider} from "./contexts/auth/authProvider.jsx"; import {EventProvider} from "./contexts/events/EventProvider.jsx"; +import {EventDetailProvider} from "./contexts/eventDetail/eventDetailProvider.jsx"; createRoot(document.getElementById('root')).render( - + - + + + - , + , ) From 41a68836c4d7909121f14af9165f38dab97eb8d4 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 27 Jan 2026 16:10:21 +0100 Subject: [PATCH 3/4] Use eventDetail context --- .../createTaskBtn/createTaskBtn.jsx | 7 +- src/pages/eventDetail/eventDetail.jsx | 81 +++++++++---------- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx index 1995f34..fb6fac5 100644 --- a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx +++ b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.jsx @@ -1,9 +1,10 @@ import styles from "../../eventDetail.module.css"; import Button from "../../../../components/ui/button/button.jsx"; -import { useState } from "react"; +import {useContext, useState} from "react"; import TextInput from "../../../../components/ui/input/input.jsx"; import Modal from "../../../../components/ui/modal/modal.jsx"; import createTaskApi from "../../../../utils/tasks/createTask.js"; +import {EventDetailContext} from "../../../../contexts/eventDetail/eventDetail.js"; export default function CreateTaskBtn({ id }) { @@ -16,6 +17,8 @@ export default function CreateTaskBtn({ id }) { const [startTime, setStartTime] = useState(""); const [endTime, setEndTime] = useState(""); + const { updateEventInfo } = useContext(EventDetailContext) + const createTask = async () => { const success = await createTaskApi({ eventId: id, @@ -35,6 +38,8 @@ export default function CreateTaskBtn({ id }) { setMaxParticipants(""); setStartTime(""); setEndTime(""); + + updateEventInfo(id) } else { console.log("⚠️ Échec de la création de la task"); } diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 6484c9e..534ddf8 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/src/pages/eventDetail/eventDetail.jsx @@ -1,14 +1,14 @@ -import { useState, useEffect, useContext } from "react"; +import {useState, useEffect, useContext} from "react"; import styles from "./eventDetail.module.css"; -import { useParams } from "react-router"; -import getEventById from "../../utils/events/getEventById.js"; -import { formatDateLetter } from "../../utils/date/formatDateLetter.js"; +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 { useNavigate } from "react-router"; +import { EventDetailContext } from "../../contexts/eventDetail/eventDetail.js"; +import {useNavigate} from "react-router"; import CreateTaskBtn from "./components/createTaskBtn/createTaskBtn.jsx"; @@ -18,17 +18,13 @@ function EventDetail() { 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 [event, setEvent] = useState(null); - useEffect(() => { - (async () => { - const e = await getEventById(id); - setEvent(e); - }) () + updateEventInfo(id); }, []) const handleDelete = () => { @@ -46,43 +42,44 @@ function EventDetail() { return ( -
-
-
- Illustration événement -
-

{event?.name}

-
-
-

{event && formatDateLetter(event.start)}

-

{event?.description}

+
+
+
+ Illustration événement +
+

{eventInfo?.name}

+
+
+

{eventInfo && formatDateLetter(eventInfo.start)}

+

{eventInfo?.description}

+
+ {user?.isAdmin &&
+ + +
}
- {user?.isAdmin &&
- - -
}
+ +

Tâches

+
+ {tasks?.map((task, index) => ( + + ))} +
-

Tâches

-
- {event?.tasks?.map((task, index) => ( - - ))} -
+ setOpen(false)} title={"Suppression"}> +
+

Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?

+ + +
+ + +
- - setOpen(false)} title={"Suppression"}> -
-

Etes-vous sur de vouloir supprimer l'événement {event?.name} ?

- - -
- - - -
); } From 4163b803344c3e0ff34faef604f94a7ae8377f7a Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 27 Jan 2026 16:16:18 +0100 Subject: [PATCH 4/4] Create deleteEvent component --- .../createTaskBtn/createTaskBtn.module.css | 0 .../deleteEventBtn/deleteEventBtn.jsx | 42 +++++++++ src/pages/eventDetail/eventDetail.jsx | 85 ++++++------------- 3 files changed, 69 insertions(+), 58 deletions(-) delete mode 100644 src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css create mode 100644 src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx diff --git a/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css b/src/pages/eventDetail/components/createTaskBtn/createTaskBtn.module.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx b/src/pages/eventDetail/components/deleteEventBtn/deleteEventBtn.jsx new file mode 100644 index 0000000..813a995 --- /dev/null +++ b/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 <> + + + + setOpen(false)} title={"Suppression"}> +
+

Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?

+ + +
+ + + +} \ No newline at end of file diff --git a/src/pages/eventDetail/eventDetail.jsx b/src/pages/eventDetail/eventDetail.jsx index 534ddf8..69e1b59 100644 --- a/src/pages/eventDetail/eventDetail.jsx +++ b/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 ( -
-
-
- Illustration événement -
-

{eventInfo?.name}

-
-
-

{eventInfo && formatDateLetter(eventInfo.start)}

-

{eventInfo?.description}

-
- {user?.isAdmin &&
- - -
} +
+
+
+ Illustration événement +
+

{eventInfo?.name}

+
+
+

{eventInfo && formatDateLetter(eventInfo.start)}

+

{eventInfo?.description}

+ {user?.isAdmin &&
+ + +
}
- -

Tâches

-
- {tasks?.map((task, index) => ( - - ))} -
- setOpen(false)} title={"Suppression"}> -
-

Etes-vous sur de vouloir supprimer l'événement {eventInfo?.name} ?

- - -
- - - +

Tâches

+
+ {tasks?.map((task, index) => ( + + ))} +
+
); }