Use fallback for missing language text

Necessary for OUs and RoleTypes with missing english or norwegian names

frontend/src/components/roleLine/index.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 import { format } from 'date-fns'
 import { TableCell } from 'components/table'
+import { getRoleName, getRoleOuName } from 'utils'
 
 interface RoleLineProps {
   role: Role
@@ -11,16 +12,12 @@ interface RoleLineProps {
 }
 
 const RoleLine = ({ role, pid }: RoleLineProps) => {
-  const [t, i18n] = useTranslation('common')
-  console.log(role)
+  const [t] = useTranslation('common')
+
   return (
     <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.name_en : role.name_nb}
-      </TableCell>
-      <TableCell align="left">
-        {i18n.language === 'en' ? role.ou_en : role.ou_nb}
-      </TableCell>
+      <TableCell align="left">{getRoleName(role)}</TableCell>
+      <TableCell align="left">{getRoleOuName(role)}</TableCell>
       <TableCell component="th" scope="row">
         {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
         {format(role.end_date, 'yyyy-MM-dd')}

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

@@ -15,7 +15,7 @@ import { useParams } from 'react-router-dom'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { DatePicker } from '@mui/lab'
 import { Controller, SubmitHandler, useForm } from 'react-hook-form'
-import { submitJsonOpts } from 'utils'
+import { getRoleName, getRoleOuName, submitJsonOpts } from 'utils'
 
 interface GuestRoleInfoProps {
   guest: Guest
@@ -94,7 +94,7 @@ const TableContainer = styled(TableContainerMui)({
 
 export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
-  const [t, i18n] = useTranslation('common')
+  const [t] = useTranslation('common')
   const [role, setRole] = useState<Role>({
     id: '',
     name_nb: '',
@@ -158,6 +158,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   useEffect(() => {
     getRoleInfo()
   }, [guest])
+
   return (
     <Page>
       <SponsorInfoButtons
@@ -181,9 +182,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                 <TableCell align="left" sx={{ fontWeight: 'bold' }}>
                   {t('common:role')}
                 </TableCell>
-                <TableCell>
-                  {i18n.language === 'en' ? role.name_en : role.name_nb}
-                </TableCell>
+                <TableCell>{getRoleName(role)}</TableCell>
               </TableRow>
               <TableRow>
                 <TableCell align="left" sx={{ fontWeight: 'bold' }}>
@@ -230,9 +229,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                 <TableCell align="left" sx={{ fontWeight: 'bold' }}>
                   {t('common:ou')}
                 </TableCell>
-                <TableCell align="left">
-                  {i18n.language === 'en' ? role.ou_en : role.ou_nb}
-                </TableCell>
+                <TableCell align="left">{getRoleOuName(role)}</TableCell>
                 <TableCell align="left" />
               </TableRow>
               <TableRow>

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

@@ -18,12 +18,12 @@ import React, {
 } from 'react'
 import { addDays } from 'date-fns/fp'
 import { useTranslation } from 'react-i18next'
+import useOus, { enSort, nbSort } from 'hooks/useOus'
+import useRoleTypes, { RoleTypeData } from 'hooks/useRoleTypes'
+import { getOuName, isValidEmail } from 'utils'
+import { FeatureContext } from 'contexts'
 import { RegisterFormData } from './formData'
 import { PersonFormMethods } from './personFormMethods'
-import useOus, { enSort, nbSort } from '../../../hooks/useOus'
-import useRoleTypes, { RoleTypeData } from '../../../hooks/useRoleTypes'
-import { isValidEmail } from '../../../utils'
-import { FeatureContext } from '../../../contexts'
 
 interface StepPersonFormProperties {
   nextHandler(formState: RegisterFormData): void
@@ -243,7 +243,7 @@ const StepPersonForm = forwardRef(
                   .sort(i18n.language === 'en' ? enSort : nbSort)
                   .map((ou) => (
                     <MenuItem key={ou.id.toString()} value={ou.id}>
-                      {i18n.language === 'en' ? ou.en : ou.nb} ({ou.id})
+                      {getOuName(ou)} ({ou.id})
                     </MenuItem>
                   ))}
               </TextField>

frontend/src/utils/index.ts

 import validator from '@navikt/fnrvalidator'
 import { parseISO } from 'date-fns'
+import { OuData } from 'hooks/useOus'
 import i18n from 'i18next'
 import {
   FetchedIdentity,
@@ -188,3 +189,34 @@ export function instNameUpperCaser(instName: String): String {
       return instName
   }
 }
+
+/**
+ * Get the name of a role matching chosen language with fallback to nb/en if missing
+ * @param role an object of type Role
+ * @returns the name matching the language or fallback if missing
+ */
+export function getRoleName(role: Role) {
+  if (i18n.language === 'en') {
+    return role.name_en ? role.name_en : role.name_nb
+  }
+  return role.name_nb ? role.name_nb : role.name_en
+}
+
+/**
+ * Get the ou name of a role matching chosen language with fallback to nb/en if missing
+ * @param role an object of type Role
+ * @returns the ou name matching the language or fallback if missing
+ */
+export function getRoleOuName(role: Role) {
+  if (i18n.language === 'en') {
+    return role.ou_en ? role.ou_en : role.ou_nb
+  }
+  return role.ou_nb ? role.ou_nb : role.ou_en
+}
+
+export function getOuName(ou: OuData) {
+  if (i18n.language === 'en') {
+    return ou.en ? ou.en : ou.nb
+  }
+  return ou.nb ? ou.nb : ou.en
+}