Link backend to profile page

src/components/Header/Header.jsx

@@ -70,7 +70,7 @@ function Header() {
                             {unreadNotification && <span className={styles.notificationBadge}></span>}
                         </button>
 
-                        <Link to="" className={styles.profileLink}>
+                        <Link to="/profile" className={styles.profileLink}>
                             <svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="auto" fill="currentFill">
                                 <path d="M480-492.31q-57.75 0-98.87-41.12Q340-574.56 340-632.31q0-57.75 41.13-98.87 41.12-41.13 98.87-41.13 57.75 0 98.87 41.13Q620-690.06 620-632.31q0 57.75-41.13 98.88-41.12 41.12-98.87 41.12ZM180-187.69v-88.93q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v88.93H180Z" />
                             </svg>

src/components/Task/Task.jsx

@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from "react";
+import getEventById from "../../utils/event/getEventById.js";
+import styles from "./Task.module.css";
+import formatDate from "../../utils/date/formatDate.js";
+
+const Task = ({ task }) => {
+    const [event, setEvent] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const e = await getEventById(task.id);
+            console.log(e);
+            setEvent(e);
+        }) ()
+    }, [])
+
+    return (
+        <div className={`${styles.task} glassCard`}>
+            <div className={styles.content}>
+                <div>
+                    <h2> {event && event.name} - {task.name}</h2>
+                    <p className={styles.desc}> {task.description} </p>
+                    <p className={styles.date}> {formatDate(task.start)} </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Task;

src/components/Task/Task.module.css

@@ -0,0 +1,22 @@
+.task {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.desc {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0 0 0 0;
+}
+
+.date {
+    font-size: 0.8rem;
+}

src/index.css

@@ -46,7 +46,6 @@ body {
 
 .glassCard {
   width: 100%;
-  padding: 10px;
   height: fit-content;
   background: rgba(255, 255, 255, 0.65);
   backdrop-filter: blur(3px);

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";
-
+import { AuthContext } from "../../contexts/auth/AuthContext.js";
-function Event({ title,date, tasks }) {
+import formatDate from "../../utils/date/formatDate.js";
-  const [isExpanded, setIsExpanded] = useState(false);
+import Task from "../../components/Task/Task";
-
-  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>
-  );
-}
-
 
 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>Role :</strong> {user.role}</p>
-                <p><strong>Membre depuis :</strong> 2019</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>Mail :</strong> {user.email} </p>
-                <p><strong>Téléphone :</strong> 08 67 87 32 21</p>
+                <p><strong>Téléphone :</strong> {user.phone}</p>
               </div>
               <button href="/../UpdateProfile.jsx">M</button>
             </div>
+
             <h2>Vos Événements :</h2>
-            <Event
+              {user.tasks && user.tasks.map((task, index) => (
-              title="Titre event 1"
+                  <Task key={index} task={task} />
-              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"]}
-            />
           </div>
+
         </div>
       </div>
     </div>

src/pages/Profile/ProfilePage.module.css

@@ -51,13 +51,6 @@
   border-radius: 5px;
 }
 
-.event {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 10px;
-  border-radius: 8px;
-}
-
 .eventTasks {
   max-height: 0;
   overflow: hidden;
@@ -78,7 +71,7 @@
 .profilePicture{
     width:90%;
   }
-/* Tablette (768px et plus) */
+
 @media screen and (min-width: 768px) {
   .contentWrapper {
     flex-direction: row;

src/utils/date/formatDate.js

@@ -0,0 +1,9 @@
+export default function formatDate(d) {
+    const date = new Date(d);
+
+    const jj = String(date.getUTCDate()).padStart(2, '0');
+    const mm = String(date.getUTCMonth() + 1).padStart(2, '0');
+    const aaaa = date.getUTCFullYear();
+
+    return `${jj}/${mm}/${aaaa}`;
+}

src/utils/event/getEventById.js

@@ -0,0 +1,23 @@
+export default async function GetEventById(id) {
+
+    try {
+        const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/${id}`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        const data = await res.json();
+        return data;
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+
+}