Fix backend-error handling

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { Link, useNavigate, useParams } from 'react-router-dom'
@@ -63,9 +63,7 @@ interface NewGuestRoleProps {
   reloadGuestInfo: () => void
 }
 
-
 function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
-
   const [submitState, setSubmitState] = useState(SubmitState.NotSubmitted)
 
   const {
@@ -85,15 +83,6 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
     return <></>
   }
   const navigate = useNavigate()
-  const onSubmit = handleSubmit(async () => {
-    await postRole(getValues(), pid)
-
-    reloadGuestInfo()
-
-    if (submitState == SubmitState.SubmitSuccess) {
-      navigate(`/sponsor/guest/${pid}`)
-    }
-  })
 
   const { ous } = useOus()
   const roleTypes = useRoleTypes()
@@ -159,35 +148,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
       </MenuItem>
     )
   }
-  const postRole = async (formData: AddRoleFormData, pid: string) => {
-    const payload: AddRolePayload = {
-      orgunit: formData.orgunit,
-      person: pid,
-      type: formData.type,
-      end_date: format(formData.end_date as Date, 'yyyy-MM-dd'),
-    }
-    if (formData.start_date) {
-      payload.start_date = format(formData.start_date as Date, 'yyyy-MM-dd')
-    }
-    if (formData.contact_person_unit) {
-      payload.contact_person_unit = formData.contact_person_unit
-    }
-    if (formData.comments) {
-      payload.comments = formData.comments
-    }
-    if (availableInSearchEnabled && formData.available_in_search) {
-      payload.available_in_search = formData.available_in_search
-    }
 
-    fetch('/api/ui/v1/role', submitJsonOpts('POST', payload))
-      .then((res) => {
-        if (!res.ok) {
-          handleSubmitErrorResponse(res)
-        } else {
-          setSubmitState(SubmitState.SubmitSuccess)
-        }
-      })
-  }
   function handleSubmitErrorResponse(res: Response) {
     // Try to extract data from body of error message
     res
@@ -221,6 +182,44 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
         setSubmitState(SubmitState.SubmitFailure)
       })
   }
+
+  const postRole = async (formData: AddRoleFormData) => {
+    const payload: AddRolePayload = {
+      orgunit: formData.orgunit,
+      person: pid,
+      type: formData.type,
+      end_date: format(formData.end_date as Date, 'yyyy-MM-dd'),
+    }
+    if (formData.start_date) {
+      payload.start_date = format(formData.start_date as Date, 'yyyy-MM-dd')
+    }
+    if (formData.contact_person_unit) {
+      payload.contact_person_unit = formData.contact_person_unit
+    }
+    if (formData.comments) {
+      payload.comments = formData.comments
+    }
+    if (availableInSearchEnabled && formData.available_in_search) {
+      payload.available_in_search = formData.available_in_search
+    }
+    fetch('/api/ui/v1/role', submitJsonOpts('POST', payload))
+      .then((res) => {
+        reloadGuestInfo()
+        if (!res.ok) {
+          handleSubmitErrorResponse(res)
+        } else {
+          setSubmitState(SubmitState.SubmitSuccess)
+          navigate(`/sponsor/guest/${pid}`)
+        }
+      })
+      .catch(() => {
+        setSubmitState(SubmitState.SubmitFailure)
+      })
+  }
+  const onSubmit = handleSubmit(async () => {
+    postRole(getValues())
+  })
+
   const hasRoleTypeError =
     errors && errors.type && errors.type.type === 'required'
   const hasOuChoiceError =
@@ -400,7 +399,12 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               label={t('input.searchable')}
             />
           )}
-          <Button variant="contained" color="secondary" type="submit">
+          <Button
+            onClick={onSubmit}
+            variant="contained"
+            color="secondary"
+            type="submit"
+          >
             {t('button.save')}
           </Button>
           <Button