multiplex user notifications over a single private channel

src/components/Header/Header.jsx

@@ -1,13 +1,17 @@
-import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
 import {useContext, useEffect, useRef, useState} from "react";
+import {AuthContext} from "../../contexts/auth/AuthContext.js";
+
+import styles from "./Header.module.css"
+
 import getUserNotifications from "../../utils/notifications/getUserNotifications.js";
 import deleteNotificationUser from "../../utils/notifications/deleteNotificationUser.js";
 import initEcho from "../../utils/echo/initEcho.js"
 import readNotifications from "../../utils/notifications/readNotifications.js";
-import {AuthContext} from "../../contexts/auth/AuthContext.js";
 import getUser from "../../utils/getUser.js";
 import { userCreatedListener } from "../../utils/echo/listeners/userCreatedListener";
+import { userNotificationsListener } from "../../utils/echo/listeners/userNotificationsListener.js";
+
 
 
 function Header() {
@@ -39,6 +43,7 @@ function Header() {
 
                 const activeChannels = [
                     userCreatedListener(echo, userData, setNotifications, setunreadNotification),
+                    userNotificationsListener(echo, userData, setNotifications, setunreadNotification),
                 ];
                 channelsToLeave = activeChannels.filter(name => name !== null);
 

src/utils/echo/listeners/userNotificationsListener.js

@@ -0,0 +1,43 @@
+export const userNotificationsListener = (echo, userData, setNotifications, setunreadNotification) => {
+    if (!userData?.id) return null;
+
+    const channelName = `user.${userData.id}`;
+
+    return echo.private(channelName)
+        .listen('.event.participation.cancelled', (event) => {
+            const newNotification = {
+                id: Date.now(),
+                content: `L'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
+                pivot: { unread: 1 }
+            };
+            setNotifications(prev => [newNotification, ...prev]);
+            setunreadNotification(true);
+        })
+        .listen(`.task.participation.cancelled`, (event) => {
+            const newNotification = {
+                id: Date.now(),
+                content: `La tâche ${event.task.name} de l'événement ${event.event.name} a été supprimé ! Vous n'y participez donc plus.`,
+                pivot: { unread: 1 }
+            };
+            setNotifications(prev => [newNotification, ...prev]);
+            setunreadNotification(true);
+        })
+        .listen('.volunteer.assigned.to.task', (event) => {
+            const newNotification = {
+                id: Date.now(),
+                content: `Vous avez été assigné à la tâche ${event.task.name} de l'événement ${event.event.name}`,
+                pivot: { unread: 1 }
+            };
+            setNotifications(prev => [newNotification, ...prev]);
+            setunreadNotification(true);
+        })
+        .listen('.volunteer.unassigned.to.task', (event) => {
+            const newNotification = {
+                id: Date.now(),
+                content: `Vous avez été désassigné de la tâche ${event.task.name} de l'événement ${event.event.name}`,
+                pivot: { unread: 1 }
+            };
+            setNotifications(prev => [newNotification, ...prev]);
+            setunreadNotification(true);
+        });
+};