feat(api error): backend API error handling

CHANGELOG.md

@@ -6,6 +6,7 @@ New features, fixed bugs, known defects and other noteworthy changes to each rel
 
 ### Change
 * updated translations
+* Status error code api error handling
 
 ### Technical Support
 * Build images also for arm64, in addition to amd64

src/components/cax-companyData.tsx

@@ -76,7 +76,7 @@ export const CompanyDataCax = ({
   const applicationId = obj['applicationId']
 
   useEffect(() => {
-    dispatch(getCompanyDetailsWithAddress(applicationId))
+    dispatch(getCompanyDetailsWithAddress({applicationId, dispatch}))
   }, [dispatch])
 
   useEffect(() => {

src/components/cax-companyRole.tsx

@@ -70,8 +70,8 @@ export const CompanyRoleCax = ({
   const dispatch = useDispatch()
 
   useEffect(() => {
-    dispatch(fetchAgreementData())
-    dispatch(fetchAgreementConsents(applicationId))
+    dispatch(fetchAgreementData(dispatch))
+    dispatch(fetchAgreementConsents({applicationId, dispatch}))
   }, [dispatch])
 
   useEffect(() => {

src/components/cax-registration.tsx

@@ -40,6 +40,7 @@ import {
   fetchId,
   updateInvitation,
 } from '../state/features/application/actions'
+import { statusCodeSelector } from '../state/features/statusCodeError'
 interface RegistrationCaxProps {
   currentActiveStep: number
 }
@@ -52,6 +53,28 @@ export const RegistrationCax = ({
   const dispatch = useDispatch()
   const { status, error } = useSelector(applicationSelector)
 
+  const errorCode = useSelector(statusCodeSelector)
+
+  const getErrorMessage = (errorCode: number) => {
+    console.log('errorCode', typeof errorCode)
+    switch (errorCode){
+      case 400:
+      case 404:
+        return t('ErrorMessage.connectAdministrator')
+      case 401:
+      case 403:
+        return t('ErrorMessage.missingPermissions')
+      case 409:
+        return t('ErrorMessage.connectAdministrator')
+      default:
+        return t('ErrorMessage.defaultReload')
+    }
+  }
+
+  useEffect(() => {
+    errorCode && toast.error(getErrorMessage(errorCode))
+  },[errorCode])
+
   if (error) {
     toast.error(error)
   }

src/components/cax-responsibilities.tsx

@@ -105,8 +105,8 @@ export const ResponsibilitiesCax = ({
   }
 
   useEffect(() => {
-    dispatch(fetchRolesComposite())
-    dispatch(fetchInvited(applicationId))
+    dispatch(fetchRolesComposite(dispatch))
+    dispatch(fetchInvited({applicationId, dispatch}))
   }, [dispatch])
 
   useEffect(() => {

src/components/dragdrop.tsx

@@ -96,7 +96,7 @@ export const DragDrop = ({ currentActiveStep }: DragDropProps) => {
 
   useEffect(() => {
     if(!error && !documentError){
-      dispatch(fetchDocuments(applicationId))
+      dispatch(fetchDocuments({applicationId, dispatch}))
     }
   }, [dispatch, deleteRequest, uploadRequest])
 
@@ -152,7 +152,7 @@ export const DragDrop = ({ currentActiveStep }: DragDropProps) => {
     documentId: string,
     documentName: string
   ) => {
-    dispatch(fetchDocumentByDocumentId({ documentId, documentName }))
+    dispatch(fetchDocumentByDocumentId({ documentId, documentName, dispatch }))
   }
 
   return (

src/components/verifyRegistration.tsx

@@ -101,10 +101,10 @@ export const VerifyRegistration = ({
   }
 
   const hasRoles = () => {
-    return true
+    return registrationData.companyRoles.length > 0
   }
   const hasDocuments = () => {
-    return documents && documents.length > 0 ? true : false
+    return documents && documents.length > 0
   }
 
   return (

src/locales/de/translations.json

@@ -179,7 +179,10 @@
     "default": "This Page isn't working.",
     "error1": "Registration form cant get submitted, since company data are missing. Please fill out all company data in Step 1.",
     "error2": "Registration form cant get submitted. CX Terms and Conditions need to get accepted. Please accept the Terms and Conditions under Step 3 to proceed.",
-    "error3": "Registration form cant get submitted. Please upload your company document under Step 4."
+    "error3": "Registration form cant get submitted. Please upload your company document under Step 4.",
+    "connectAdministrator": "Something went wrong, please connect your administrator",
+    "missingPermissions": "Missing permissions, please connect your administrator",
+    "defaultReload": "Something went wrong, please reload and connect your administrator if the issue appears again"
   },
   "FooterContent": {
     "Footer1": "Please enter all the required information before proceeding.",

src/locales/en/translations.json

@@ -179,7 +179,10 @@
     "default": "This Page isn't working.",
     "error1": "Registration form cant get submitted, since company data are missing. Please fill out all company data in Step 1.",
     "error2": "Registration form cant get submitted. CX Terms and Conditions need to get accepted. Please accept the Terms and Conditions under Step 3 to proceed.",
-    "error3": "Registration form cant get submitted. Please upload your company document under Step 4."
+    "error3": "Registration form cant get submitted. Please upload your company document under Step 4.",
+    "connectAdministrator": "Something went wrong, please connect your administrator",
+    "missingPermissions": "Missing permissions, please connect your administrator",
+    "defaultReload": "Something went wrong, please reload and connect your administrator if the issue appears again"
   },
   "FooterContent": {
     "Footer1": "Please enter all the required information before proceeding.",

src/state/features/application/actions.ts

@@ -18,9 +18,10 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { createAsyncThunk } from '@reduxjs/toolkit'
+import { Dispatch, createAsyncThunk } from '@reduxjs/toolkit'
 import { ApplicationApi } from './api'
 import { ApplicationStatus, CompanyDetails, name } from './types'
+import { setStatusCode } from '../statusCodeError'
 
 const fetchId = createAsyncThunk(`${name}/fetchId`, async () => {
   try {
@@ -61,13 +62,15 @@ const updateStatus = createAsyncThunk(
 
 const getCompanyDetailsWithAddress = createAsyncThunk(
   `${name}/companyDetailsWithAddress/get`,
-  async (applicationId: string) => {
+  async ({applicationId, dispatch}: {applicationId: string, dispatch: Dispatch}) => {
     try {
+      dispatch(setStatusCode({ errorCode: '' }))
       return await ApplicationApi.getInstance().getCompanyDetailsWithAddress(
         applicationId
       )
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error(
         'No active company application existing. Please contact the administrator.'
       )

src/state/features/applicationCompanyRole/actions.ts

@@ -18,28 +18,33 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { createAsyncThunk } from '@reduxjs/toolkit'
+import { Dispatch, createAsyncThunk } from '@reduxjs/toolkit'
 import { API } from './api'
+import { setStatusCode } from '../statusCodeError'
 
 const fetchAgreementData = createAsyncThunk(
   'registration/application/user/fetchAgreementData',
-  async () => {
+  async (dispatch: Dispatch) => {
     try {
+      dispatch(setStatusCode({ errorCode: '' }))
       return await API.getInstance().companyRoleAgreementData()
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error('fetchCompanyRole api call error')
     }
   }
 )
 
 const fetchAgreementConsents = createAsyncThunk(
   'registration/application/user/fetchAgreementConsents',
-  async (appId: string) => {
+  async ({applicationId, dispatch}: {applicationId: string, dispatch: Dispatch}) => {
     try {
-      return await API.getInstance().companyRoleAgreementConsents(appId)
-    } catch (error: unknown) {
+      dispatch(setStatusCode({ errorCode: '' }))
+      return await API.getInstance().companyRoleAgreementConsents(applicationId)
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error('fetchCompanyRole api call error')
     }
   }

src/state/features/applicationDocuments/actions.ts

@@ -24,6 +24,7 @@ import { Api } from './api'
 import { DocumentType } from './types'
 import { ProgressType } from '../../../types/MainTypes'
 import { downloadDocument } from '../../../helpers/utils'
+import { setStatusCode } from '../statusCodeError'
 
 const handleUpdateProgress = (
   progress: ProgressType,
@@ -39,14 +40,16 @@ const handleUpdateProgress = (
 
 const fetchDocuments = createAsyncThunk(
   'registration/application/user/fetchDocuments',
-  async (applicationId: string) => {
+  async ({applicationId, dispatch}: {applicationId: string, dispatch: Dispatch}) => {
     try {
+      dispatch(setStatusCode({ errorCode: '' }))
       return await Api.getInstance().getDocuments(
         applicationId,
         DocumentType.COMMERCIAL_REGISTER_EXTRACT
       )
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error('Unable to load documents. Please contact the administrator.')
     }
   }
@@ -57,18 +60,21 @@ const fetchDocumentByDocumentId = createAsyncThunk(
   async ({
     documentId,
     documentName,
+    dispatch
   }: {
     documentId: string
     documentName: string
+    dispatch: Dispatch
   }) => {
     try {
       const { data, headers } = await Api.getInstance().getDocumentByDocumentId(
         documentId
       )
-
+      dispatch(setStatusCode({ errorCode: '' }))
       return downloadDocument(data, headers['content-type'], documentName)
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error(
         'Unable to download document. Please contact the administrator.'
       )

src/state/features/applicationInviteUser/actions.ts

@@ -18,33 +18,38 @@
  * SPDX-License-Identifier: Apache-2.0
  ********************************************************************************/
 
-import { createAction, createAsyncThunk } from '@reduxjs/toolkit'
+import { Dispatch, createAction, createAsyncThunk } from '@reduxjs/toolkit'
 import { Api } from './api'
 import { InviteNewUser } from './types'
+import { setStatusCode } from '../statusCodeError'
 
 const setUserToInvite = createAction<InviteNewUser>(
   'registration/application/user/setUserToInvite'
 )
 
 const fetchRolesComposite = createAsyncThunk(
   'registration/application/user/fetchRoles',
-  async () => {
+  async (dispatch: Dispatch) => {
     try {
+      dispatch(setStatusCode({ errorCode: '' }))
       return await Api.getInstance().getRolesComposite()
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error('Unable to load roles. Please contact the administrator.')
     }
   }
 )
 
 const fetchInvited = createAsyncThunk(
   'registration/application/user/fetchInvited',
-  async (applicationId: string) => {
+  async ({applicationId, dispatch}: {applicationId: string, dispatch: Dispatch}) => {
     try {
+      dispatch(setStatusCode({ errorCode: '' }))
       return await Api.getInstance().getInvitedUsers(applicationId)
-    } catch (error: unknown) {
+    } catch (error: any) {
       console.error('api call error:', error)
+      dispatch(setStatusCode({ errorCode: error.response.status }))
       throw Error(
         'Application ID not existing. Please contact the administrator.'
       )

src/state/features/reducer.ts

@@ -25,6 +25,7 @@ import documentSlice from './applicationDocuments/slice'
 import user from './user/reducer'
 import roleSlice from './applicationCompanyRole/slice'
 import registrationData from './applicationVerifyRegister/slice'
+import statusCodeErrorSlice from './statusCodeError'
 
 export const reducers = {
   application: applicationSlice.reducer,
@@ -33,6 +34,7 @@ export const reducers = {
   document: documentSlice.reducer,
   registrationData: registrationData.reducer,
   user,
+  statuscode: statusCodeErrorSlice.reducer
 }
 
 const rootReducer = combineReducers(reducers)

src/state/features/statusCodeError.ts

@@ -0,0 +1,45 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { createSlice } from '@reduxjs/toolkit'
+import type { RootState } from '../store'
+
+const name = 'statuscode'
+
+const initialState = {
+  errorCode: null,
+}
+
+export const slice = createSlice({
+  name,
+  initialState,
+  reducers: {
+    setStatusCode: (state, { payload }) => ({
+      ...state,
+      ...payload,
+    })
+  },
+})
+
+export const { setStatusCode } = slice.actions
+
+export const statusCodeSelector = (state: RootState): number =>
+  state.statuscode.errorCode
+
+export default slice