From 6324608a4a2bd41f43d77607d83be0e2fe01c2c0 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Tue, 10 Sep 2024 15:48:10 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(frontend)=20improve=20join=20notif?=
 =?UTF-8?q?ication=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Notifications now close if the designated user leaves the room before
the toaster duration ends. This prevents bugs and ensures cleaner UX.
---
 .../notifications/MainNotificationToast.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/features/notifications/MainNotificationToast.tsx b/src/frontend/src/features/notifications/MainNotificationToast.tsx
index cd664160..ead9ada0 100644
--- a/src/frontend/src/features/notifications/MainNotificationToast.tsx
+++ b/src/frontend/src/features/notifications/MainNotificationToast.tsx
@@ -7,7 +7,6 @@ import { Div } from '@/primitives'
 
 export const MainNotificationToast = () => {
   const room = useRoomContext()
-  // fixme - remove toast if the user quit room in the 5s she joined
   // fixme - don't show toast on mobile screen
   useEffect(() => {
     const showJoinNotification = (participant: Participant) => {
@@ -27,6 +26,23 @@ export const MainNotificationToast = () => {
     }
   }, [room])
 
+  useEffect(() => {
+    const removeJoinNotification = (participant: Participant) => {
+      const existingToast = toastQueue.visibleToasts.find(
+        (toast) =>
+          toast.content.participant === participant &&
+          toast.content.type === NotificationType.Joined
+      )
+      if (existingToast) {
+        toastQueue.close(existingToast.key)
+      }
+    }
+    room.on(RoomEvent.ParticipantDisconnected, removeJoinNotification)
+    return () => {
+      room.off(RoomEvent.ParticipantConnected, removeJoinNotification)
+    }
+  }, [room])
+
   // fixme - close all related toasters when hands are lowered remotely
   useEffect(() => {
     const decoder = new TextDecoder()