Merge VolunteerProfilePage into ProfilePage

src/pages/Profile/ProfilePage.tsx

@@ -1,165 +1,132 @@
-import { useContext, useEffect } from "react";
+import {useContext, useEffect, useState} from "react";
 import styles from "./ProfilePage.module.css";
-
-import { AuthContext } from "../../contexts/auth/AuthContext";
+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 Task from "../../components/Task/Task";
-//import SettingsModal from "./components/SettingsModal/SettingsModal";
 
 interface TaskType {
-  id: number;
-  title?: string;
-  completed?: boolean;
-  [key: string]: unknown;
+    id: number;
+    title?: string;
+    completed?: boolean;
+
+    [key: string]: unknown;
 }
 
 interface User {
-  name: string;
-  lastname: string;
-  role: string;
-  email: string;
-  phone: string | null;
-  created_at: string;
-  tasks: TaskType[];
+    id: number;
+    name: string;
+    lastname: string;
+    role: string;
+    email: string;
+    phone: string | null;
+    created_at: string;
+    tasks: TaskType[];
 }
 
 interface AuthContextType {
-  user: User | null;
-  update: () => void;
+    user: User;
+    update: () => void;
 }
 
 
-
-function ProfilePage(){
-  const { user, update } = useContext(AuthContext) as AuthContextType;
-
-  useEffect(() => {
-    update();
-  }, []);
-
-  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} glassBorder`}>
-                <p>
-                  <strong>Role :</strong> {user?.role}
-                </p>
-                <p>
-                  <strong>Membre depuis :</strong>{" "}
-                  {user && 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 className={styles.settingImage}>
-               {/* <SettingsModal />*/}
-              </div>
-            </div>
-
-            <h2>Tâches :</h2>
-
-           {/* {user && user.tasks.length > 0 ? (
-              user.tasks.map((task) => (
-                <Task key={task.id} task={task} />
-              ))
-            ) : (
-              <p>Aucune tâche pour le moment.</p>
-            )}*/}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default ProfilePage;
-
-
-/*import React, { useContext, useEffect } from "react";
-import styles from "./ProfilePage.module.css";
-import { AuthContext } from "../../contexts/auth/AuthContext.js";
-import formatDate from "../../utils/date/formatDate.js";
-import Task from "../../components/Task/Task";
-import SettingsModal from "./components/SettingsModal/SettingsModal.jsx";
-
 function ProfilePage() {
 
-    const { user, update } = useContext(AuthContext);
+    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();
-    }, [])
+        update();
+        (async () => {
 
-  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>
+            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>
+                        </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 className={styles.topDescription}>
-              <div className={`${styles.infoBlock} glassBorder`}>
-                <p><strong>Role :</strong> {user?.role}</p>
-                <p><strong>Membre depuis :</strong> {user && 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 === null ? "Pas de numéro enregistré" : user?.phone}</p>
-              </div>
-              <div className={styles.settingImage}>
-                <SettingsModal />
-              </div>
-            </div>
-
-            <h2>Tâches :</h2>
-              {user && 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>
-  );
+    );
 }
 
-export default ProfilePage;*/
+export default ProfilePage;

src/router.js

@@ -47,10 +47,6 @@ const router = createBrowserRouter([
                 path: "/admin",
                 Component:AdminPage,
             },
-            {
-                path:"/profile",
-                Component:ProfilePage,
-            },
             {
                 path: "/events",
                 Component: EventsPage,
@@ -59,9 +55,13 @@ const router = createBrowserRouter([
                 path: "/volunteers",
                 Component: VolunteersPage,
             },
+            {
+                path:"/profile",
+                Component:ProfilePage,
+            },
             {
                 path: "/profile/:id",
-                Component: VolunteerProfilePage,
+                Component: ProfilePage,
             },
             {
                 path: "/events/:id",