137 lines
4.6 KiB
TypeScript
137 lines
4.6 KiB
TypeScript
import {useContext, useEffect, useState} from "react";
|
|
import styles from "./ProfilePage.module.css";
|
|
import {AuthContext} from "../../contexts/auth/AuthContext";
|
|
import formatDate from "../../utils/date/formatDate";
|
|
import Task from "../../components/Task/Task";
|
|
import SettingsModal from "./components/SettingsModal/SettingsModal";
|
|
import { useParams } from "react-router";
|
|
import { useNavigate } from "react-router";
|
|
import getUserById from "../../utils/users/getUserById.js";
|
|
import ManageMember from "./components/manageMember/ManageMember.jsx";
|
|
|
|
|
|
interface TaskType {
|
|
id: number;
|
|
title?: string;
|
|
completed?: boolean;
|
|
|
|
[key: string]: unknown;
|
|
}
|
|
|
|
interface User {
|
|
id: number;
|
|
name: string;
|
|
lastname: string;
|
|
role: string;
|
|
email: string;
|
|
phone: string | null;
|
|
created_at: string;
|
|
isAdmin: boolean;
|
|
tasks: TaskType[];
|
|
}
|
|
|
|
interface AuthContextType {
|
|
user: User;
|
|
update: () => void;
|
|
}
|
|
|
|
|
|
function ProfilePage() {
|
|
|
|
const navigate = useNavigate();
|
|
const { id } = useParams();
|
|
const { user, update } = useContext(AuthContext) as AuthContextType;
|
|
const [profileUser, setProfileUser] = useState<User | null>(null);
|
|
|
|
const isOwnProfile = !id || user.id.toString() === id;
|
|
|
|
useEffect(() => {
|
|
update();
|
|
(async () => {
|
|
|
|
if(!isOwnProfile) {
|
|
console.log(id);
|
|
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;
|
|
}
|
|
|
|
setProfileUser(res.data);
|
|
} else setProfileUser(user)
|
|
}) ()
|
|
}, []);
|
|
|
|
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>
|
|
{profileUser?.name} {profileUser?.lastname}
|
|
</h2>
|
|
{(user?.isAdmin && profileUser && !isOwnProfile) && (
|
|
<ManageMember userToManage={profileUser} />
|
|
)}
|
|
</div>
|
|
|
|
<div className={styles.topDescription}>
|
|
<div className={`${styles.infoBlock} glassBorder`}>
|
|
<p>
|
|
<strong>Role :</strong> {profileUser?.role}
|
|
</p>
|
|
<p>
|
|
<strong>Membre depuis :</strong>{" "}
|
|
{profileUser && formatDate(profileUser.created_at)}
|
|
</p>
|
|
</div>
|
|
|
|
<div className={`${styles.infoBlock} glassBorder`}>
|
|
<p>
|
|
<strong>Mail :</strong> {profileUser?.email}
|
|
</p>
|
|
<p>
|
|
<strong>Téléphone :</strong>{" "}
|
|
{profileUser?.phone ?? "Pas de numéro enregistré"}
|
|
</p>
|
|
</div>
|
|
|
|
{isOwnProfile && (
|
|
<div className={styles.settingImage}>
|
|
<SettingsModal />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<h2>Tâches :</h2>
|
|
|
|
{profileUser && profileUser.tasks.length > 0 ? (
|
|
profileUser.tasks.map((task) => (
|
|
<Task key={task.id} task={task}/>
|
|
))
|
|
) : (
|
|
<p>Aucune tâche pour le moment.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProfilePage; |