From dc1dbdb8800f169e6243372eab53889c723fe29d Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Thu, 10 Feb 2022 15:14:25 +0100
Subject: [PATCH] Move key to kill warning and add form tag
---
.../src/routes/sponsor/frontpage/index.tsx | 8 +-
.../routes/sponsor/guest/guestInfo/index.tsx | 241 +++++++++---------
2 files changed, 129 insertions(+), 120 deletions(-)
diff --git a/frontend/src/routes/sponsor/frontpage/index.tsx b/frontend/src/routes/sponsor/frontpage/index.tsx
index 015cac64..7f81dca7 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 28c1cd68..ed588018 100644
--- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
@@ -170,131 +170,136 @@ export default function GuestInfo({
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>
+ <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')}
- </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,
+ <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',
}}
- 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}
- />
- )}
- />
-
- {/* 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' },
+ >
+ <Controller
+ name="email"
+ control={control}
+ rules={{
+ validate: isValidEmail,
}}
- >
- <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"
+ 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}
+ />
+ )}
+ />
+
+ {/* 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
+ color="secondary"
+ disabled={!errors.email && !emailDirty}
+ onClick={onSubmit}
+ >
+ {t('button.save')}
+ </Button>
+ </Box>
+ </form>
<Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
<Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
<TableContainer>
--
GitLab