fix merge features/ts into dev

src/pages/Home/components/Calendar/calendar.jsx

@@ -5,7 +5,7 @@ import {EventContext} from "../../../../contexts/events/EventContext.js";
 
 function Calendar() {
 
-    const { events } = useContext(EventContext);
+    const { events=[] } = useContext(EventContext);
 
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",

src/pages/Home/components/EventList/eventList.jsx

@@ -4,33 +4,32 @@ import EventItem from "./eventItem.jsx";
 import { EventContext } from "../../../../contexts/events/EventContext.js";
 import { useContext } from "react";
 
-
 function EventList() {
-
-    const { events } = useContext(EventContext);
+    // Utilise une valeur par défaut pour `events` si elle est `undefined`
+    const { events = [] } = useContext(EventContext);
 
     const sortedEvents = useMemo(() => {
+        // Vérifie explicitement que `events` est un tableau avant de trier
+        if (!Array.isArray(events)) return [];
         return [...events].sort(
             (a, b) => new Date(a.start) - new Date(b.start)
         );
     }, [events]);
 
-
     return (
         <div className={`${styles.glassCard} glassCard`}>
-                <h2>Liste des événements à venir</h2>
-                {sortedEvents.length > 0 ? (
-                    <div className={styles.eventList}>
-                        {sortedEvents.map((eventGroup, index) => (
-                            <EventItem eventGroup={eventGroup} key={index} />
-                        ))}
-                    </div>
-                ) : (
-                    <p>Aucun événement planifié pour l'instant.</p>
-                )}
+            <h2>Liste des événements à venir</h2>
+            {sortedEvents.length > 0 ? (
+                <div className={styles.eventList}>
+                    {sortedEvents.map((eventGroup, index) => (
+                        <EventItem eventGroup={eventGroup} key={index} />
+                    ))}
+                </div>
+            ) : (
+                <p>Aucun événement planifié pour l'instant.</p>
+            )}
         </div>
-
     );
 }
 
-export default EventList;
+export default EventList;

src/pages/Profile/ProfilePage.module.css

@@ -1,7 +1,9 @@
+/* Conteneur principal */
 .container {
-    width: 100%;
-    padding: 12px;
-    box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  margin: 0 auto;
 }
 
 .profileboard {
@@ -18,35 +20,68 @@
 }
 
 .contentWrapper {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
 }
 
 .profilePictureContainer {
-    width: 120px;
-    height: 120px;
-    margin-bottom: 16px;
+  width: 120px;
+  height: 120px;
+  margin-bottom: 0;
+  position: relative;
+  display: flex;
+  justify-content: center;
 }
 
 .profilePicture {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.editPictureButton {
+  margin-top: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  background: rgba(255, 255, 255, 0.95);
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: #e74c3c;
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  backdrop-filter: blur(5px);
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: auto;
+  min-width: 140px;
+}
+
+.editPictureButton:hover {
+  background: rgba(255, 255, 255, 1);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
+  color: #c0392b;
 }
 
 .description {
-    width: 100%;
-    text-align: left;
+  width: 100%;
+  text-align: left;
 }
-
 .headerProfile {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
 }
 
 .description h2 {
@@ -78,84 +113,91 @@
     margin: 0;
 }
 
+/* Conteneur des informations principales */
 .topDescription {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  margin-bottom: 20px;
 }
 
+/* Bloc d'informations */
 .infoBlock {
-    width: 100%;
-    padding: 12px;
+  width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
 }
 
-.eventTasks {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease, opacity 0.2s ease;
-    opacity: 0;
-    padding-left: 16px;
-}
-
-.eventTasks.expanded {
-    max-height: 500px;
-    opacity: 1;
-    margin-top: 10px;
+/* Conteneur pour les paramètres */
+.settingImage {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
 }
 
+/* Adaptation pour tablette et PC */
 @media (min-width: 768px) {
-    .contentWrapper {
-        flex-direction: row;
-        align-items: flex-start;
-    }
+  .contentWrapper {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 24px;
+  }
 
-    .profilePictureContainer {
-        width: 150px;
-        height: 150px;
-        margin-right: 24px;
-        margin-bottom: 0;
-    }
+  .profilePictureContainer {
+    width: 150px;
+    height: 150px;
+    margin-right: 0;
+  }
 
-    .description {
-        width: calc(100% - 180px);
-    }
+  .description {
+    width: calc(100% - 180px);
+  }
 
-    .topDescription {
-        flex-direction: row;
-        justify-content: space-between;
-    }
+  .topDescription {
+    flex-direction: row;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
-    .infoBlock {
-        width: 48%;
-    }
+  .infoBlock {
+    flex: 1;
+    min-width: calc(50% - 8px);
+    max-width: calc(50% - 8px);
+  }
 
-    .description h2 {
-        font-size: 1.8rem;
-    }
+  .editPictureButton {
+    margin: 16px auto 0 auto;
+    display: block;
+  }
+
+  .headerProfile h2 {
+    font-size: 1.8rem;
+  }
 }
 
+/* Adaptation pour grand écran */
 @media (min-width: 1024px) {
-    .container {
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 24px;
-    }
+  .container {
+    max-width: 1200px;
+    padding: 24px;
+  }
 
-    .profileboard {
-        padding: 28px;
-    }
+  .profileboard {
+    padding: 28px;
+  }
 
-    .profilePictureContainer {
-        width: 180px;
-        height: 180px;
-    }
+  .profilePictureContainer {
+    width: 180px;
+    height: 180px;
+  }
 
-    .description {
-        width: calc(100% - 220px);
-    }
+  .description {
+    width: calc(100% - 220px);
+  }
 
-    .description h2 {
-        font-size: 2rem;
-    }
+  .headerProfile h2 {
+    font-size: 2rem;
+  }
 }

src/pages/Profile/ProfilePage.tsx

@@ -1,3 +1,5 @@
+import getXSRFToken from "../../utils/getXSRF.js";
+// import fetchWrapper from "../../utils/fetchWrapper";
 import {useContext, useEffect, useState} from "react";
 import styles from "./ProfilePage.module.css";
 import {AuthContext} from "../../contexts/auth/AuthContext";
@@ -6,18 +8,32 @@ import Task from "../../components/Task/Task";
 import SettingsModal from "./components/SettingsModal/SettingsModal";
 import {useParams} from "react-router";
 import {useNavigate} from "react-router";
+import {useRef} from "react";
 import getUserById from "../../utils/users/getUserById.js";
 import ManageMember from "./components/manageMember/ManageMember.jsx";
 
+import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
+import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
+
 
 interface TaskType {
-    id: number;
-    title?: string;
-    completed?: boolean;
-
-    [key: string]: unknown;
+  id: number;
+  name: string;
+  description: string;
+  location: string;
+  start: string;
+  end: string;
+  max_participants: number;
+  events_id: number;
+  created_at: string;
+  updated_at: string;
+  pivot: {
+    user_id: number;
+    task_id: number;
+  };
 }
 
+
 interface User {
     id: number;
     name: string;
@@ -28,111 +44,170 @@ interface User {
     created_at: string;
     isAdmin: boolean;
     tasks: TaskType[];
+    profile_photo_path?: string | null;
 }
 
 interface AuthContextType {
-    user: User;
+    user: User | null;
     update: () => void;
 }
 
 function ProfilePage() {
+  const navigate = useNavigate();
+  const { id } = useParams();
+  const { user, update } = useContext(AuthContext) as AuthContextType;
+  const [profileUser, setProfileUser] = useState<User | null>(null);
+  const [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
-    const navigate = useNavigate();
-    const {id} = useParams();
-    const {user, update} = useContext(AuthContext) as AuthContextType;
-    const [profileUser, setProfileUser] = useState<User | null>(null);
+  const isOwnProfile = !id || user?.id.toString() === id;
 
-    const isOwnProfile = !id || user.id.toString() === id;
+  useEffect(() => {
+    (async () => {
+      if (!isOwnProfile && id) {
+        const res = await getUserById(id);
+        if (res.status === 404) {
+          navigate("/404");
+          return;
+        }
+        if (res.status !== 200) {
+          console.error("Erreur lors du chargement du profil", res);
+          return;
+        }
+        setProfileUser(res.data);
+      } else {
+        update();
+        setProfileUser(user);
+        if (user?.profile_photo_path) {
+          setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
+        }
+      }
+    })();
+  }, [user, id]);
 
-    useEffect(() => {
+  const handleEditPictureClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
 
-        (async () => {
+  // Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-            if (!isOwnProfile) {
-                console.log(id);
-                const res = await getUserById(id);
+    try {
+      const res = await uploadProfilePhoto(file);
+      if (res.ok) {
+        setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
+        setSuccess("Photo mise à jour !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || res.error || "Erreur lors de l'upload.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };
 
-                if (res.status === 404) {
-                    navigate("/404");
-                    return;
-                }
+  // Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
+  const handleDeletePicture = async () => {
+    try {
+      const res = await deleteProfilePhoto();
+      if (res.status >= 200 && res.status < 300) {
+        setProfilePicture(null);
+        setSuccess("Photo supprimée !");
+        setError(null);
+        await update();
+      } else {
+        setError(res.data?.message || "Erreur lors de la suppression.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau.");
+      setSuccess(null);
+    }
+  };
 
-                if (res.status !== 200) {
-                    console.error("Erreur lors du chargement du profil", res);
-                    return;
-                }
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.profileboard} glassCard`}>
+        <div className={styles.contentWrapper}>
+          <div className={styles.profilePictureContainer}>
+            <img
+              src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
+              alt="Photo de profil"
+              className={styles.profilePicture}
+            />
+          </div>
 
-                setProfileUser(res.data);
-            } else {
-                setProfileUser(user)
-            }
-        })()
-    }, [user, id]);
-
-    return (
-        <div className={styles.container}>
-            <div className={`${styles.profileboard} glassCard`}>
-                <div className={styles.contentWrapper}>
-                    <div className={styles.profilePictureContainer}>
-                        <img
-                            src="/react.svg"
-                            alt="Photo de profil"
-                            className={styles.profilePicture}
-                        />
-                    </div>
-
-                    <div className={styles.description}>
-                        <div className={styles.headerProfile}>
-                            <h2>
-                                {profileUser?.name} {profileUser?.lastname}
-                            </h2>
-                            {(user?.isAdmin && profileUser && !isOwnProfile) && (
-                                <ManageMember userToManage={profileUser}/>
-                            )}
-                        </div>
-
-                        <div className={styles.topDescription}>
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
-                                    <strong>Role :</strong> {profileUser?.role}
-                                </p>
-                                <p>
-                                    <strong>Membre depuis :</strong>{" "}
-                                    {profileUser && formatDate(profileUser.created_at)}
-                                </p>
-                            </div>
-
-                            <div className={`${styles.infoBlock} glassBorder`}>
-                                <p>
-                                    <strong>Mail :</strong> {profileUser?.email}
-                                </p>
-                                <p>
-                                    <strong>Téléphone :</strong>{" "}
-                                    {profileUser?.phone ?? "Pas de numéro enregistré"}
-                                </p>
-                            </div>
-
-                            {isOwnProfile && (
-                                <div className={styles.settingImage}>
-                                    <SettingsModal/>
-                                </div>
-                            )}
-                        </div>
-
-                        <h2>Tâches :</h2>
-
-                        {profileUser && profileUser.tasks.length > 0 ? (
-                            profileUser.tasks.map((task) => (
-                                <Task key={task.id} task={task}/>
-                            ))
-                        ) : (
-                            <p>Aucune tâche pour le moment.</p>
-                        )}
-                    </div>
-                </div>
+          {isOwnProfile && (
+            <div className={styles.pictureButtons}>
+              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
+                Modifier la photo
+              </button>
+              {user?.profile_photo_path && (
+                <button onClick={handleDeletePicture} className={styles.deletePictureButton}>
+                  Supprimer
+                </button>
+              )}
             </div>
+          )}
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept="image/*"
+            style={{ display: "none" }}
+          />
+          {error && <p className={styles.errorMessage}>{error}</p>}
+          {success && <p className={styles.successMessage}>{success}</p>}
+
+          <div className={styles.description}>
+            <div className={styles.headerProfile}>
+              <h2>
+                {profileUser?.name} {profileUser?.lastname}
+              </h2>
+              {user?.isAdmin && profileUser && !isOwnProfile && (
+                <ManageMember userToManage={profileUser} />
+              )}
+            </div>
+
+            <div className={styles.topDescription}>
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Role :</strong> {profileUser?.role}</p>
+                <p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
+              </div>
+
+              <div className={`${styles.infoBlock} glassBorder`}>
+                <p><strong>Mail :</strong> {profileUser?.email}</p>
+                <p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
+              </div>
+
+              {isOwnProfile && (
+                <div className={styles.settingImage}>
+                  <SettingsModal />
+                </div>
+              )}
+            </div>
+
+            <h2>Tâches :</h2>
+            {profileUser?.tasks.length ? (
+              profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
+            ) : (
+              <p>Aucune tâche.</p>
+            )}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }
 
 export default ProfilePage;

src/pages/Profile/components/SettingsModal/SettingsModal.tsx

@@ -164,4 +164,4 @@ export default function SettingsModal() {
             </Modal>
         </>
     );
-}
+}