use fetchWrapper for getUserById.js

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -1,74 +1,84 @@
-import styles from "./VolunteerProfilePage.module.css"
-import { useParams } from "react-router";
+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 { useNavigate } from "react-router";
 import ManageMember from "./components/manageMember/ManageMember.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
 
 export default function VolunteerProfilePage() {
-
-    const params = useParams();
-    const id = params.id;
-
+    const { id } = useParams();
     const navigate = useNavigate();
-
     const { user: currentUser } = useContext(AuthContext);
 
-    const [user, setUser] = useState({});
+    const [user, setUser] = useState(null);
 
     useEffect(() => {
         (async () => {
-            const result = await getUserById(id);
-            if (result?.error === 'not_found') {
+            const res = await getUserById(id);
+
+            if (res.status === 404) {
                 navigate("/404");
-            } else {
-                setUser(result);
+                return;
             }
+
+            if (res.status !== 200) {
+                console.error("Erreur lors du chargement du profil", res);
+                return;
+            }
+
+            setUser(res.data);
         })();
-    }, [id]);
+    }, [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 === null ? "Pas de numéro enregistré" : user.phone}</p>
-                        </div>
+    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>
 
-                    <h2>Tâches :</h2>
-                    {user.tasks && user.tasks.length > 0 ? (
-                        user.tasks.map((task, index) => (
-                            <Task key={index} task={task} />
-                        ))
-                    ) : (
-                        <p>Aucune tâche pour le moment.</p>
-                    )}
+                    <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>
-    </div>
-}
+    );
+}

src/pages/Volunteers/VolunteersPage.jsx

@@ -6,7 +6,6 @@ import ToolBar from "../../components/ToolBar/ToolBar.jsx";
 import filter from "../../utils/filter.js";
 import getUserById from "../../utils/users/getUserById.js";
 
-
 function VolunteerPage() {
     const [filters, setFilters] = useState({
         alphabetical: "asc",
@@ -17,21 +16,38 @@ function VolunteerPage() {
     useEffect(() => {
         (async () => {
             const result = await getAllUser();
-            const usersData = await Promise.all(result.data.map(id => getUserById(id)));
-            setUsers(usersData);
-        })()
-    }, [])
 
-  return (
-    <div className={styles.container}>
-        <ToolBar setFilters={setFilters} filters={filters} showCreate={false}/>
-        <div className={styles.usersList}>
-            {filter(users, filters, "user").map((user, index) => (
-                <VolunteerCard key={index} user={user} />
-            ))}
+            if (result.status !== 200 || !Array.isArray(result.data)) {
+                console.error("Erreur lors du chargement des utilisateurs", result);
+                return;
+            }
+
+            const usersData = await Promise.all(
+                result.data.map(async (id) => {
+                    const res = await getUserById(id);
+
+                    if (res.status === 200) {
+                        return res.data;
+                    }
+                    console.warn(`Utilisateur ${id} non récupéré`, res.status);
+                    return null;
+                })
+            );
+
+            setUsers(usersData.filter(Boolean));
+        })();
+    }, []);
+
+    return (
+        <div className={styles.container}>
+            <ToolBar setFilters={setFilters} filters={filters} showCreate={false} />
+            <div className={styles.usersList}>
+                {filter(users, filters, "user").map((user, index) => (
+                    <VolunteerCard key={user.id ?? index} user={user} />
+                ))}
+            </div>
         </div>
-    </div>
-  );
+    );
 }
 
 export default VolunteerPage;

src/utils/users/getUserById.js

@@ -1,23 +1,5 @@
+import fetchWrapper from "../fetchWrapper.js";
+
 export default async function getUserById(id) {
-    try {
-        const res = await fetch(`${import.meta.env.VITE_API_URL}/api/users/${id}`, {
-            method: 'GET',
-            credentials: 'include',
-            headers: {
-                'Accept': 'application/json'
-            }
-        });
-
-        if (!res.ok) {
-            if (res.status === 404) {
-                return { error: 'not_found' };
-            }
-            throw new Error(`Erreur serveur : ${res.status}`);
-        }
-
-        return await res.json();
-    } catch (err) {
-        console.error('Erreur :', err);
-        return { error: 'server_error' };
-    }
+    return fetchWrapper(`/api/users/${id}`);
 }