Merge branch 'GREG-160_error_temporarily_showing' into 'master'

GREG-160: Error temporarily showing

See merge request !252

frontend/src/hooks/useOus/index.tsx

@@ -7,13 +7,15 @@ type OuData = {
   en: string
 }
 
-function useOus(): OuData[] {
-  const [ous, setOus] = useState<OuData[]>([])
+function useOus(): OuData[] | undefined {
+  const [ous, setOus] = useState<OuData[] | undefined>(undefined)
   const getOptions = async () => {
     const response = await fetch('/api/ui/v1/ous', fetchJsonOpts())
     if (response.ok) {
       const ousJson = await response.json()
       setOus(ousJson)
+    } else {
+      setOus([])
     }
   }
 

frontend/src/hooks/useRoleTypes/index.tsx

@@ -9,8 +9,10 @@ type RoleTypeData = {
   max_days: number
 }
 
-function useRoleTypes(): RoleTypeData[] {
-  const [roleTypes, setRoleTypes] = useState<RoleTypeData[]>([])
+function useRoleTypes(): RoleTypeData[] | undefined {
+  const [roleTypes, setRoleTypes] = useState<RoleTypeData[] | undefined>(
+    undefined
+  )
 
   const fetchRoleTypes = async () => {
     const response = await fetch(`/api/ui/v1/roletypes/`, fetchJsonOpts())
@@ -20,6 +22,7 @@ function useRoleTypes(): RoleTypeData[] {
       const roleTypesJson = await response.json()
       setRoleTypes(roleTypesJson)
     } else {
+      setRoleTypes([])
       console.error(response)
     }
   }

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

@@ -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)
       }
@@ -191,7 +194,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>
 
@@ -205,7 +210,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))}
@@ -310,4 +316,5 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
     </Page>
   )
 }
+
 export default NewGuestRole

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

@@ -36,6 +36,7 @@ const StepPersonForm = forwardRef(
     const { i18n, t } = useTranslation(['common'])
     const { nextHandler, formData } = props
     const ous = useOus()
+
     const [ouChoice, setOuChoice] = useState(
       formData.ou_id ? formData.ou_id : ''
     )
@@ -91,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
@@ -217,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
@@ -233,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/stepRegistration.tsx

@@ -182,6 +182,11 @@ export default function StepRegistration() {
   }
 
   useEffect(() => {
+    if (ous === undefined || roleTypes === undefined) {
+      // The organisational units or role types are still loading
+      return
+    }
+
     if (ous.length === 0 || roleTypes.length === 0) {
       // These arrays should have values. There is no information
       // about the status code at this level, since the values come

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

@@ -26,7 +26,10 @@ function StepSummary(props: StepSummaryProperties) {
   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
       ? ''