From 98518be81338e02b8f678c724a7798c3968d52e0 Mon Sep 17 00:00:00 2001 From: T'JAMPENS QUENTIN p2406187 Date: Tue, 2 Dec 2025 17:40:52 +0100 Subject: [PATCH] Link backend to profile page --- src/components/Header/Header.jsx | 2 +- src/components/Task/Task.jsx | 30 ++++++++ src/components/Task/Task.module.css | 22 ++++++ src/index.css | 1 - src/pages/Profile/ProfilePage.jsx | 98 +++++------------------- src/pages/Profile/ProfilePage.module.css | 9 +-- src/utils/date/formatDate.js | 9 +++ src/utils/event/getEventById.js | 23 ++++++ 8 files changed, 104 insertions(+), 90 deletions(-) create mode 100644 src/components/Task/Task.jsx create mode 100644 src/components/Task/Task.module.css create mode 100644 src/utils/date/formatDate.js create mode 100644 src/utils/event/getEventById.js diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 2a8ea25..177cf3d 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -70,7 +70,7 @@ function Header() { {unreadNotification && } - + diff --git a/src/components/Task/Task.jsx b/src/components/Task/Task.jsx new file mode 100644 index 0000000..bcade11 --- /dev/null +++ b/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 ( +
+
+
+

{event && event.name} - {task.name}

+

{task.description}

+

{formatDate(task.start)}

+
+
+
+ ); +} + +export default Task; \ No newline at end of file diff --git a/src/components/Task/Task.module.css b/src/components/Task/Task.module.css new file mode 100644 index 0000000..052d0a3 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index f7d7591..8f76726 100644 --- a/src/index.css +++ b/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); diff --git a/src/pages/Profile/ProfilePage.jsx b/src/pages/Profile/ProfilePage.jsx index c38328f..99f953d 100644 --- a/src/pages/Profile/ProfilePage.jsx +++ b/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 ( -
-
-
-

{title}

-

{date}

-
- -
- -
- ); -} - +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 (
Photo de profil
-

LEBLOND Malo

+

{user.name} {user.lastname}

-

Role : Président

-

Membre depuis : 2019

+

Role : {user.role}

+

Membre depuis : {formatDate(user.created_at)}

-

Mail : mailpro@gmail.com

-

Téléphone : 08 67 87 32 21

+

Mail : {user.email}

+

Téléphone : {user.phone}

+

Vos Événements :

- - - - - - - + {user.tasks && user.tasks.map((task, index) => ( + + ))}
+
diff --git a/src/pages/Profile/ProfilePage.module.css b/src/pages/Profile/ProfilePage.module.css index 54569c6..1c7b177 100644 --- a/src/pages/Profile/ProfilePage.module.css +++ b/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; diff --git a/src/utils/date/formatDate.js b/src/utils/date/formatDate.js new file mode 100644 index 0000000..3fd1371 --- /dev/null +++ b/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}`; +} \ No newline at end of file diff --git a/src/utils/event/getEventById.js b/src/utils/event/getEventById.js new file mode 100644 index 0000000..8d09b78 --- /dev/null +++ b/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; + } + +} \ No newline at end of file