feat(client): Toast Provider to show Toasts from higher on the DOM tree (#1110)

Author: danny-avila

client/src/App.jsx

@@ -4,6 +4,7 @@ import { RouterProvider } from 'react-router-dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { QueryClient, QueryClientProvider, QueryCache } from '@tanstack/react-query';
 import { ScreenshotProvider, ThemeProvider, useApiErrorBoundary } from './hooks';
+import { ToastProvider } from './Providers';
 import Toast from './components/ui/Toast';
 import { router } from './routes';
 
@@ -25,10 +26,12 @@ const App = () => {
       <RecoilRoot>
         <ThemeProvider>
           <RadixToast.Provider>
-            <RouterProvider router={router} />
-            <ReactQueryDevtools initialIsOpen={false} position="top-right" />
-            <Toast />
-            <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-[60] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
+            <ToastProvider>
+              <RouterProvider router={router} />
+              <ReactQueryDevtools initialIsOpen={false} position="top-right" />
+              <Toast />
+              <RadixToast.Viewport className="pointer-events-none fixed inset-0 z-[60] mx-auto my-2 flex max-w-[560px] flex-col items-stretch justify-start md:pb-5" />
+            </ToastProvider>
           </RadixToast.Provider>
         </ThemeProvider>
       </RecoilRoot>

client/src/Providers/ToastContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+import type { TShowToast } from '~/common';
+import { useToast } from '~/hooks';
+
+type ToastContextType = {
+  showToast: ({ message, severity, showIcon }: TShowToast) => void;
+};
+
+export const ToastContext = createContext<ToastContextType>({
+  showToast: () => ({}),
+});
+
+export default function ToastProvider({ children }) {
+  const { showToast } = useToast();
+
+  return <ToastContext.Provider value={{ showToast }}>{children}</ToastContext.Provider>;
+}

client/src/Providers/index.ts

@@ -0,0 +1,2 @@
+export { default as ToastProvider } from './ToastContext';
+export * from './ToastContext';

client/src/common/types.ts

@@ -28,6 +28,12 @@ export enum NotificationSeverity {
   ERROR = 'error',
 }
 
+export type TShowToast = {
+  message: string;
+  severity?: NotificationSeverity;
+  showIcon?: boolean;
+};
+
 export type TBaseSettingsProps = {
   conversation: TConversation | TPreset | null;
   className?: string;

client/src/hooks/useToast.ts

@@ -1,5 +1,6 @@
-import { useRef, useEffect } from 'react';
 import { useRecoilState } from 'recoil';
+import { useRef, useEffect } from 'react';
+import type { TShowToast } from '~/common';
 import { NotificationSeverity } from '~/common';
 import store from '~/store';
 
@@ -15,12 +16,6 @@ export default function useToast(timeoutDuration = 100) {
     };
   }, []);
 
-  type TShowToast = {
-    message: string;
-    severity?: NotificationSeverity;
-    showIcon?: boolean;
-  };
-
   const showToast = ({
     message,
     severity = NotificationSeverity.SUCCESS,