refactor frontend errorhandling and modify tests to support this

backend/src/routes/timeBound.ts

@@ -38,7 +38,7 @@ router.put(
     const { comment, references, ...editedTimeBound } = req.body.timeBound
     const validationErrors = validateEntireTimeBound(editedTimeBound)
     if (validationErrors.length > 0) {
-      return res.status(403).send({ validationErrors })
+      return res.status(403).send(validationErrors)
     }
     const result = await writeTimeBound(editedTimeBound, comment, references, req.user!.initials)
     return res.status(200).send({ bid: result })

backend/src/services/timeUnit.ts

@@ -91,10 +91,10 @@ export const getTimeUnitLocalities = async (id: string) => {
 
 export const validateEntireTimeUnit = (editedFields: EditDataType<TimeUnitDetailsType>) => {
   const keys = Object.keys(editedFields)
-  const errors: ValidationObject[] = []
+  const messages: ValidationObject[] = []
   for (const key of keys) {
     const error = validateTimeUnit(editedFields, key as keyof TimeUnitDetailsType)
-    if (error.error) errors.push(error)
+    if (error.error) messages.push(error)
   }
-  return errors
+  return messages
 }

cypress/e2e/locality.cy.js

@@ -99,7 +99,7 @@ describe('Creating a new locality...', () => {
     cy.contains('This field is required')
     cy.get('[id=write-button]').click()
     cy.get('[id=write-button]').click()
-    cy.contains('Could not save item.')
+    cy.contains('Following validators failed: ')
     cy.contains('Edited item successfully.').should('not.exist')
     cy.visit('/locality/')
     cy.contains('Eg').should('not.exist')

frontend/src/backendTypes.d.ts

@@ -290,7 +290,12 @@ export type ReferenceAuthorType = {
 
 export type ValidationErrors = {
   status: string
-  data: { [key: string]: { name: string; message: string } }
+  data: ValidationErrorItem[]
+}
+
+type ValidationErrorItem = {
+  name: string
+  error: string
 }
 
 export type PrismaReference = Prisma.ref_ref

frontend/src/components/Locality/LocalityDetails.tsx

@@ -63,15 +63,11 @@ export const LocalityDetails = () => {
       setTimeout(() => navigate(`/locality/${id}`), 15)
       notify('Edited item successfully.')
     } catch (e) {
-      if (e && typeof e === 'object' && 'status' in e && e.status !== 403) {
-        notify('Could not edit item. Error happened.', 'error')
-      } else {
+      if (e && typeof e === 'object' && 'status' in e && e.status === 403) {
         const error = e as ValidationErrors
-        let message = 'Could not save item. Missing: '
-        Object.keys(error.data).forEach(key => {
-          message += `${error.data[key].name}, `
-        })
-        notify(message, 'error')
+        notify('Following validators failed: ' + error.data.map(e => e.name).join(', '), 'error')
+      } else {
+        notify('Could not edit item. Error happened.', 'error')
       }
     }
   }

frontend/src/components/Species/SpeciesDetails.tsx

@@ -55,11 +55,7 @@ export const SpeciesDetails = () => {
       setTimeout(() => navigate(`/species/${species_id}`), 15)
     } catch (e) {
       const error = e as ValidationErrors
-      let message = 'Could not save item. Missing: '
-      Object.keys(error.data).forEach(key => {
-        message += `${error.data[key].name}. `
-      })
-      notify(message, 'error')
+      notify('Following validators failed: ' + error.data.map(e => e.name).join(', '), 'error')
     }
   }
 

frontend/src/components/TimeBound/TimeBoundDetails.tsx

@@ -55,11 +55,7 @@ export const TimeBoundDetails = () => {
       setTimeout(() => navigate(`/time-bound/${bid}`), 15)
     } catch (e) {
       const error = e as ValidationErrors
-      let message = 'Could not save item. Missing: '
-      Object.keys(error.data).forEach(key => {
-        message += `${error.data[key].name}. `
-      })
-      notify(message, 'error')
+      notify('Following validators failed: ' + error.data.map(e => e.name).join(', '), 'error')
     }
   }
 

frontend/src/components/TimeUnit/TimeUnitDetails.tsx

@@ -60,15 +60,28 @@ export const TimeUnitDetails = () => {
       if (data) {
         setEditData(makeEditData(data))
       }
-      if (e && typeof e === 'object' && 'status' in e && e.status !== 403) {
-        notify('Could not edit item. Error happened.', 'error')
+      if (
+        e &&
+        typeof e === 'object' &&
+        'status' in e &&
+        e.status === 403 &&
+        'data' in e &&
+        e.data &&
+        typeof e.data === 'object'
+      ) {
+        if ('name' in e.data) {
+          if ('cascadeErrors' in e.data && e.data.cascadeErrors !== '') {
+            notify(e.data.cascadeErrors as string, 'error')
+          }
+          if ('calculatorErrors' in e.data && e.data.calculatorErrors !== '') {
+            notify(e.data.calculatorErrors as string, 'error')
+          }
+        } else {
+          const error = e as ValidationErrors
+          notify('Following validators failed: ' + error.data.map(e => e.name).join(', '), 'error')
+        }
       } else {
-        const error = e as ValidationErrors
-        let message = 'Could not save item. Missing: '
-        Object.keys(error.data).forEach(key => {
-          message += `${error.data[key].name}. `
-        })
-        notify(message, 'error')
+        notify('Could not edit item. Uncaught error happened.', 'error')
       }
     }
   }