From 0d4999c1954cd071991e42da5ecfe8895cb39376 Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Tue, 23 Nov 2021 08:38:31 +0100
Subject: [PATCH] GREG-113: Various updates to make data sent from server
appear correctly in form
---
.../routes/guest/register/registerPage.tsx | 105 +++++++++++++-----
1 file changed, 80 insertions(+), 25 deletions(-)
diff --git a/frontend/src/routes/guest/register/registerPage.tsx b/frontend/src/routes/guest/register/registerPage.tsx
index 42511ad4..04e55fe6 100644
--- a/frontend/src/routes/guest/register/registerPage.tsx
+++ b/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')
--
GitLab