resolve conflicts

src/pages/Profile/ProfilePage.tsx

@@ -1,6 +1,7 @@
+import getXSRFToken from "../../utils/getXSRF.js";
 import {useContext, useEffect, useState} from "react";
 import styles from "./ProfilePage.module.css";
-import {AuthContext} from "../../contexts/Auth/AuthContext";
+import {AuthContext} from "../../../src/contexts/Auth/AuthContext.js";
 import formatDate from "../../utils/date/formatDate";
 import Task from "../../components/Task/Task";
 import SettingsModal from "./components/SettingsModal/SettingsModal";
@@ -9,26 +10,24 @@ 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;
-    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;
-    };
+  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;
+  };
 }
 
 
@@ -51,162 +50,139 @@ interface AuthContextType {
 }
 
 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 [profilePicture, setProfilePicture] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(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]);
-
-    const handleEditPictureClick = () => {
-        if (fileInputRef.current) {
-            fileInputRef.current.click();
+  useEffect(() => {
+    (async () => {
+      console.log(JSON.stringify(import.meta.env.VITE_API_URL));
+      if (!isOwnProfile && id) {
+        const res = await getUserById(id);
+        if (res.status === 404) {
+          navigate("/404");
+          return;
         }
-    };
-
-    // Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
-    const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-
-        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 !== 200) {
+          console.log("Erreur lors du chargement du profil", res);
+          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);
+        setProfileUser(res.data);
+      } else {
+        setProfileUser(user);
+        if (user?.profile_photo_path) {
+          setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
         }
-    };
+      }
+    })();
+  }, [user, id]);
 
-    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>
+  const handleEditPictureClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
 
-                    {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>
-                    )}
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
 
-                    <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>}
+    try {
+      const res = await uploadProfilePhoto(file);
+      if (res.ok) {
+        setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
+        console.log("Photo mise à jour")
+        await update();
+      } else {
+        console.log(res.data?.message || res.error || "Erreur lors de l'upload.");
+      }
+    } catch (err) {
+      console.log("Erreur réseau.");
+    }
+  };
+  const handleDeletePicture = async () => {
+    
+       deleteProfilePhoto();
+       setProfilePicture(null);
+  };
 
-                    <div className={styles.description}>
-                        <div className={styles.headerProfile}>
-                            <h2>
-                                {profileUser?.name} {profileUser?.lastname}
-                            </h2>
-                            {user?.isAdmin && profileUser && !isOwnProfile && (
-                                <ManageMember userToManage={profileUser}/>
-                            )}
-                        </div>
+  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>
 
-                        <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>
+          {isOwnProfile && (
+            <div className={styles.pictureButtons}>
+              <button onClick={handleEditPictureClick} className={styles.editPictureButton}>
+                Modifier la photo
+              </button>
+              {user?.profile_photo_path && (
+                <button onClick={handleDeletePicture} className={styles.editPictureButton}>
+                  Supprimer
+                </button>
+              )}
             </div>
+          )}
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            onChange={handleFileChange}
+            accept="image/*"
+            style={{ display: "none" }}
+          />
+
+          <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;