Link VolunteerProfilePage to backend server

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -1,13 +1,61 @@
 import styles from "./VolunteerProfilePage.module.css"
 import { useParams } from "react-router";
-
+import { useEffect, useState } from "react";
+import getUserById from "../../utils/users/getUserById.js";
+import formatDate from "../../utils/date/formatDate.js";
+import Task from "../../components/Task/Task.jsx";
 
 export default function VolunteerProfilePage() {
 
     const params = useParams();
     const id = params.id;
 
-    return <div>
+    const [user, setUser] = useState({});
 
+    useEffect(() => {
+        (async () => {
+            const data = await getUserById(id);
+            setUser(data);
+        }) ()
+    }, []);
+
+
+    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}>
+                            <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> {user.email} </p>
+                            <p><strong>Téléphone :</strong> {user.phone === null ? "Pas de numéro enregistré" : user.phone}</p>
+                        </div>
+                    </div>
+
+                    <h2>Tâches :</h2>
+                    {user.tasks && 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>
 }