Merge pull request #1478 from bcgov/feat/kevin-1441

feat: toast on 400+ errors
bcgov · Dec 18, 2024 · d425239 · d425239
2 parents 04a7a3b + 1ee6405
commit d425239
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 2 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -62,6 +62,7 @@
     "material-ui-popup-state": "^5.0.10",
     "moment": "^2.30.1",
     "mui-daterange-picker-plus": "^1.0.4",
+    "notistack": "^3.0.1",
     "papaparse": "^5.4.1",
     "pretty-bytes": "^6.1.1",
     "quill": "^2.0.2",

diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
@@ -8,6 +8,7 @@ import { KeycloakProvider } from '@/components/KeycloakProvider'
 import { getKeycloak } from '@/utils/keycloak'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'
+import { SnackbarProvider } from 'notistack'
 
 const queryClient = new QueryClient()
 const keycloak = getKeycloak()
@@ -20,8 +21,10 @@ if (root) {
         <QueryClientProvider client={queryClient}>
           <ThemeProvider theme={theme}>
             <LocalizationProvider dateAdapter={AdapterDateFns}>
-              <CssBaseline />
-              <App />
+              <SnackbarProvider>
+                <CssBaseline />
+                <App />
+              </SnackbarProvider>
             </LocalizationProvider>
           </ThemeProvider>
         </QueryClientProvider>

diff --git a/frontend/src/services/useApiService.js b/frontend/src/services/useApiService.js
@@ -2,9 +2,11 @@ import { useMemo } from 'react'
 import axios from 'axios'
 import { useKeycloak } from '@react-keycloak/web'
 import { CONFIG } from '@/constants/config'
+import { useSnackbar } from 'notistack'
 
 export const useApiService = (opts = {}) => {
   const { keycloak } = useKeycloak()
+  const { enqueueSnackbar } = useSnackbar()
 
   // useMemo to memoize the apiService instance
   const apiService = useMemo(() => {
@@ -25,6 +27,24 @@ export const useApiService = (opts = {}) => {
       }
     )
 
+    // Add response interceptor
+    instance.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response?.status >= 400) {
+          console.error(
+            'API Error:',
+            error.response.status,
+            error.response.data
+          )
+          enqueueSnackbar(`${error.response.status} error`, {
+            autoHideDuration: 5000,
+            variant: 'error'
+          })
+        }
+      }
+    )
+
     // Download method
     instance.download = async (url, params = {}) => {
       try {