GREG-160: Doing some changes because of issues found while testing

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

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}>

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
       ? ''