Merge branch 'features/eventPhoto' into dev

src/pages/EventDetail/EventDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useContext } from "react";
+import {useEffect, useContext, useRef} from "react";
 import styles from "./EventDetailPage.module.css";
 import { useParams } from "react-router";
 import { formatDateLetter } from "../../utils/date/formatDateLetter";
@@ -8,6 +8,7 @@ import { EventDetailContext } from "../../contexts/EventDetail/EventDetailContex
 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();
@@ -15,21 +16,46 @@ function EventDetailPage() {
 
     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="/icons/theme/dark.svg"
+                        src={imageUrl}
-                        alt="Illustration événement"
+                        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}>

src/pages/Events/components/Event/Event.jsx

@@ -8,16 +8,20 @@ function Event({event}){
 
     const handleNavigate = () => navigate(`/events/` + event.id);
 
+    const imageUrl = event.event_photo_path
+        ? `${import.meta.env.VITE_API_URL}/storage/${event.event_photo_path}`
+        : "/empty.png";
+    console.log(imageUrl);
     return (
         <div className={`${styles.eventContainer} glassCard`} onClick={handleNavigate}>
             <div className={styles.eventContainerTop}>
                 <div className={styles.eventContent}>
-                    <div className={`${styles.eventImageDiv}`}>
+                    <div className={styles.eventImageDiv}>
-                        {event.image == null ? (
+                        <img
-                            <img src="/empty.png" className={styles.eventImage} alt="Pas de photo de l'événement" />
+                            src={imageUrl}
-                        ) : (
+                            className={styles.eventImage}
-                            <img src={event.image + `.png`} alt="Photo de l'événement" />
+                            alt="Photo de l'événement"
-                        )}
+                        />
                     </div>
                     <div className={styles.eventInfos}>
                         <p className={styles.eventTitle}>{event.name}</p>

src/utils/events/uploadEventPhoto.ts

@@ -0,0 +1,41 @@
+import getXSRFToken from "../getXSRF";
+
+export default async function uploadEventPhoto(
+    eventId: number,
+    file: File
+): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
+
+    const formData = new FormData();
+    formData.append("photo", file);
+    try {
+        const csrfToken = await getXSRFToken();
+
+        const response = await fetch(
+            `${import.meta.env.VITE_API_URL}/api/events/${eventId}/photo/update`,
+            {
+                method: "POST",
+                headers: {
+                    "X-XSRF-TOKEN": decodeURIComponent(csrfToken),
+                },
+                credentials: "include",
+                body: formData,
+            }
+        );
+
+        const status = response.status;
+        let data = null;
+
+        try {
+            data = await response.json();
+        } catch (e) {}
+
+        return { status, ok: response.ok, data };
+
+    } catch (err: any) {
+        return {
+            status: 0,
+            ok: false,
+            error: err?.message || "Network error"
+        };
+    }
+}