Chore/upgrade axios

package.json

@@ -48,7 +48,7 @@
     "@tiptap/pm": "^2.1.12",
     "@tiptap/react": "^2.1.12",
     "@tiptap/starter-kit": "^2.1.12",
-    "axios": "^0.21.3",
+    "axios": "^1.6.5",
     "bluebird": "^3.7.1",
     "bootstrap": "^4.6.0",
     "cheerio": "^1.0.0-rc.10",

src/hooks/directoryHooks/contactUsHooks/useGetContactUsHook.ts

@@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query"
 
 import { GET_CONTACT_US_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { ContactUsService } from "services"
 import { ContactUsDto } from "types/contactUs"
 import { useErrorToast, DEFAULT_RETRY_MSG } from "utils"
@@ -18,7 +20,9 @@ export const useGetContactUsHook = (
       onError: (err: AxiosError) => {
         errorToast({
           id: "get-contact-us-error",
-          description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Your Contact Us page details could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/directoryHooks/contactUsHooks/useUpdateContactUsHook.ts

@@ -3,9 +3,10 @@ import { UseMutationResult, useQueryClient, useMutation } from "react-query"
 
 import { GET_CONTACT_US_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { ContactUsService } from "services"
 import { ContactUsFrontMatter } from "types/contactUs"
-import { MiddlewareError } from "types/error"
 import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils"
 
 interface UpdateContactUsParams {
@@ -15,11 +16,7 @@ interface UpdateContactUsParams {
 
 export const useUpdateContactUsHook = (
   siteName: string
-): UseMutationResult<
-  void,
-  AxiosError<MiddlewareError>,
-  UpdateContactUsParams
-> => {
+): UseMutationResult<void, AxiosError, UpdateContactUsParams> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -42,10 +39,12 @@ export const useUpdateContactUsHook = (
           description: "Contact Us page updated successfully",
         })
       },
-      onError: (err: AxiosError) => {
+      onError: (err) => {
         errorToast({
           id: "update-homepage-error",
-          description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Could not update Contact Us page. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/homepageHooks/useGetHomepageHook.ts

@@ -3,6 +3,8 @@ import { UseQueryResult, useQuery } from "react-query"
 
 import { GET_HOMEPAGE_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { HomepageService } from "services"
 import { HomepageDto } from "types/homepage"
 import { useErrorToast, DEFAULT_RETRY_MSG } from "utils"
@@ -18,7 +20,9 @@ export const useGetHomepageHook = (
       onError: (err: AxiosError) => {
         errorToast({
           id: "get-homepage-error",
-          description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Your homepage could not be retrieved. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/hooks/homepageHooks/useUpdateHomepageHook.ts

@@ -8,18 +8,20 @@ import {
 
 import { GET_HOMEPAGE_KEY } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { HomepageService } from "services"
-import { MiddlewareError } from "types/error"
+import { MiddlewareErrorDto } from "types/error"
 import { HomepageDto } from "types/homepage"
 import { useSuccessToast, useErrorToast, DEFAULT_RETRY_MSG } from "utils"
 
 export const useUpdateHomepageHook = (
   siteName: string,
   mutationOptions?: Omit<
-    UseMutationOptions<void, AxiosError<MiddlewareError>, HomepageDto>,
+    UseMutationOptions<void, AxiosError<MiddlewareErrorDto>, HomepageDto>,
     "mutationFn" | "mutationKey"
   >
-): UseMutationResult<void, AxiosError<MiddlewareError>, HomepageDto> => {
+): UseMutationResult<void, AxiosError<MiddlewareErrorDto>, HomepageDto> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -44,7 +46,9 @@ export const useUpdateHomepageHook = (
         if (err.response?.status !== 409) {
           errorToast({
             id: "update-homepage-error",
-            description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data?.message}`,
+            description: `Could not update homepage. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+              err
+            )}`,
           })
         }
         if (mutationOptions?.onError)

src/hooks/navHooks/useUpdateNavHook.ts

@@ -8,8 +8,10 @@ import {
   RESOURCE_ROOM_NAME_KEY,
 } from "constants/queryKeys"
 
+import { getAxiosErrorMessage } from "utils/axios"
+
 import { NavService } from "services"
-import { MiddlewareError } from "types/error"
+import { MiddlewareErrorDto } from "types/error"
 import {
   CollectionNav,
   NavDto,
@@ -27,7 +29,7 @@ export interface UpdateNavParams {
 
 export const useUpdateNavHook = (
   siteName: string
-): UseMutationResult<void, AxiosError<MiddlewareError>, UpdateNavParams> => {
+): UseMutationResult<void, AxiosError<MiddlewareErrorDto>, UpdateNavParams> => {
   const queryClient = useQueryClient()
   const successToast = useSuccessToast()
   const errorToast = useErrorToast()
@@ -56,10 +58,12 @@ export const useUpdateNavHook = (
           description: "Navigation bar updated successfully",
         })
       },
-      onError: (err: AxiosError) => {
+      onError: (err: AxiosError<MiddlewareErrorDto>) => {
         errorToast({
           id: "update-nav-error",
-          description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${err.response?.data.error.message}`,
+          description: `Could not update navigation bar. ${DEFAULT_RETRY_MSG}. Error: ${getAxiosErrorMessage(
+            err
+          )}`,
         })
       },
     }

src/utils/axios.ts

@@ -1,6 +1,6 @@
 import { AxiosError } from "axios"
 
-import { ErrorDto, IsomerErrorDto } from "types/error"
+import { ErrorDto, IsomerErrorDto, MiddlewareErrorDto } from "types/error"
 import { DEFAULT_RETRY_MSG } from "utils"
 
 export const isAxiosError = (err: unknown): err is AxiosError => {
@@ -25,8 +25,18 @@ const isIsomerExternalError = (
   )
 }
 
+const isIsomerBackendMiddlewareError = (
+  err: AxiosError<unknown>
+): err is AxiosError<MiddlewareErrorDto> => {
+  return !!(err as AxiosError<MiddlewareErrorDto>).response?.data.error.message
+}
+
 export const getAxiosErrorMessage = (
-  error: null | AxiosError<ErrorDto> | AxiosError,
+  error:
+    | null
+    | AxiosError<ErrorDto>
+    | AxiosError<MiddlewareErrorDto>
+    | AxiosError,
   defaultErrorMessage = DEFAULT_RETRY_MSG
 ): string => {
   if (!error) return ""
@@ -35,9 +45,12 @@ export const getAxiosErrorMessage = (
     return `${error.response?.data.error?.code}: ${error.response?.data.error?.message}`
   }
 
+  if (isIsomerBackendMiddlewareError(error)) {
+    return error.response?.data?.error?.message || defaultErrorMessage
+  }
   if (isBackendError(error)) {
     return error.response?.data.message || defaultErrorMessage
   }
 
-  return error.response?.data?.error?.message || defaultErrorMessage
+  return defaultErrorMessage
 }