[GEN-1624]: refactor existing components in preparation for notifications

frontend/webapp/app/page.tsx

@@ -1,46 +1,39 @@
 'use client';
 import { useEffect } from 'react';
-import { useConfig } from '@/hooks';
 import { ROUTES, CONFIG } from '@/utils';
 import { useRouter } from 'next/navigation';
-import { addNotification, store } from '@/store';
+import { useConfig, useNotify } from '@/hooks';
 import { Loader } from '@keyval-dev/design-system';
 
 export default function App() {
   const router = useRouter();
+  const notify = useNotify();
   const { data, error } = useConfig();
 
   useEffect(() => {
-    data && renderCurrentPage();
-  }, [data, error]);
-
-  useEffect(() => {
-    if (!error) return;
-    store.dispatch(
-      addNotification({
-        id: '1',
+    if (error) {
+      notify({
         message: 'An error occurred',
         title: 'Error',
         type: 'error',
         target: 'notification',
         crdType: 'notification',
-      })
-    );
-    router.push(ROUTES.OVERVIEW);
-  }, [error]);
+      });
 
-  function renderCurrentPage() {
-    const { installation } = data;
+      router.push(ROUTES.OVERVIEW);
+    } else if (data) {
+      const { installation } = data;
 
-    switch (installation) {
-      case CONFIG.NEW:
-      case CONFIG.APPS_SELECTED:
-        router.push(ROUTES.CHOOSE_SOURCES);
-        break;
-      case CONFIG.FINISHED:
-        router.push(ROUTES.OVERVIEW);
+      switch (installation) {
+        case CONFIG.NEW:
+        case CONFIG.APPS_SELECTED:
+          router.push(ROUTES.CHOOSE_SOURCES);
+          break;
+        case CONFIG.FINISHED:
+          router.push(ROUTES.OVERVIEW);
+      }
     }
-  }
+  }, [data, error]);
 
   return <Loader />;
 }

frontend/webapp/containers/main/destinations/add-destination/connect-destination-modal-body/connection-notification.tsx

@@ -1,25 +1,16 @@
 import { NotificationNote } from '@/reuseable-components';
 import styled from 'styled-components';
 
-export const ConnectionNotification = ({
-  showConnectionError,
-  destination,
-}) => (
+export const ConnectionNotification = ({ showConnectionError, destination }) => (
   <>
     {showConnectionError && (
       <NotificationNoteWrapper>
-        <NotificationNote
-          type="error"
-          text="Connection failed. Please check your input and try again."
-        />
+        <NotificationNote type='error' message='Connection failed. Please check your input and try again.' />
       </NotificationNoteWrapper>
     )}
     {destination?.fields && !showConnectionError && (
       <NotificationNoteWrapper>
-        <NotificationNote
-          type="default"
-          text={`Odigos autocompleted ${destination.displayName} connection details.`}
-        />
+        <NotificationNote type='default' message={`Odigos autocompleted ${destination.displayName} connection details.`} />
       </NotificationNoteWrapper>
     )}
   </>

frontend/webapp/containers/main/destinations/add-destination/index.tsx

@@ -80,7 +80,7 @@ export function ChooseDestinationContainer() {
           <NotificationNoteWrapper>
             <NotificationNote
               type={'warning'}
-              text={'No sources selected.'}
+              message={'No sources selected.'}
               action={{
                 label: 'Select sources',
                 onClick: () => router.push('/choose-sources'),

frontend/webapp/containers/main/instrumentation-rules/add-rule-modal/index.tsx

@@ -70,7 +70,7 @@ export const AddRuleModal: React.FC<Props> = ({ isOpen, onClose }) => {
         />
         <NotificationNote
           type='info'
-          text='We currently support one rule. We’ll be adding new rule types in the near future.'
+          message='We currently support one rule. We’ll be adding new rule types in the near future.'
           style={{ marginTop: '24px' }}
         />
         <AutocompleteInput

frontend/webapp/hooks/useSSE.ts

@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { API } from '@/utils';
-import { addNotification, store } from '@/store';
+import { useNotify } from './useNotify';
 
 export function useSSE() {
+  const notify = useNotify();
   const eventBuffer = useRef({});
   const [retryCount, setRetryCount] = useState(0);
   const maxRetries = 10;
@@ -25,10 +26,7 @@ export function useSSE() {
         };
 
         // Check if the event is already in the buffer
-        if (
-          eventBuffer.current[key] &&
-          eventBuffer.current[key].id > Date.now() - 2000
-        ) {
+        if (eventBuffer.current[key] && eventBuffer.current[key].id > Date.now() - 2000) {
           eventBuffer.current[key] = notification;
           return;
         } else {
@@ -37,16 +35,13 @@ export function useSSE() {
         }
 
         // Dispatch the notification to the store
-        store.dispatch(
-          addNotification({
-            id: eventBuffer.current[key].id,
-            message: eventBuffer.current[key].message,
-            title: eventBuffer.current[key].title,
-            type: eventBuffer.current[key].type,
-            target: eventBuffer.current[key].target,
-            crdType: eventBuffer.current[key].crdType,
-          })
-        );
+        notify({
+          message: eventBuffer.current[key].message,
+          title: eventBuffer.current[key].title,
+          type: eventBuffer.current[key].type,
+          target: eventBuffer.current[key].target,
+          crdType: eventBuffer.current[key].crdType,
+        });
 
         // Reset retry count on successful connection
         setRetryCount(0);
@@ -60,31 +55,24 @@ export function useSSE() {
         setRetryCount((prevRetryCount) => {
           if (prevRetryCount < maxRetries) {
             const newRetryCount = prevRetryCount + 1;
-            const retryTimeout = Math.min(
-              10000,
-              1000 * Math.pow(2, newRetryCount)
-            );
+            const retryTimeout = Math.min(10000, 1000 * Math.pow(2, newRetryCount));
 
             setTimeout(() => {
               connect();
             }, retryTimeout);
 
             return newRetryCount;
           } else {
-            console.error(
-              'Max retries reached. Could not reconnect to EventSource.'
-            );
-            store.dispatch(
-              addNotification({
-                id: Date.now().toString(),
-                message:
-                  'Connection to the server failed. Please reboot the application.',
-                title: 'Connection Error',
-                type: 'error',
-                target: 'system',
-                crdType: 'connection',
-              })
-            );
+            console.error('Max retries reached. Could not reconnect to EventSource.');
+
+            notify({
+              message: 'Connection to the server failed. Please reboot the application.',
+              title: 'Connection Error',
+              type: 'error',
+              target: 'system',
+              crdType: 'connection',
+            });
+
             return prevRetryCount;
           }
         });

frontend/webapp/reuseable-components/divider/index.tsx

@@ -9,28 +9,14 @@ interface DividerProps {
 }
 
 const StyledDivider = styled.div<DividerProps>`
-  width: ${({ orientation, thickness }) =>
-    orientation === 'vertical' ? `${thickness}px` : '100%'};
-  height: ${({ orientation, thickness }) =>
-    orientation === 'horizontal' ? `${thickness}px` : '100%'};
+  width: ${({ orientation, thickness }) => (orientation === 'vertical' ? `${thickness}px` : '100%')};
+  height: ${({ orientation, thickness }) => (orientation === 'horizontal' ? `${thickness}px` : '100%')};
   background-color: ${({ color, theme }) => color || theme.colors.border};
-  margin: ${({ margin }) => margin || '8px 0'};
+  margin: ${({ orientation, margin }) => margin || (orientation === 'horizontal' ? '8px 0' : '0 8px')};
 `;
 
-const Divider: React.FC<DividerProps> = ({
-  thickness = 1,
-  color,
-  margin,
-  orientation = 'horizontal',
-}) => {
-  return (
-    <StyledDivider
-      thickness={thickness}
-      color={color}
-      margin={margin}
-      orientation={orientation}
-    />
-  );
+const Divider: React.FC<DividerProps> = ({ thickness = 1, color, margin, orientation = 'horizontal' }) => {
+  return <StyledDivider thickness={thickness} color={color} margin={margin} orientation={orientation} />;
 };
 
 export { Divider };

frontend/webapp/reuseable-components/nodes-data-flow/nodes/base-node.tsx

@@ -141,7 +141,7 @@ const BaseNode = ({ nodeWidth, isConnectable, data }: BaseNodeProps) => {
           {renderStatus()}
         </FooterWrapper>
       </BodyWrapper>
-      {isError ? <Image src={getStatusIcon(false)} alt='' width={20} height={20} /> : null}
+      {isError ? <Image src={getStatusIcon('error')} alt='' width={20} height={20} /> : null}
       {renderHandles()}
     </BaseNodeContainer>
   );