diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index 015cac646a264ee89c2ecc36d3d56a7929544ad6..7f81dca7f7d4d4d6d0734b78d3a2ac7b40be4332 100644
--- a/frontend/src/routes/sponsor/frontpage/index.tsx
+++ b/frontend/src/routes/sponsor/frontpage/index.tsx
@@ -147,7 +147,7 @@ const PersonLine = ({ person, role }: PersonLineProps) => {
const [t] = useTranslation(['common'])
return (
- <StyledTableRow key={`${person.first} ${person.last}`}>
+ <StyledTableRow>
<TableCell component="th" scope="row">
{`${person.first} ${person.last}`}
</TableCell>
@@ -190,7 +190,11 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
{guests.length > 0 ? (
guests.map((person) =>
person.roles.map((role) => (
- <PersonLine role={role} person={person} />
+ <PersonLine
+ key={`${person.first} ${person.last} ${role.id}`}
+ role={role}
+ person={person}
+ />
))
)
) : (
diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
index 28c1cd680e45fbb4b2ba21f9fa00c6eac472f733..6001f018e1b6c3cd12ec3b98d51a791b6630df75 100644
--- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
@@ -25,7 +25,7 @@ import {
import { Guest } from 'interfaces'
import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm, Controller } from 'react-hook-form'
+import { SubmitHandler, useForm } from 'react-hook-form'
import IdentityLine from 'components/identityLine'
import { isValidEmail, submitJsonOpts } from 'utils'
@@ -94,28 +94,18 @@ export default function GuestInfo({
const [t] = useTranslation(['common'])
const history = useHistory()
const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false)
- const [emailDirty, setEmailDirty] = useState(false)
- const defaultValues = {
- email: guest.email,
- }
// Using useForm even though only the e-mail is allow to change at present, since useForm makes setup and validation easier
const {
handleSubmit,
setValue,
- control,
- formState: { errors },
- } = useForm({
+ register,
+ reset,
+ formState: { errors, isValid, isDirty },
+ } = useForm<Email>({
mode: 'onChange',
- defaultValues,
})
- useEffect(() => {
- setValue('email', guest.email)
- // E-mail just updated so it is not dirty
- setEmailDirty(false)
- }, [guest])
-
const submit: SubmitHandler<Email> = (data) => {
updateEmail(data.email)
}
@@ -158,143 +148,142 @@ export default function GuestInfo({
}
}
- const emailFieldChange = (event: any) => {
- setValue('email', event.target.value)
- if (event.target.value !== guest.email) {
- setEmailDirty(true)
- } else {
- setEmailDirty(false)
- }
- }
+ const { ref, onChange, ...inputProps } = register('email', {
+ validate: isValidEmail,
+ })
+
+ useEffect(() => {
+ reset() // Forces defaultValue to be set to the new value, making the form not dirty
+ setValue('email', guest.email)
+ }, [guest])
return (
<Page>
<SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
- <Box sx={{ marginBottom: '2rem' }}>
- <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
- <Typography variant="body1">
- {t('guestInfo.contactInfoBody')}
- </Typography>
+ <form onSubmit={onSubmit}>
+ <Box sx={{ marginBottom: '2rem' }}>
+ <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
+ <Typography variant="body1">
+ {t('guestInfo.contactInfoBody')}
+ </Typography>
+
+ <TableContainer>
+ <Table sx={{ minWidth: 650 }} aria-label="simple table">
+ <TableHead>
+ <TableRow>
+ <TableHeadCell align="left" colSpan={2}>
+ {t('guestInfo.contactInfoTableText')}
- <TableContainer>
- <Table sx={{ minWidth: 650 }} aria-label="simple table">
- <TableHead>
- <TableRow>
- <TableHeadCell align="left" colSpan={2}>
- {t('guestInfo.contactInfoTableText')}
- </TableHeadCell>
- </TableRow>
- </TableHead>
- <TableBody>
- <TableRow>
- <TableCell align="left">{t('input.fullName')}</TableCell>
- <TableCell align="left">
- {`${guest.first} ${guest.last}`}
- </TableCell>
- <TableCell />
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('input.email')}</TableCell>
- <TableCell align="left">
- <Box
- sx={{
- display: 'flex',
- flexDirection: { xs: 'column', md: 'row' },
- justifyContent: 'flex-start',
- }}
- >
- <Controller
- name="email"
- control={control}
- rules={{
- validate: isValidEmail,
+ </TableHeadCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ <TableRow>
+ <TableCell align="left">{t('input.fullName')}</TableCell>
+ <TableCell align="left">
+ {`${guest.first} ${guest.last}`}
+ </TableCell>
+ <TableCell />
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('input.email')}</TableCell>
+ <TableCell align="left">
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: { xs: 'column', md: 'row' },
+ justifyContent: 'flex-start',
}}
- render={({ field: { value }, ...rest }) => (
- <TextField
- id="email"
- label={t('input.email')}
- error={!!errors.email}
- helperText={errors.email && errors.email.message}
- value={value}
- {...rest}
- onChange={emailFieldChange}
- />
- )}
- />
+ >
+ <TextField
+ InputLabelProps={{ shrink: true }}
+ id="email"
+ label={t('input.email')}
+ error={!!errors.email}
+ helperText={errors?.email?.message}
+ defaultValue={guest.email}
+ inputRef={ref}
+ onChange={onChange}
+ {...inputProps}
+ />
- {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
- {!guest.registered && (
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'row',
- justifyContent: { xs: 'flex-start', md: 'flex-end' },
- }}
- >
- <Button
- color="secondary"
- sx={{
- maxHeight: '2.3rem',
- marginLeft: { xs: '0rem', md: '1rem' },
- marginTop: { xs: '0.3rem', md: '0rem' },
- }}
- onClick={resend}
- >
- {t('button.resendInvitation')}
- </Button>
- <Button
- color="secondary"
+ {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
+ {!guest.registered && (
+ <Box
sx={{
- maxHeight: '2.3rem',
- marginLeft: '0.5rem',
- marginTop: { xs: '0.3rem', md: '0rem' },
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: {
+ xs: 'flex-start',
+ md: 'flex-end',
+ },
}}
- onClick={handleCancel}
>
- {t('button.cancelInvitation')}
- </Button>
- </Box>
- )}
- </Box>
- <CancelConfirmationDialog
- open={confirmationDialogOpen}
- onClose={handleDialogClose}
- />
- </TableCell>
- <TableCell />
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('input.mobilePhone')}</TableCell>
- <TableCell align="left">{guest.mobile}</TableCell>
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('feideId')}</TableCell>
- <TableCell align="left">{guest.feide_id}</TableCell>
- </TableRow>
+ <Button
+ color="secondary"
+ sx={{
+ maxHeight: '2.3rem',
+ marginLeft: { xs: '0rem', md: '1rem' },
+ marginTop: { xs: '0.3rem', md: '0rem' },
+ }}
+ onClick={resend}
+ >
+ {t('button.resendInvitation')}
+ </Button>
+ <Button
+ color="secondary"
+ sx={{
+ maxHeight: '2.3rem',
+ marginLeft: '0.5rem',
+ marginTop: { xs: '0.3rem', md: '0rem' },
+ }}
+ onClick={handleCancel}
+ >
+ {t('button.cancelInvitation')}
+ </Button>
+ </Box>
+ )}
+ </Box>
+ <CancelConfirmationDialog
+ open={confirmationDialogOpen}
+ onClose={handleDialogClose}
+ />
+ </TableCell>
+ <TableCell />
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('input.mobilePhone')}</TableCell>
+ <TableCell align="left">{guest.mobile}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('feideId')}</TableCell>
+ <TableCell align="left">{guest.feide_id}</TableCell>
+ </TableRow>
- <IdentityLine
- text={t('input.nationalIdNumber')}
- identity={guest.fnr}
- reloadGuest={reloadGuest}
- reloadGuests={reloadGuests}
- />
- <IdentityLine
- text={t('input.passportNumber')}
- identity={guest.passport}
- reloadGuest={reloadGuest}
- reloadGuests={reloadGuests}
- />
- </TableBody>
- </Table>
- </TableContainer>
- <Button
- color="secondary"
- disabled={!errors.email && !emailDirty}
- onClick={onSubmit}
- >
- {t('button.save')}
- </Button>
- </Box>
+ <IdentityLine
+ text={t('input.nationalIdNumber')}
+ identity={guest.fnr}
+ reloadGuest={reloadGuest}
+ reloadGuests={reloadGuests}
+ />
+ <IdentityLine
+ text={t('input.passportNumber')}
+ identity={guest.passport}
+ reloadGuest={reloadGuest}
+ reloadGuests={reloadGuests}
+ />
+ </TableBody>
+ </Table>
+ </TableContainer>
+ <Button
+ type="submit"
+ color="secondary"
+ disabled={!isValid || !isDirty}
+ >
+ {t('button.save')}
+ </Button>
+ </Box>
+ </form>
<Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
<Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
<TableContainer>