convert TS

src/contexts/auth/AuthContext.ts

@@ -15,6 +15,7 @@ export interface User {
   email: string;
   phone: string | null;
   created_at: string;
+  profile_photo_path?: string | null;
   tasks: Task[];
 }
 

src/pages/Profile/ProfilePage.tsx

@@ -1,8 +1,10 @@
 import { useContext, useEffect, useState, useRef } from "react";
-// @ts-ignore
 import styles from "./ProfilePage.module.css";
 import { AuthContext } from "../../contexts/auth/AuthContext";
 import formatDate from "../../utils/date/formatDate";
+import getXSRFToken from "../../utils/getXSRF.js";
+import fetchWrapper from "../../utils/fetchWrapper";
+
 
 interface TaskType {
   id: number;
@@ -19,7 +21,7 @@ interface User {
   phone: string | null;
   created_at: string;
   tasks: TaskType[];
-  profilePicture?: string | null;
+  profile_photo_path?: string | null;
 }
 
 interface AuthContextType {
@@ -28,8 +30,13 @@ interface AuthContextType {
 }
 
 function ProfilePage() {
+  const csrfToken = getXSRFToken();
   const { user, update } = useContext(AuthContext) as AuthContextType;
-  const [profilePicture, setProfilePicture] = useState<string | null>(user?.profilePicture || null);
+  /*const [profilePicture, setProfilePicture] = useState<string | null>(
+  user?.profile_photo_path ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`: 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);
 
   // Fonction pour déclencher l'input file
@@ -39,24 +46,81 @@ function ProfilePage() {
     }
   };
 
-  // Fonction pour gérer le changement de fichier
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
+  const file = e.target.files?.[0];
+  if (!file) return;
 
-    // Logique pour uploader la photo (à adapter selon ton backend)
-    const formData = new FormData();
-    formData.append("profilePicture", file);
+  const formData = new FormData();
+  formData.append("photo", file);
 
-    // Appelle la fonction pour uploader la photo (exemple)
-    // const response = await uploadProfilePicture(formData);
-    // setProfilePicture(response.url); // Met à jour l'URL de la photo
-    // update(); // Met à jour le contexte utilisateur
+  try {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
+  method: "POST",
+  headers: {
+    "X-XSRF-TOKEN": decodeURIComponent(await csrfToken),
+  },
+  credentials: "include",
+  body: formData,
+});
+
+    if (response.ok) {
+      const data = await response.json();
+      setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
+      setSuccess("Photo de profil mise à jour avec succès !");
+      setError(null);
+      await update();
+    
+   /*if (response.ok) {
+  const data = await response.json();
+  console.log("data:", data);
+  console.log("URL:", `/storage/${data?.profile_photo_path}`);
+ 
+  setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
+  setSuccess("Photo de profil mise à jour avec succès !");
+  setError(null);
+  update();*/
+} else {
+      const errorData = await response.json();
+      setError(errorData?.message || "Erreur lors de l'upload de la photo.");
+      setSuccess(null);
+    }
+  } catch (err) {
+    setError("Erreur réseau. Vérifiez votre connexion.");
+    setSuccess(null);
+  }
+
+  
+};
+
+  // Fonction pour supprimer la photo de profil
+  const handleDeletePicture = async () => {
+    try {
+      const token = localStorage.getItem("token");
+      const response = await fetchWrapper("/api/profile-photo",null,"DELETE");
+      if (response.status >= 200 && response.status < 300) {
+        setProfilePicture(null);
+        setSuccess("Photo de profil supprimée avec succès !");
+        setError(null);
+       await update(); 
+      } else {
+        const errorData =response.data;
+        setError(errorData.message || "Erreur lors de la suppression de la photo.");
+        setSuccess(null);
+      }
+    } catch (err) {
+      setError("Erreur réseau. Vérifiez votre connexion.");
+      setSuccess(null);
+    }
   };
 
-  useEffect(() => {
-    update();
-  }, []);
+useEffect(() => {
+  console.log("user reçu:", user);
+  if (user?.profile_photo_path) {
+    setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
+  } else if (user && !user.profile_photo_path && !profilePicture) {
+    setProfilePicture(null);
+  }
+}, [user]);
 
   return (
     <div className={styles.container}>
@@ -69,19 +133,31 @@ function ProfilePage() {
               className={styles.profilePicture}
             />
           </div>
-          <button
+          <div className={styles.pictureButtons}>
+            <button
               onClick={handleEditPictureClick}
               className={styles.editPictureButton}
             >
               Modifier la photo
             </button>
-            <input
-              type="file"
-              ref={fileInputRef}
-              onChange={handleFileChange}
-              accept="image/*"
-              style={{ display: "none" }}
-            />
+            {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}>
@@ -133,64 +209,3 @@ function ProfilePage() {
 
 export default ProfilePage;
 
-/*import React, { useContext, useEffect } from "react";
-import styles from "./ProfilePage.module.css";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task";
-import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
-
-function ProfilePage() {
-
-    const { user, update } = useContext(AuthContext);
-
-    useEffect(() => {
-      update();
-    }, [])
-
-  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> {user?.name} {user?.lastname} </h2>
-            </div>
-            <div className={styles.topDescription}>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Role :</strong> {user?.role}</p>
-                <p><strong>Membre depuis :</strong> {user && formatDate(user.created_at)}</p>
-              </div>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Mail :</strong> {user?.email} </p>
-                <p><strong>Téléphone :</strong> {user?.phone === null ? "Pas de numéro enregistré" : user?.phone}</p>
-              </div>
-              <div className={styles.settingImage}>
-                <SettingsModal />
-              </div>
-            </div>
-
-            <h2>Tâches :</h2>
-              {user && user.tasks.length > 0 ? (
-                  user.tasks.map((task, index) => (
-                      <Task key={index} task={task} />
-                  ))
-              ) : (
-                  <p>Aucune tâche pour le moment.</p>
-              )}
-
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProfilePage;*/