From 5cafe0900c1264f6ad0eafac1ca59a1c2c0c762c Mon Sep 17 00:00:00 2001
From: Danny Avila <110412045+danny-avila@users.noreply.github.com>
Date: Fri, 27 Oct 2023 17:10:07 -0400
Subject: [PATCH] feat(client): Toast Provider to show Toasts from higher on
 the DOM tree (#1110)

---
 client/src/App.jsx                    | 11 +++++++----
 client/src/Providers/ToastContext.tsx | 17 +++++++++++++++++
 client/src/Providers/index.ts         |  2 ++
 client/src/common/types.ts            |  6 ++++++
 client/src/hooks/useToast.ts          |  9 ++-------
 5 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 client/src/Providers/ToastContext.tsx
 create mode 100644 client/src/Providers/index.ts

diff --git a/client/src/App.jsx b/client/src/App.jsx
index 8eb316b15..a2bb729c6 100644
--- a/client/src/App.jsx
+++ b/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>
diff --git a/client/src/Providers/ToastContext.tsx b/client/src/Providers/ToastContext.tsx
new file mode 100644
index 000000000..88229f9c0
--- /dev/null
+++ b/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>;
+}
diff --git a/client/src/Providers/index.ts b/client/src/Providers/index.ts
new file mode 100644
index 000000000..41cb62ae9
--- /dev/null
+++ b/client/src/Providers/index.ts
@@ -0,0 +1,2 @@
+export { default as ToastProvider } from './ToastContext';
+export * from './ToastContext';
diff --git a/client/src/common/types.ts b/client/src/common/types.ts
index e9cdadf15..5397cc2d8 100644
--- a/client/src/common/types.ts
+++ b/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;
diff --git a/client/src/hooks/useToast.ts b/client/src/hooks/useToast.ts
index 10792c6e5..455f9f0ff 100644
--- a/client/src/hooks/useToast.ts
+++ b/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,