add TS + implement upload profilePicture

src/pages/Profile/ProfilePage.tsx

@@ -1,12 +1,8 @@
-import { useContext, useEffect } from "react";
-import styles from "./ProfilePage.module.css";
-
+import { useContext, useEffect, useState, useRef } from "react";
+import styles from "../Profile/ProfilePage.module.css";
 import { AuthContext } from "../../contexts/auth/AuthContext";
 import formatDate from "../../utils/date/formatDate";
 
-//import Task from "../../components/Task/Task";
-//import SettingsModal from "./components/SettingsModal/SettingsModal";
-
 interface TaskType {
   id: number;
   title?: string;
@@ -22,6 +18,7 @@ interface User {
   phone: string | null;
   created_at: string;
   tasks: TaskType[];
+  profilePicture?: string | null;
 }
 
 interface AuthContextType {
@@ -29,10 +26,32 @@ interface AuthContextType {
   update: () => void;
 }
 
-
-
-function ProfilePage(){
+function ProfilePage() {
   const { user, update } = useContext(AuthContext) as AuthContextType;
+  const [profilePicture, setProfilePicture] = useState<string | null>(user?.profilePicture || null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Fonction pour déclencher l'input file
+  const handleEditPictureClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+
+  // Fonction pour gérer le changement de fichier
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    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);
+
+    // 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
+  };
 
   useEffect(() => {
     update();
@@ -44,10 +63,23 @@ function ProfilePage(){
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
-              src="/react.svg"
+              src={profilePicture || "/react.svg"}
               alt="Photo de profil"
               className={styles.profilePicture}
             />
+            <button
+              onClick={handleEditPictureClick}
+              className={styles.editPictureButton}
+            >
+              Modifier la photo
+            </button>
+            <input
+              type="file"
+              ref={fileInputRef}
+              onChange={handleFileChange}
+              accept="image/*"
+              style={{ display: "none" }}
+            />
           </div>
 
           <div className={styles.description}>
@@ -79,19 +111,18 @@ function ProfilePage(){
               </div>
 
               <div className={styles.settingImage}>
-               {/* <SettingsModal />*/}
+                {/* <SettingsModal /> */}
               </div>
             </div>
 
             <h2>Tâches :</h2>
-
-           {/* {user && user.tasks.length > 0 ? (
+            {/* {user && user.tasks.length > 0 ? (
               user.tasks.map((task) => (
                 <Task key={task.id} task={task} />
               ))
             ) : (
               <p>Aucune tâche pour le moment.</p>
-            )}*/}
+            )} */}
           </div>
         </div>
       </div>
@@ -101,7 +132,6 @@ function ProfilePage(){
 
 export default ProfilePage;
 
-
 /*import React, { useContext, useEffect } from "react";
 import styles from "./ProfilePage.module.css";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";