GREG-156: Updating max date for role when user presses back button

frontend/src/hooks/useRoleTypes/index.tsx

 import { useState, useEffect } from 'react'
+import { fetchJsonOpts } from '../../utils'
 
 type RoleTypeData = {
   id: number
@@ -11,16 +12,16 @@ type RoleTypeData = {
 function useRoleTypes(): RoleTypeData[] {
   const [roleTypes, setRoleTypes] = useState<RoleTypeData[]>([])
 
-  async function fetchRoleTypes() {
-    fetch(`/api/ui/v1/roletypes/`)
-      .then((data) => data.text())
-      .then((result) => {
-        // The response is a JSON-array
-        setRoleTypes(JSON.parse(result))
-      })
-      .catch((error) => {
-        console.debug(error)
-      })
+  const fetchRoleTypes = async () => {
+    const response = await fetch(`/api/ui/v1/roletypes/`, fetchJsonOpts())
+
+    if (response.ok) {
+      // The response is a JSON-array
+      const roleTypesJson = await response.json()
+      setRoleTypes(roleTypesJson)
+    } else {
+      console.error(response)
+    }
   }
 
   useEffect(() => {

frontend/src/routes/sponsor/register/formData.ts

 export type RegisterFormData = {
   first_name?: string
   last_name?: string
-  role_type?: string
+  role_type?: number
   role_start: Date
   role_end: Date
   contact_person_unit?: string

frontend/src/routes/sponsor/register/stepPersonForm.tsx

@@ -58,21 +58,18 @@ const StepPersonForm = forwardRef(
       nextHandler(data)
     }
 
+    // Set up the form with the data given as input to the component
     const {
       register,
       control,
       handleSubmit,
       formState: { errors },
-      reset,
       setValue,
       getValues,
-    } = useForm<RegisterFormData>()
+      trigger,
+    } = useForm<RegisterFormData>({ defaultValues: formData })
     const onSubmit = handleSubmit(submit)
 
-    useEffect(() => {
-      reset(formData)
-    }, [])
-
     const handleOuChange = (event: any) => {
       if (event.target.value) {
         setOuChoice(event.target.value)
@@ -86,16 +83,40 @@ const StepPersonForm = forwardRef(
       required: t<string>('validation.roleTypeRequired'),
     })
 
+    const getMaxDateForRoleType = (roleType: RoleTypeData | undefined) => {
+      if (roleType === undefined) {
+        return today
+      }
+      return addDays(roleType.max_days)(today)
+    }
+
+    function updateMaxDaysForRoleType(roleTypeId: any) {
+      const selectedRoleTypeInfo = roleTypes.find((rt) => rt.id === roleTypeId)
+      const maxDate = getMaxDateForRoleType(selectedRoleTypeInfo)
+      setTodayPlusMaxDays(maxDate)
+      // Trigger revalidation of role end since the max end date is
+      // different for different role types
+      trigger('role_end')
+    }
+
+    // When the component is first rendered and there is some role_type set in
+    // the input formData, the roleTypes-array is most
+    // probably empty since the data has not come back from the server yet.
+    // Need to have this effect here to make sure the max end date gets
+    // updated when the role types are available
+    useEffect(() => {
+      if (formData.role_type) {
+        updateMaxDaysForRoleType(formData.role_type)
+      }
+    }, [roleTypes])
+
     const handleRoleTypeChange = (event: any) => {
-      setValue('role_type', event.target.value)
-      setSelectedRoleType(event.target.value)
-      const selectedRoleTypeInfo = roleTypes.find(
-        (rt) => rt.id === event.target.value
-      )
-      if (selectedRoleTypeInfo === undefined) {
-        setTodayPlusMaxDays(today)
+      if (event.target.value) {
+        setValue('role_type', event.target.value)
+        setSelectedRoleType(event.target.value)
+        updateMaxDaysForRoleType(event.target.value)
       } else {
-        setTodayPlusMaxDays(addDays(selectedRoleTypeInfo.max_days)(today))
+        setValue('role_type', undefined)
       }
     }
 

frontend/src/routes/sponsor/register/stepSummary.tsx

@@ -37,8 +37,7 @@ function StepSummary(props: StepSummaryProperties) {
   // TODO Fix this confusing mix between use of id and identifier
   const selectedRoleType = roleTypes.find(
     (value) =>
-      value.id ===
-      (formData.role_type === undefined ? -1 : parseInt(formData.role_type, 10))
+      value.id === (formData.role_type === undefined ? -1 : formData.role_type)
   )
   const roleTypeName =
     selectedRoleType === undefined