From 2dc6c75b880746c869acd6eaf4a1383429496070 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Wed, 20 Nov 2024 12:33:42 +0100
Subject: [PATCH] fix the timeout issue in notifcations wrapper

---
 .../LayoutProvider/NotificationsProvider.tsx  |  6 ------
 .../NotificationSlot/NotificationSlot.tsx     | 15 ++++++-------
 .../NotificationSlot/NotificationWrapper.tsx  | 21 +++++++++++++++++++
 .../components/NotificationSlot/style.css.ts  |  5 +++++
 4 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx

diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/NotificationsProvider.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/NotificationsProvider.tsx
index c5dba93ad6..a6f183a054 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/NotificationsProvider.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/LayoutProvider/NotificationsProvider.tsx
@@ -51,12 +51,6 @@ export const NotificationsProvider: FC<INotificationsProvider> = ({
     };
 
     setNotifications((v) => [...v, notificationProps]);
-
-    if (!notificationProps.isDismissable) {
-      setTimeout(() => {
-        removeNotification(notificationProps);
-      }, 12000);
-    }
   };
 
   return (
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx
index 651fe687e1..80a396c3e9 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationSlot.tsx
@@ -1,11 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 import { useNotifications } from '../LayoutProvider';
-import {
-  Notification,
-  NotificationHeading,
-  Stack,
-} from './../../../../components';
+import { NotificationHeading, Stack } from './../../../../components';
+import { NotificationWrapper } from './NotificationWrapper';
 import { notificationsSlotClass } from './style.css';
 
 export const NotificationSlot: FC = () => {
@@ -14,13 +11,13 @@ export const NotificationSlot: FC = () => {
   console.log(reversedNotifications);
   return (
     <Stack className={notificationsSlotClass}>
-      {reversedNotifications.slice(0, 3).map((props, idx) => {
-        const { label, message, ...rest } = props;
+      {reversedNotifications.map((props) => {
+        const { label, message } = props;
         return (
-          <Notification key={idx} {...rest}>
+          <NotificationWrapper key={props.id} {...props}>
             {label && <NotificationHeading>{label}</NotificationHeading>}
             {message}
-          </Notification>
+          </NotificationWrapper>
         );
       })}
     </Stack>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx
new file mode 100644
index 0000000000..e3e1ff5a55
--- /dev/null
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/NotificationWrapper.tsx
@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import React, { useEffect } from 'react';
+import type { INotificationMinimizedProps } from '../LayoutProvider/NotificationsProvider';
+import { useNotifications } from '../LayoutProvider/NotificationsProvider';
+import { Notification } from './../../../../components';
+
+type IProps = PropsWithChildren & INotificationMinimizedProps;
+
+export const NotificationWrapper: FC<IProps> = ({ children, ...props }) => {
+  const { removeNotification } = useNotifications();
+
+  useEffect(() => {
+    if (!props.isDismissable) {
+      setTimeout(() => {
+        removeNotification(props);
+      }, 12000);
+    }
+  }, []);
+
+  return <Notification {...props}>{children}</Notification>;
+};
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/style.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/style.css.ts
index aa33b99c00..df53bc59b7 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/style.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/components/NotificationSlot/style.css.ts
@@ -1,3 +1,4 @@
+import { globalStyle } from '@vanilla-extract/css';
 import { atoms, responsiveStyle, style, token } from './../../../../styles';
 
 export const notificationsSlotClass = style([
@@ -19,3 +20,7 @@ export const notificationsSlotClass = style([
     },
   }),
 ]);
+
+globalStyle(`${notificationsSlotClass} > *:nth-child(n+4)`, {
+  display: 'none',
+});