apps/frontend/app/hooks/ResponseHelper.tsx

@@ -1,11 +1,10 @@
-import { Text } from '@radix-ui/themes';
 import { AxiosError } from 'axios';
 import { useLocation, useNavigate } from 'react-router';
-import { toast } from 'react-toastify/unstyled';
 import { SearchParamKeys } from '../lib/constants';
 import { useQueryMessage } from './useQueryMessage';
 import { QueryMessageCode, QueryMessageType } from '../lib/QueryMessages';
 import { useCallback } from 'react';
+import { displayForbiddenErrorToast, displayNetworkErrorToast, displayUnexpectedErrorToast } from '../lib/toasts';
 
 export enum ResponseErrorToastId {
   NetworkError = 'network-error',
@@ -33,22 +32,7 @@ export function useResponseErrorHandler(): {
   const defaultResponseErrorHandler = useCallback(
     (err: unknown, options?: DefaultResponseErrorHandlerOptions): boolean => {
       if (!(err instanceof AxiosError) && !options?.disableHandleUnexpectedErrors) {
-        toast.error(
+        displayUnexpectedErrorToast();
-          <div>
-            <Text weight="bold">Unexpected Error:</Text>
-            <br /> An unexpected error occurred. Please try again later.
-          </div>,
-          {
-            position: 'top-center',
-            autoClose: false,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: false,
-            progress: undefined,
-            theme: 'colored',
-          }
-        );
         return true;
       }
 
@@ -60,23 +44,7 @@ export function useResponseErrorHandler(): {
       }
 
       if (err.message === 'Network Error') {
-        toast.error(
+        displayNetworkErrorToast();
-          <div>
-            <Text weight="bold">Network Error:</Text>
-            <br /> Unable to reach the server. Please check your internet connection and try again.
-          </div>,
-          {
-            toastId: ResponseErrorToastId.NetworkError,
-            position: 'top-center',
-            autoClose: false,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: false,
-            progress: undefined,
-            theme: 'colored',
-          }
-        );
         return true;
       }
 
@@ -92,22 +60,7 @@ export function useResponseErrorHandler(): {
       }
 
       if (err.status === 403) {
-        toast.error(
+        displayForbiddenErrorToast();
-          <div>
-            <Text weight="bold">Forbidden:</Text>
-            <br /> You do not have permission to perform this action.
-          </div>,
-          {
-            position: 'top-center',
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: false,
-            progress: undefined,
-            theme: 'colored',
-          }
-        );
         return true;
       }
 

apps/frontend/app/lib/toasts.tsx

@@ -0,0 +1,64 @@
+import { toast, type ToastOptions } from 'react-toastify/unstyled';
+import { Text } from '@radix-ui/themes';
+import { ResponseErrorToastId } from '../hooks/ResponseHelper';
+
+export const displayUnexpectedErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Unexpected Error:</Text>
+      <br /> An unexpected error occurred. Please try again later.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayNetworkErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Network Error:</Text>
+      <br /> Unable to reach the server. Please check your internet connection and try again.
+    </div>,
+    {
+      toastId: ResponseErrorToastId.NetworkError,
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayForbiddenErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Forbidden:</Text>
+      <br /> You do not have permission to perform this action.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};