Merge branch 'GREG-184-guestinfo-fetch-info' into 'master'

Add quickfix for role info page

See merge request !257

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

+import { useEffect, useState } from 'react'
 import format from 'date-fns/format'
 import { addDays } from 'date-fns/fp'
 import { Button, Table, TableBody, TextField, Typography } from '@mui/material'
@@ -8,13 +9,13 @@ import TableRowMui from '@mui/material/TableRow'
 import TableCellMui from '@mui/material/TableCell'
 
 import Page from 'components/page'
-import { Guest } from 'interfaces'
+import { Guest, Role } from 'interfaces'
 import { useTranslation } from 'react-i18next'
 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 { submitJsonOpts } from 'utils'
 
 interface GuestRoleInfoProps {
   guest: Guest
@@ -94,17 +95,31 @@ const TableContainer = styled(TableContainerMui)({
 export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
   const { pid, id } = useParams<GuestRoleInfoParams>()
   const [t, i18n] = useTranslation('common')
-
+  const [role, setRole] = useState<Role>({
+    id: '',
+    name_nb: '',
+    name_en: '',
+    ou_nb: '',
+    ou_en: '',
+    start_date: new Date(),
+    end_date: new Date(),
+    max_days: 365,
+    contact_person_unit: null,
+  })
   // Find the role info relevant for this page
-  const roleInfo = guest.roles.filter((role) => role.id.toString() === id)[0]
-
+  const getRoleInfo = () => {
+    const roleInfo = guest.roles.filter((ro) => ro.id.toString() === id)[0]
+    if (roleInfo) {
+      setRole(roleInfo)
+    }
+  }
   // Prepare min and max date values
   const today = new Date()
-  const todayPlusMaxDays = addDays(roleInfo.max_days)(today)
+  const todayPlusMaxDays = addDays(role.max_days)(today)
 
   // Make a function for use with onClick of the end role button
   const endPeriod = () => () => {
-    roleInfo.end_date = today
+    role.end_date = today
     endPeriodPost(id, { end_date: today })
   }
 
@@ -139,6 +154,10 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
     formState: { isDirty, isValid },
   } = useForm({ mode: 'onChange' })
   const onSubmit = handleSubmit(submit)
+
+  useEffect(() => {
+    getRoleInfo()
+  }, [guest])
   return (
     <Page>
       <SponsorInfoButtons
@@ -163,7 +182,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                   {t('common:role')}
                 </TableCell>
                 <TableCell>
-                  {i18n.language === 'en' ? roleInfo.name_en : roleInfo.name_nb}
+                  {i18n.language === 'en' ? role.name_en : role.name_nb}
                 </TableCell>
               </TableRow>
               <TableRow>
@@ -174,7 +193,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                   <Controller
                     name="start_date"
                     control={control}
-                    defaultValue={roleInfo.start_date}
+                    defaultValue={role.start_date}
                     render={({ field: { onChange, value } }) => (
                       <DatePicker
                         mask="____-__-__"
@@ -192,7 +211,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                   <Controller
                     name="end_date"
                     control={control}
-                    defaultValue={roleInfo.end_date}
+                    defaultValue={role.end_date}
                     render={({ field: { onChange, value } }) => (
                       <DatePicker
                         mask="____-__-__"
@@ -212,7 +231,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                   {t('common:ou')}
                 </TableCell>
                 <TableCell align="left">
-                  {i18n.language === 'en' ? roleInfo.ou_en : roleInfo.ou_nb}
+                  {i18n.language === 'en' ? role.ou_en : role.ou_nb}
                 </TableCell>
                 <TableCell align="left" />
               </TableRow>
@@ -220,9 +239,7 @@ export default function GuestRoleInfo({ guest }: GuestRoleInfoProps) {
                 <TableCell align="left" sx={{ fontWeight: 'bold' }}>
                   {t('sponsor.contactPerson')}
                 </TableCell>
-                <TableCell align="left">
-                  {roleInfo.contact_person_unit}
-                </TableCell>
+                <TableCell align="left">{role.contact_person_unit}</TableCell>
                 <TableCell align="left" />
               </TableRow>
             </TableBody>