GREG-113: Various updates to make data sent from server appear correctly in form

frontend/src/routes/guest/register/registerPage.tsx

@@ -47,9 +47,15 @@ const GuestRegisterStep = forwardRef(
     const { i18n, t } = useTranslation(['common'])
     const { nextHandler, guestData } = props
 
+    // For select-components it seems to be easier to tie them to a state
+    // and then handle the updating of the form using this, than to tie the
+    // components directly to the form-field using useForm
     const [countryCode, setCountryCode] = useState<
       CountryCallingCode | undefined
     >(undefined)
+    const [passportNationality, setPassportNationality] = useState<
+      string | undefined
+    >(undefined)
     const [idErrorState, setIdErrorState] = useState<string>('')
 
     const submit: SubmitHandler<EnteredGuestData> = (data) => {
@@ -88,6 +94,14 @@ const GuestRegisterStep = forwardRef(
     } = useForm<EnteredGuestData>()
     const onSubmit = handleSubmit<EnteredGuestData>(submit)
 
+    const handlePassportNationalityChange = (event: SelectChangeEvent) => {
+      if (event.target.value) {
+        const passportValue = event.target.value as string
+        setValue('passportNationality', passportValue)
+        setPassportNationality(passportValue)
+      }
+    }
+
     const handleCountryCodeChange = (event: SelectChangeEvent) => {
       if (event.target.value) {
         const countryCodeType = event.target.value as CountryCode
@@ -130,18 +144,38 @@ const GuestRegisterStep = forwardRef(
     const maxBirthDate = subYears(1)(today)
 
     useEffect(() => {
-      // Take values coming from the server, if present, and insert them into the form
-      setCountryCode(guestData.countryForCallingCode)
-      setValue(
-        'mobilePhoneCountry',
-        guestData.countryForCallingCode ? guestData.countryForCallingCode : ''
-      )
+      // Take values coming from the server, if present, and insert them into the form.
+      // This effect has guestData as a dependency, so the data will be reloaded
+      // if guestData changes
       setValue('firstName', guestData.first_name)
       setValue('lastName', guestData.last_name)
       setValue(
         'mobilePhone',
         guestData.mobile_phone ? guestData.mobile_phone : ''
       )
+
+      setValue(
+        'nationalIdNumber',
+        guestData.fnr === undefined ? '' : guestData.fnr
+      )
+      setValue(
+        'passportNationality',
+        guestData.passportNationality === undefined
+          ? ''
+          : guestData.passportNationality
+      )
+      setPassportNationality(guestData.passportNationality)
+      setValue(
+        'passportNumber',
+        guestData.passport === undefined ? '' : guestData.passport
+      )
+
+      setCountryCode(guestData.countryForCallingCode)
+      setValue(
+        'mobilePhoneCountry',
+        guestData.countryForCallingCode ? guestData.countryForCallingCode : ''
+      )
+
       setValue('dateOfBirth', guestData.dateOfBirth)
     }, [guestData])
 
@@ -150,6 +184,7 @@ const GuestRegisterStep = forwardRef(
     }
 
     register('mobilePhoneCountry')
+    register('passportNationality')
 
     useImperativeHandle(ref, () => ({ doSubmit }))
 
@@ -337,6 +372,7 @@ const GuestRegisterStep = forwardRef(
                   rules={{
                     required: true,
                   }}
+                  defaultValue=""
                   render={({ field }) => (
                     <TextField
                       sx={{ flexGrow: 2 }}
@@ -355,27 +391,43 @@ const GuestRegisterStep = forwardRef(
                 AuthenticationMethod.Invite && (
                 <>
                   {/* The guest should fill in one of national ID number or passport number */}
-                  <TextField
-                    id="national_id_number"
-                    label={t('input.nationalIdNumber')}
-                    error={!!errors.nationalIdNumber}
-                    helperText={
-                      errors.nationalIdNumber && errors.nationalIdNumber.message
-                    }
-                    {...register('nationalIdNumber', {
+                  <Controller
+                    name="nationalIdNumber"
+                    control={control}
+                    defaultValue=""
+                    rules={{
                       // It is not required that the national ID number be filled in, the guest may not have
                       // one, so allow empty values for the validation to pass
                       validate: (value) => isValidFnr(value, true),
-                    })}
+                    }}
+                    render={({ field }) => (
+                      <TextField
+                        id="nationalIdNumber"
+                        label={t('input.nationalIdNumber')}
+                        error={!!errors.nationalIdNumber}
+                        value={field.value}
+                        onChange={field.onChange}
+                        helperText={
+                          errors.nationalIdNumber &&
+                          errors.nationalIdNumber.message
+                        }
+                      />
+                    )}
                   />
 
-                  <TextField
-                    id="passport-number-id"
-                    data-testid="passport_number_input"
-                    label={t('input.passportNumber')}
-                    {...register('passportNumber', {
-                      required: false,
-                    })}
+                  <Controller
+                    name="passportNumber"
+                    control={control}
+                    defaultValue=""
+                    render={({ field }) => (
+                      <TextField
+                        id="passportNumber"
+                        data-testid="passport_number_input"
+                        value={field.value}
+                        label={t('input.passportNumber')}
+                        onChange={field.onChange}
+                      />
+                    )}
                   />
 
                   <Select
@@ -387,9 +439,12 @@ const GuestRegisterStep = forwardRef(
                     label={t('input.passportNationality')}
                     displayEmpty
                     defaultValue=""
-                    {...register('passportNationality', {
-                      required: false,
-                    })}
+                    value={
+                      passportNationality === undefined
+                        ? ''
+                        : passportNationality
+                    }
+                    onChange={handlePassportNationalityChange}
                     renderValue={(selected: any) => {
                       if (!selected || selected.length === 0) {
                         return t('input.passportNationality')