Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Link backend to profile page

Browse Source
This commit is contained in:
T'JAMPENS QUENTIN p2406187
2025-12-02 17:40:52 +01:00
parent b099df933f
commit 98518be813
8 changed files with 104 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header/Header.jsx
+1 -1
View File
@@ -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
+30
View File
@@ -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
+22
View File
@@ -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
-1
View File
@@ -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
+18 -80
View File
@@ -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>
src/pages/Profile/ProfilePage.module.css
+1 -8
View File
@@ -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
+9
View File
@@ -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
+23
View File
@@ -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;
}
}