🐛 Extend notification delay & fix broken delay customization

konveyor · Feb 16, 2024 · 54355ae · 54355ae
1 parent 6217116
commit 54355ae
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/client/src/app/components/Notifications.tsx b/client/src/app/components/Notifications.tsx
@@ -10,12 +10,12 @@ export const Notifications: React.FunctionComponent = () => {
   const appContext = React.useContext(NotificationsContext);
   return (
     <AlertGroup isToast aria-live="polite">
-      {appContext.notifications.map((notification) => {
+      {appContext.notifications.map((notification, index) => {
         return (
           <Alert
             title={notification.title}
             variant={notification.variant}
-            key={notification.title}
+            key={`${notification.title}-${index}`}
             {...(!notification.hideCloseButton && {
               actionClose: (
                 <AlertActionCloseButton
@@ -25,7 +25,6 @@ export const Notifications: React.FunctionComponent = () => {
                 />
               ),
             })}
-            timeout={notification.timeout ? notification.timeout : 4000}
           >
             {notification.message}
           </Alert>

diff --git a/client/src/app/components/NotificationsContext.tsx b/client/src/app/components/NotificationsContext.tsx
@@ -14,7 +14,10 @@ interface INotificationsProvider {
 }
 
 interface INotificationsContext {
-  pushNotification: (notification: INotification) => void;
+  pushNotification: (
+    notification: INotification,
+    clearNotificationDelay?: number
+  ) => void;
   dismissNotification: (key: string) => void;
   notifications: INotification[];
 }
@@ -38,11 +41,18 @@ export const NotificationsProvider: React.FunctionComponent<
     notification: INotification,
     clearNotificationDelay?: number
   ) => {
-    setNotifications([
-      ...notifications,
+    setNotifications((prevNotifications) => [
+      ...prevNotifications,
       { ...notificationDefault, ...notification },
     ]);
-    setTimeout(() => setNotifications([]), clearNotificationDelay || 10000);
+
+    setTimeout(() => {
+      setNotifications((prevNotifications) => {
+        return prevNotifications.filter(
+          (notif) => notif.title !== notification.title
+        );
+      });
+    }, clearNotificationDelay || 8000);
   };
 
   const dismissNotification = (title: string) => {