Merge branch 'features/dynamicRegister' into 'dev'

Features/dynamicregister

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

src/components/Header/Header.jsx

@@ -10,6 +10,7 @@ import { userNotificationsListener } from "../../utils/echo/listeners/userNotifi
 import NotificationCard from "../NotificationCard/NotificationCard.jsx";
 import { EventContext } from "../../contexts/events/EventContext.js";
 import {AuthContext} from "../../contexts/auth/AuthContext.js";
+import { PendingMembersContext } from "../../contexts/pendingMembers/PendingMembersContext";
 
 function Header() {
 
@@ -20,6 +21,7 @@ function Header() {
     const [mobileMenu, setMobileMenu] = useState(false);
     const [notifications, setNotifications] = useState([]);
     const notificationRef = useRef(null);
+    const { updatePendingMembers } = useContext(PendingMembersContext);
 
     useEffect(() => {
 
@@ -41,7 +43,7 @@ function Header() {
                 echoInstance = echo;
 
                 const activeChannels = [
-                    userCreatedListener(echo, user, setNotifications, setunreadNotification),
+                    userCreatedListener(echo, user, setNotifications, setunreadNotification, updatePendingMembers),
                     userNotificationsListener(echo, user, setNotifications, setunreadNotification),
                 ];
                 channelsToLeave = activeChannels.filter(name => name !== null);
@@ -86,7 +88,7 @@ function Header() {
                 }
             }
         } catch (err) {
-            console.error('Erreur suppression notification :', err);
+            console.error('Erreur pour ouvrir/fermer le menu de notifications :', err);
         }
     }
 

src/contexts/pendingMembers/PendingMembersContext.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const PendingMembersContext = createContext(null);

src/contexts/pendingMembers/PendingMembersProvider.jsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { PendingMembersContext } from "./PendingMembersContext";
+
+import getUserToValidate from "../../utils/users/getUserToValidate";
+import getUserById from "../../utils/users/getUserById";
+
+export function PendingMembersProvider({ children }) {
+
+    const [pendingMembers, setPendingMembers] = useState([]);
+
+    const updatePendingMembers = async () => {
+        const result = await getUserToValidate();
+        const userIds = result.data;
+
+        if (!userIds || userIds.length === 0) {
+            setPendingMembers([]);
+            return;
+        }
+
+        const users = await Promise.all(
+            userIds.map(id => getUserById(id))
+        );
+
+        setPendingMembers(users.map(u => u.data));
+    };
+
+    return (
+        <PendingMembersContext.Provider
+            value={{
+                pendingMembers,
+                updatePendingMembers
+            }}
+        >
+            {children}
+        </PendingMembersContext.Provider>
+    );
+}

src/main.jsx

@@ -6,16 +6,19 @@ import router from './router';
 import {AuthProvider} from "./contexts/auth/authProvider.jsx";
 import {EventProvider} from "./contexts/events/EventProvider.jsx";
 import {EventDetailProvider} from "./contexts/eventDetail/eventDetailProvider.jsx";
+import {PendingMembersProvider} from "./contexts/pendingMembers/PendingMembersProvider.jsx";
 
 
 createRoot(document.getElementById('root')).render(
     <StrictMode>
         <AuthProvider>
-            <EventProvider>
-                <EventDetailProvider>
-                    <RouterProvider router={router}/>
-                </EventDetailProvider>
-            </EventProvider>
+            <PendingMembersProvider>
+                <EventProvider>
+                    <EventDetailProvider>
+                        <RouterProvider router={router}/>
+                    </EventDetailProvider>
+                </EventProvider>
+            </PendingMembersProvider>
         </AuthProvider>
     </StrictMode>,
 )

src/pages/Admin/components/pendingMembers/PendingMembers.jsx

@@ -1,11 +1,10 @@
-import React, {useState, useEffect} from "react";
+import React, {useState, useEffect, useContext} from "react";
 import Button from "../../../../components/ui/button/button.tsx";
 import styles from "./PendingMembers.module.css";
 import Modal from "../../../../components/ui/modal/modal.tsx";
-import getUserToValidate from "../../../../utils/users/getUserToValidate.js";
-import getUserById from "../../../../utils/users/getUserById.js";
 import validateUser from "../../../../utils/users/validateUser.js";
 import deleteOtherUser from "../../../../utils/users/deleteOtherUser.js";
+import { PendingMembersContext } from "../../../../contexts/pendingMembers/PendingMembersContext";
 
 function PendingMembers() {
 
@@ -13,23 +12,10 @@ function PendingMembers() {
     const [open, setOpen] = useState(false);
     const [message, setMessage] = useState("");
     const [title, setTitle] = useState("");
-
-    const [pendingMembers, setPendingMembers] = useState([]);
-
-    const fetchUsers = async () => {
-
-        const result = await getUserToValidate();
-        const userIds = result.data;
-
-        if (userIds && userIds.length > 0) {
-            const users = await Promise.all(userIds.map(id => getUserById(id)));
-            const usersData = users.map(u => u.data);
-            setPendingMembers(usersData);
-        } else setPendingMembers([]);
-    }
+    const { pendingMembers, updatePendingMembers } = useContext(PendingMembersContext);
 
     useEffect(() => {
-        fetchUsers();
+        updatePendingMembers();
     }, []);
 
     const handleValidate = async (id, name) => {
@@ -38,14 +24,12 @@ function PendingMembers() {
         if(result.status === 200) {
             setTitle("Utilisateur accepté avec succès")
             setMessage(`L'utilisateur ${name} a été accepté avec succès`)
-            setOpen(true);
         } else {
             setTitle("Erreur")
             setMessage(`Une erreur est survenue durant l'acceptation de l'utilisateur ${name}`)
-            setOpen(true);
         }
-
-        fetchUsers();
+        setOpen(true);
+        updatePendingMembers();
     }
 
     const handleRefuse = async (id, name) => {
@@ -61,7 +45,7 @@ function PendingMembers() {
             setOpen(true);
         }
 
-        fetchUsers();
+        updatePendingMembers();
     }
 
     return (

src/utils/echo/listeners/userCreatedListener.js

@@ -1,4 +1,4 @@
-export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification) => {
+export const userCreatedListener = (echo, userData, setNotifications, setunreadNotification, updatePendingMembers) => {
     if (userData.isAdmin) {
         const channelName = "users.registration";
         echo.private(channelName)
@@ -11,6 +11,7 @@ export const userCreatedListener = (echo, userData, setNotifications, setunreadN
                 };
                 setNotifications(prev => [newNotification, ...prev]);
                 setunreadNotification(true);
+                updatePendingMembers();
             });
         return channelName;
     }