diff --git a/client/src/app/components/Notifications.tsx b/client/src/app/components/Notifications.tsx index 2d51d05f4e..f74aa0a59b 100644 --- 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 ( - {appContext.notifications.map((notification) => { + {appContext.notifications.map((notification, index) => { return ( { /> ), })} - timeout={notification.timeout ? notification.timeout : 4000} > {notification.message} diff --git a/client/src/app/components/NotificationsContext.tsx b/client/src/app/components/NotificationsContext.tsx index e21a8d35c3..51e8ac0979 100644 --- 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) => {