Merge branch 'features/PageNotFound' into 'dev'

Features/pagenotfound

See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!46

src/pages/PageNotFound/PageNotFound.jsx

@@ -0,0 +1,24 @@
+import Background from "../../components/background/background.jsx";
+import styles from "./PageNotFound.module.css"
+import { useNavigate } from "react-router";
+
+export default function PageNotFound() {
+
+    const navigate = useNavigate();
+
+    return <Background>
+        <div className={styles.content}>
+            <h1 className={styles.title}> Page non trouvée </h1>
+            <div className={`${styles.container} glassCard`}>
+                <p>
+                    Désolé, la page que vous recherchez n’existe pas ou n’est plus disponible. <br/>
+                    Vous pouvez : <br/>
+                    - Vérifier l’URL pour une éventuelle erreur de saisie. <br/>
+                    - Revenir à l’accueil <span onClick={() => navigate("/")} className={styles.redirectSpan}>ici.</span> <br/>
+
+                </p>
+                <p> Contact : contact@example.com </p>
+            </div>
+        </div>
+    </Background>
+}

src/pages/PageNotFound/PageNotFound.module.css

@@ -0,0 +1,33 @@
+.title {
+    color: white;
+    font-size: xx-large;
+    margin-bottom: 20px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    z-index: 2;
+    padding: 10px;
+}
+
+.container {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+
+    p {
+        font-size: large;
+    }
+}
+.redirectSpan {
+    color: blue;
+    text-decoration: underline;
+}
+
+.redirectSpan:hover {
+    cursor: pointer;
+}

src/pages/VolunteerProfile/VolunteerProfilePage.jsx

@@ -4,20 +4,28 @@ import { useEffect, useState } 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";
 
 export default function VolunteerProfilePage() {
 
     const params = useParams();
     const id = params.id;
 
+    const navigate = useNavigate();
+
     const [user, setUser] = useState({});
 
     useEffect(() => {
         (async () => {
-            const data = await getUserById(id);
+            const result = await getUserById(id);
-            setUser(data);
+            if (result?.error === 'not_found') {
-        }) ()
+                navigate("/404");
-    }, []);
+            } else {
+                setUser(result);
+            }
+        })();
+    }, [id]);
+
 
 
     return <div className={styles.container}>

src/router.js

@@ -9,6 +9,7 @@ import ProfilePage from "./pages/Profile/ProfilePage";
 import EventsPage from "./pages/Events/EventsPage.jsx";
 import ValidationErrorPage from "./pages/waitValidationPage/ValidationErrorPage.jsx";
 import VolunteerProfilePage from "./pages/VolunteerProfile/VolunteerProfilePage.jsx";
+import PageNotFound from "./pages/PageNotFound/PageNotFound.jsx";
 
 const router = createBrowserRouter([
     {
@@ -23,6 +24,14 @@ const router = createBrowserRouter([
         path: "/error/validation",
         Component: ValidationErrorPage
     },
+    {
+        path: "/*",
+        Component: PageNotFound,
+    },
+    {
+        path: "/404",
+        Component: PageNotFound,
+    },
     {
         path: "/",
         Component: Layout,

src/utils/users/getUserById.js

@@ -1,4 +1,4 @@
-export default async function getUserById (id) {
+export default async function getUserById(id) {
     try {
         const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${id}`, {
             method: 'GET',
@@ -9,12 +9,15 @@ export default async function getUserById (id) {
         });
 
         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 null;
+        return { error: 'server_error' };
     }
 }