diff --git a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx index 017cf9b514c35d6e46866af71dd53ee8a0d080cf..4314904704415c8b7c4faad02f865ffc114258d3 100644 --- a/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx +++ b/frontend/src/routes/sponsor/guest/newGuestRole/index.tsx @@ -112,8 +112,8 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { history.push(`/sponsor/guest/${pid}`) }) - const ous = useOus() ?? [] - const roleTypes = useRoleTypes() ?? [] + const ous = useOus() + const roleTypes = useRoleTypes() const [ouChoice, setOuChoice] = useState<string>('') const [roleTypeChoice, setRoleTypeChoice] = useState<string>('') const [t, i18n] = useTranslation('common') @@ -122,7 +122,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { const todayPlusMaxDays = (roleTypeId?: number) => { if (roleTypeId) { - const role = roleTypes.find((rt) => rt.id === roleTypeId) + const role = + roleTypes === undefined + ? undefined + : roleTypes.find((rt) => rt.id === roleTypeId) if (role !== undefined) { return addDays(role.max_days)(today) } @@ -182,7 +185,9 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { label={t('input.roleType')} onChange={handleRoleTypeChange} > - {roleTypes.sort(roleTypeSort()).map((rt) => rolesToItem(rt))} + {(roleTypes === undefined ? [] : roleTypes) + .sort(roleTypeSort()) + .map((rt) => rolesToItem(rt))} </Select> </FormControl> @@ -196,7 +201,8 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { label={t('common:ou')} onChange={handleOuChange} > - {ous.length > 0 && + {ous !== undefined && + ous.length > 0 && ous .sort(i18n.language === 'en' ? enSort : nbSort) .map((ou) => ouToItem(ou))} @@ -301,4 +307,5 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) { </Page> ) } + export default NewGuestRole diff --git a/frontend/src/routes/sponsor/register/stepPersonForm.tsx b/frontend/src/routes/sponsor/register/stepPersonForm.tsx index fa1097cd6eaa042eb2c95ece38e4a29310cf02cc..72e209d149539b1b25998e7449102ae79a354fd4 100644 --- a/frontend/src/routes/sponsor/register/stepPersonForm.tsx +++ b/frontend/src/routes/sponsor/register/stepPersonForm.tsx @@ -35,7 +35,7 @@ const StepPersonForm = forwardRef( (props: StepPersonFormProperties, ref: Ref<PersonFormMethods>) => { const { i18n, t } = useTranslation(['common']) const { nextHandler, formData } = props - const ous = useOus() ?? [] + const ous = useOus() const [ouChoice, setOuChoice] = useState( formData.ou_id ? formData.ou_id : '' @@ -45,7 +45,7 @@ const StepPersonForm = forwardRef( ) const today = new Date() const [todayPlusMaxDays, setTodayPlusMaxDays] = useState(today) - const roleTypes = useRoleTypes() ?? [] + const roleTypes = useRoleTypes() const { displayContactAtUnit, displayComment } = useContext(FeatureContext) const roleTypeSort = () => (a: RoleTypeData, b: RoleTypeData) => { @@ -92,7 +92,10 @@ const StepPersonForm = forwardRef( } function updateMaxDaysForRoleType(roleTypeId: any) { - const selectedRoleTypeInfo = roleTypes.find((rt) => rt.id === roleTypeId) + const selectedRoleTypeInfo = + roleTypes === undefined + ? undefined + : roleTypes.find((rt) => rt.id === roleTypeId) const maxDate = getMaxDateForRoleType(selectedRoleTypeInfo) setTodayPlusMaxDays(maxDate) // Trigger revalidation of role end since the max end date is @@ -218,13 +221,15 @@ const StepPersonForm = forwardRef( label={t('input.roleType')} onChange={handleRoleTypeChange} > - {roleTypes.sort(roleTypeSort()).map((roleType) => ( - <MenuItem key={roleType.id.toString()} value={roleType.id}> - {i18n.language === 'en' - ? roleType.name_en - : roleType.name_nb} - </MenuItem> - ))} + {(roleTypes === undefined ? [] : roleTypes) + .sort(roleTypeSort()) + .map((roleType) => ( + <MenuItem key={roleType.id.toString()} value={roleType.id}> + {i18n.language === 'en' + ? roleType.name_en + : roleType.name_nb} + </MenuItem> + ))} </TextField> <TextField @@ -234,7 +239,7 @@ const StepPersonForm = forwardRef( label={t('common:ou')} onChange={handleOuChange} > - {ous + {(ous === undefined ? [] : ous) .sort(i18n.language === 'en' ? enSort : nbSort) .map((ou) => ( <MenuItem key={ou.id.toString()} value={ou.id}> diff --git a/frontend/src/routes/sponsor/register/stepSummary.tsx b/frontend/src/routes/sponsor/register/stepSummary.tsx index 775b088c3bdae9e10fe9fa74a83b38229aba6be5..a896871a7d8d2f5f6c93c7ef9abac739a69a1737 100644 --- a/frontend/src/routes/sponsor/register/stepSummary.tsx +++ b/frontend/src/routes/sponsor/register/stepSummary.tsx @@ -23,10 +23,13 @@ interface StepSummaryProperties { function StepSummary(props: StepSummaryProperties) { const { t } = useTranslation(['common']) const { formData } = props - const ous = useOus() ?? [] - const roleTypes = useRoleTypes() ?? [] + const ous = useOus() + const roleTypes = useRoleTypes() - const selectedOus = ous.find((value) => value.id === formData.ou_id) + const selectedOus = + ous === undefined + ? undefined + : ous.find((value) => value.id === formData.ou_id) const ousName = selectedOus === undefined ? '' @@ -35,10 +38,14 @@ 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 : formData.role_type) - ) + const selectedRoleType = + roleTypes === undefined + ? undefined + : roleTypes.find( + (value) => + value.id === + (formData.role_type === undefined ? -1 : formData.role_type) + ) const roleTypeName = selectedRoleType === undefined ? ''