odigos-io · BenElferink · Nov 6, 2024 · Oct 27, 2024 · Oct 27, 2024 · Oct 28, 2024
diff --git a/frontend/webapp/app/layout.tsx b/frontend/webapp/app/layout.tsx
@@ -4,11 +4,9 @@ import React from 'react';
 import { useSSE } from '@/hooks';
 import theme from '@/styles/theme';
 import { ApolloWrapper } from '@/lib';
+import { ToastList } from '@/components';
 import { ThemeProvider } from 'styled-components';
-import { NotificationManager } from '@/components';
-import ReduxProvider from '@/store/redux-provider';
 import { QueryClient, QueryClientProvider } from 'react-query';
-// import { ThemeProviderWrapper } from '@keyval-dev/design-system';
 
 const LAYOUT_STYLE: React.CSSProperties = {
   margin: 0,
@@ -18,34 +16,30 @@ const LAYOUT_STYLE: React.CSSProperties = {
   height: '100vh',
 };
 
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const queryClient = new QueryClient({
-    defaultOptions: {
-      queries: {
-        staleTime: 10000,
-        refetchOnWindowFocus: false,
-      },
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 10000,
+      refetchOnWindowFocus: false,
     },
-  });
+  },
+});
 
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   useSSE();
 
   return (
     <html lang='en'>
-      <ReduxProvider>
-        <ApolloWrapper>
-          <QueryClientProvider client={queryClient}>
-            <ThemeProvider theme={theme}>
-              {/* <ThemeProviderWrapper> */}
-              <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
-                {children}
-                <NotificationManager />
-              </body>
-              {/* </ThemeProviderWrapper> */}
-            </ThemeProvider>
-          </QueryClientProvider>
-        </ApolloWrapper>
-      </ReduxProvider>
+      <ApolloWrapper>
+        <QueryClientProvider client={queryClient}>
+          <ThemeProvider theme={theme}>
+            <body suppressHydrationWarning={true} style={LAYOUT_STYLE}>
+              {children}
+              <ToastList />
+            </body>
+          </ThemeProvider>
+        </QueryClientProvider>
+      </ApolloWrapper>
     </html>
   );
 }
diff --git a/frontend/webapp/components/index.ts b/frontend/webapp/components/index.ts
@@ -2,8 +2,8 @@ export * from './setup';
 export * from './lists';
 export * from './overview';
 export * from './common';
-export * from './notification/notification-manager';
-export * from './notification/notification-list';
 export * from './destinations';
 export * from './main';
 export * from './modals';
+export * from './notification/notification-list'; // old
+export * from './notification/toast-list'; // new
diff --git a/frontend/webapp/components/notification/notification-list-item.tsx b/frontend/webapp/components/notification/notification-list-item.tsx
@@ -5,20 +5,8 @@ import { ROUTES, timeAgo } from '@/utils';
 import { useRouter } from 'next/navigation';
 import { getIcon } from './notification-icon';
 import { KeyvalLink, KeyvalText } from '@/design.system';
-import {
-  NotificationButtonContainer,
-  NotificationDetailsWrapper,
-} from './notification-container';
-interface NotificationListItemProps {
-  id: string;
-  message: string;
-  type: 'success' | 'error' | 'info';
-  seen: boolean;
-  title?: string;
-  crdType?: string;
-  time?: string;
-  target?: string;
-}
+import { NotificationButtonContainer, NotificationDetailsWrapper } from './notification-container';
+import { Notification } from '@/types';
 
 const NotificationItemContainer = styled.div<{ seen: boolean }>`
   border-bottom: 1px solid ${theme.colors.blue_grey};
@@ -27,8 +15,7 @@ const NotificationItemContainer = styled.div<{ seen: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ seen }) =>
-    seen ? theme.colors.light_dark : theme.colors.dark};
+  background-color: ${({ seen }) => (seen ? theme.colors.light_dark : theme.colors.dark)};
 
   &:hover {
     background-color: ${theme.colors.dark};
@@ -41,15 +28,7 @@ const NotificationContent = styled.div`
   gap: 8px;
 `;
 
-const NotificationListItem: React.FC<NotificationListItemProps> = ({
-  message,
-  type,
-  seen,
-  title,
-  crdType,
-  target,
-  time,
-}) => {
+const NotificationListItem: React.FC<Notification> = ({ message, type, seen, title, crdType, target, time }) => {
   const router = useRouter();
 
   function onDetailsClick() {
@@ -83,11 +62,7 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
           )}
         </NotificationDetailsWrapper>
       </NotificationContent>
-      <NotificationButtonContainer>
-        {!!target && (
-          <KeyvalLink fontSize={12} value="Details" onClick={onDetailsClick} />
-        )}
-      </NotificationButtonContainer>
+      <NotificationButtonContainer>{!!target && <KeyvalLink fontSize={12} value='Details' onClick={onDetailsClick} />}</NotificationButtonContainer>
     </NotificationItemContainer>
   );
 };

diff --git a/frontend/webapp/components/notification/notification-list.tsx b/frontend/webapp/components/notification/notification-list.tsx
@@ -1,13 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { RootState, markAsSeen } from '@/store';
-
 import styled from 'styled-components';
 import theme from '@/styles/palette';
 import { BellIcon } from '@keyval-dev/design-system';
 import { KeyvalText } from '@/design.system';
 import { useOnClickOutside } from '@/hooks';
 import NotificationListItem from './notification-list-item';
+import { useNotificationStore } from '@/store';
 
 const NotificationListContainer = styled.div`
   position: absolute;
@@ -58,18 +56,12 @@ const NotificationHeader = styled.div`
 
 export const NotificationList: React.FC = () => {
   const [showNotifications, setShowNotifications] = useState(false);
+  const { notifications, markAsSeen } = useNotificationStore();
 
-  const notifications = useSelector(
-    (state: RootState) => state.notification.notifications
-  );
-
-  const dispatch = useDispatch();
   const containerRef = useRef(null);
   const isInitialRender = useRef(true);
   useOnClickOutside(containerRef, () => setShowNotifications(false));
-  const unseenCount = notifications.filter(
-    (notification) => !notification.seen
-  ).length;
+  const unseenCount = notifications.filter((notification) => !notification.seen).length;
 
   useEffect(() => {
     if (isInitialRender.current) {
@@ -85,19 +77,15 @@ export const NotificationList: React.FC = () => {
   function markAllAsSeen() {
     notifications.forEach((notification) => {
       if (!notification.seen) {
-        dispatch(markAsSeen(notification.id));
+        markAsSeen(notification.id);
       }
     });
   }
 
   return notifications.length > 0 ? (
     <div ref={containerRef}>
       <BellIconWrapper>
-        <BellIcon
-          style={{ cursor: 'pointer' }}
-          size={20}
-          onClick={() => setShowNotifications(!showNotifications)}
-        />
+        <BellIcon style={{ cursor: 'pointer' }} size={20} onClick={() => setShowNotifications(!showNotifications)} />
         {unseenCount > 0 && (
           <NotificationBadge>
             <KeyvalText size={10}>{unseenCount}</KeyvalText>

diff --git a/frontend/webapp/components/notification/notification-manager.tsx b/frontend/webapp/components/notification/notification-manager.tsx
diff --git a/frontend/webapp/components/notification/notification.tsx b/frontend/webapp/components/notification/notification.tsx
diff --git a/frontend/webapp/components/notification/toast-list.tsx b/frontend/webapp/components/notification/toast-list.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import Toast from './toast';
+import styled from 'styled-components';
+import { useNotificationStore } from '@/store';
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+`;
+
+export const ToastList: React.FC = () => {
+  const { notifications } = useNotificationStore();
+
+  return (
+    <Container>
+      {notifications
+        .filter(({ dismissed }) => !dismissed)
+        .map((notif) => (
+          <Toast key={`toast-${notif.id}`} {...notif} />
+        ))}
+    </Container>
+  );
+};