Merge branch 'features/getUserNotifications' into 'dev'

add of getUserNotifications function

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

src/components/Header/Header.jsx

@@ -1,20 +1,24 @@
 import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
 import { useEffect, useRef, useState } from "react";
+import getUserNotifications from "../../utils/getUserNotifications.js";
 
 function Header() {
     const [notificationMenu, setnotificationMenu] = useState(false);
     const [unreadNotification, setunreadNotification] = useState(true);
     const [mobileMenu, setMobileMenu] = useState(false);
+    const [notifications, setNotifications] = useState([]);
     const notificationRef = useRef(null);
 
-    const [notifications, setNotifications] = useState([
+
-        "Vous avez un nouveau message !",
-        "Jean Paul est en attente de validation !",
-        "Vous avez un nouveau message !"
-    ]);
 
     useEffect(() => {
+        async function loadNotifications() {
+            const notifData = await getUserNotifications();
+            setNotifications(notifData || []);
+        }
+
+        loadNotifications();
         const handleClickOutside = (event) => {
             if (
                 notificationRef.current &&
@@ -109,7 +113,7 @@ function Header() {
                 ) : (
                     notifications.map((notification, index) => (
                         <div className={styles.notification} key={index}>
-                            <p>{notification}</p>
+                            <p>{notification.content}</p>
                             <button
                                 className={styles.closeBtn}
                                 onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}

src/utils/getUserNotifications.js

@@ -0,0 +1,21 @@
+export default async function getUserNotifications() {
+    try {
+        const response = await fetch(
+            'http://localhost:8000/api/users/1/notifications',
+            {
+                method: 'GET',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json'
+                }
+            }
+        );
+        const data = await response.json();
+        return data.data;
+
+    } catch (err) {
+        console.error("Erreur :", err);
+        return null;
+    }
+}