55 lines
2.1 KiB
React
55 lines
2.1 KiB
React
import {useEffect, useContext} from "react";
|
|
import styles from "./EventDetailPage.module.css";
|
|
import {useParams} from "react-router";
|
|
import {formatDateLetter} from "../../utils/date/formatDateLetter.js";
|
|
import EventTask from "./components/EventTask/EventTask.jsx";
|
|
import {AuthContext} from "../../contexts/Auth/AuthContext.js";
|
|
import {EventDetailContext} from "../../contexts/EventDetail/EventDetailContext.js";
|
|
import CreateTaskBtn from "./components/CreateTaskBtn/CreateTaskBtn.jsx";
|
|
import DeleteEventBtn from "./components/DeleteEventBtn/DeleteEventBtn.jsx";
|
|
|
|
|
|
function EventDetailPage() {
|
|
|
|
const params = useParams();
|
|
const id = params.id;
|
|
const {user} = useContext(AuthContext)
|
|
const {tasks, updateEventInfo, eventInfo} = useContext(EventDetailContext)
|
|
|
|
useEffect(() => {
|
|
updateEventInfo(id);
|
|
}, [])
|
|
|
|
|
|
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}>
|
|
<DeleteEventBtn id={id}/>
|
|
<CreateTaskBtn id={id}/>
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Tâches</h2>
|
|
<div className={styles.tasks}>
|
|
{tasks?.map((task, index) => (
|
|
<EventTask task={task} key={index} eventId={id} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EventDetailPage; |