85 lines
3.2 KiB
React
85 lines
3.2 KiB
React
import styles from "./VolunteerProfilePage.module.css";
|
|
import { useParams, useNavigate } from "react-router";
|
|
import { useEffect, useState, useContext } from "react";
|
|
import getUserById from "../../utils/users/getUserById.js";
|
|
import formatDate from "../../utils/date/formatDate.js";
|
|
import Task from "../../components/Task/Task.jsx";
|
|
import ManageMember from "./components/manageMember/ManageMember.jsx";
|
|
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
|
|
|
export default function VolunteerProfilePage() {
|
|
const { id } = useParams();
|
|
const navigate = useNavigate();
|
|
const { user: currentUser } = useContext(AuthContext);
|
|
|
|
const [user, setUser] = useState(null);
|
|
|
|
useEffect(() => {
|
|
(async () => {
|
|
const res = await getUserById(id);
|
|
|
|
if (res.status === 404) {
|
|
navigate("/404");
|
|
return;
|
|
}
|
|
|
|
if (res.status !== 200) {
|
|
console.error("Erreur lors du chargement du profil", res);
|
|
return;
|
|
}
|
|
|
|
setUser(res.data);
|
|
})();
|
|
}, [id, navigate]);
|
|
|
|
if (!user) return null;
|
|
|
|
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>
|
|
{currentUser?.isAdmin && (
|
|
<ManageMember userToManage={user} />
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.topDescription}>
|
|
<div className={`${styles.infoBlock} glassBorder`}>
|
|
<p><strong>Role :</strong> {user.role}</p>
|
|
<p><strong>Membre depuis :</strong> {formatDate(user.created_at)}</p>
|
|
</div>
|
|
<div className={`${styles.infoBlock} glassBorder`}>
|
|
<p><strong>Mail :</strong> {user.email}</p>
|
|
<p>
|
|
<strong>Téléphone :</strong>{" "}
|
|
{user.phone ?? "Pas de numéro enregistré"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Tâches :</h2>
|
|
{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>
|
|
);
|
|
}
|