93 lines
3.5 KiB
TypeScript
Executable File
93 lines
3.5 KiB
TypeScript
Executable File
import {useEffect, useContext, useRef} from "react";
|
|
import styles from "./EventDetailPage.module.css";
|
|
import { useParams } from "react-router";
|
|
import { formatDateLetter } from "../../utils/date/formatDateLetter";
|
|
import EventTask from "./components/EventTask/EventTask";
|
|
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";
|
|
import uploadEventPhoto from "../../utils/events/uploadEventPhoto";
|
|
|
|
function EventDetailPage() {
|
|
const params = useParams();
|
|
const id = params.id as string;
|
|
|
|
const { user } = useContext(AuthContext) as any;
|
|
const { tasks, updateEventInfo, eventInfo } = useContext(EventDetailContext) as any;
|
|
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
|
const imageUrl = eventInfo?.event_photo_path
|
|
? `${import.meta.env.VITE_API_URL}/storage/${eventInfo.event_photo_path}`
|
|
: "/empty.png";
|
|
|
|
console.log(eventInfo);
|
|
useEffect(() => {
|
|
if (id) {
|
|
updateEventInfo(id);
|
|
}
|
|
}, []);
|
|
const handleImageClick = () => {
|
|
if (user?.isAdmin && fileInputRef.current) {
|
|
fileInputRef.current?.click();
|
|
}
|
|
};
|
|
|
|
const handleFileChange = async (e: any) => {
|
|
const file = e.target.files[0];
|
|
if (!file) return;
|
|
|
|
await uploadEventPhoto(Number(id), file);
|
|
updateEventInfo(id);
|
|
};
|
|
return (
|
|
<div className={styles.allContent}>
|
|
<div className={`glassCard`}>
|
|
<div className={styles.textImage}>
|
|
<img
|
|
src={imageUrl}
|
|
alt="Photo événement"
|
|
className={styles.eventImage}
|
|
onClick={handleImageClick}
|
|
style={{ cursor: user?.isAdmin ? "pointer" : "default" }}
|
|
/>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
style={{ display: "none" }}
|
|
onChange={handleFileChange}
|
|
/>
|
|
|
|
<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}>
|
|
<EditEventBtn id={id} />
|
|
<DeleteEventBtn id={id} />
|
|
<CreateTaskBtn id={id} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Tâches</h2>
|
|
|
|
<div className={styles.tasks}>
|
|
{tasks?.map((task: any, index: number) => (
|
|
<EventTask key={task.id} taskId={task.id} index={index} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EventDetailPage; |