add TS + implement upload profilePicture

src/config/appConfig.js

@@ -1,4 +0,0 @@
-export const APP_CONFIG = {
-    contactEmail: "contact@example.com",
-    contactPhone: "+33 01 02 03 04 05"
-}

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.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";

tsconfig.json

@@ -1,49 +1,4 @@
 {
-  // Visit https://aka.ms/tsconfig to read more about this file
-  /*"compilerOptions": {*/
-    // File Layout
-    // "rootDir": "./src",
-    // "outDir": "./dist",
-
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    /*"module": "nodenext",
-    "target": "esnext",
-    "types": [],*/
-    // For nodejs:
-    // "lib": ["esnext"],
-    // "types": ["node"],
-    // and npm install -D @types/node
-
-    // Other Outputs
-    /*"sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,*/
-
-    // Stricter Typechecking Options
-    /*"noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,*/
-
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-   /* "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
-}
-
-{*/
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -52,11 +7,13 @@
     "jsx": "react-jsx",
     "strict": true,
     "isolatedModules": true,
-
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": false,
-
+    "noUncheckedIndexedAccess": false,
+    "exactOptionalPropertyTypes": true,
     "resolveJsonModule": true,
-    "skipLibCheck": true
-  }
+    "skipLibCheck": true,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "exclude": ["**/*.js"]
 }