Link backend to profile page

src/pages/Profile/ProfilePage.jsx

@@ -1,106 +1,44 @@
-import React, { useState } from "react";
+import React, { useContext } from "react";
 import styles from "./ProfilePage.module.css";
-
-function Event({ title,date, tasks }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  return (
-    <div className={`${styles.event} glassCard`}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-         <div style={{display:'flex', flexDirection:'column'}}>
-          <h3>{title}</h3>
-          <p style={{ fontSize: '0.8rem', color: '#666', margin: '0 0 0 0' }}>{date}</p>
-        </div>
-        <button
-          onClick={toggleExpand}
-          style={{
-            background: 'none',
-            border: 'none',
-            cursor: 'pointer',
-            fontSize: '1.2rem',
-          }}
-        >
-          {isExpanded ? '▼' : '▶'}
-        </button>
-      </div>
-      <ul
-        className={`${styles.eventTasks} ${isExpanded ? styles.expanded : ''}`}
-      >
-        {tasks.map((task, index) => (
-          <li key={index}>-- {task}</li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task";
 
 function ProfilePage() {
+
+    const { user } = useContext(AuthContext);
+
   return (
     <div className={styles.container}>
       <div className={`${styles.profileboard} glassCard`}>
         <div className={styles.contentWrapper}>
           <div className={styles.profilePictureContainer}>
             <img
-              src="../src/assets/react.svg"
+              src="/react.svg"
               alt="Photo de profil"
               className={styles.profilePicture}
             />
           </div>
           <div className={styles.description}>
-            <h2>LEBLOND Malo</h2>
+            <h2> {user.name} {user.lastname} </h2>
             <div className={styles.topDescription}>
               <div className={styles.infoBlock}>
-                <p><strong>Role :</strong> Président</p>
-                <p><strong>Membre depuis :</strong> 2019</p>
+                <p><strong>Role :</strong> {user.role}</p>
+                <p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
               </div>
               <div className={styles.infoBlock}>
-                <p><strong>Mail :</strong> mailpro@gmail.com</p>
-                <p><strong>Téléphone :</strong> 08 67 87 32 21</p>
+                <p><strong>Mail :</strong> {user.email} </p>
+                <p><strong>Téléphone :</strong> {user.phone}</p>
               </div>
               <button href="/../UpdateProfile.jsx">M</button>
             </div>
+
             <h2>Vos Événements :</h2>
-            <Event
-              title="Titre event 1"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 2"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 3"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 4"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 5"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 6"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
-            <Event
-              title="Titre event 7"
-              date="04/11/2025"
-              tasks={["Votre tâche 1", "Votre tâche 2", "Votre tâche 3"]}
-            />
+              {user.tasks && user.tasks.map((task, index) => (
+                  <Task key={index} task={task} />
+              ))}
           </div>
+
         </div>
       </div>
     </div>