Skip to content

Commit

Permalink
regression: AccountProfileForm not reseting (#30332)
Browse files Browse the repository at this point in the history 
Co-authored-by: Júlia Jaeger Foresti <[email protected]>
  • Loading branch information
@dougfabris @juliajforesti
dougfabris and juliajforesti authored Sep 8, 2023
1 parent 9f6efb1 commit 392bed8
Showing 1 changed file with 100 additions and 68 deletions.
168 changes: 100 additions & 68 deletions apps/meteor/client/views/account/profile/AccountProfileForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,6 @@ import UserAvatarEditor from '../../../components/avatar/UserAvatarEditor';
import { useUpdateAvatar } from '../../../hooks/useUpdateAvatar';
import { USER_STATUS_TEXT_MAX_LENGTH, BIO_TEXT_MAX_LENGTH } from '../../../lib/constants';
import type { AccountProfileFormValues } from './getProfileInitialValues';
import { getProfileInitialValues } from './getProfileInitialValues';
import { useAccountProfileSettings } from './useAccountProfileSettings';

const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactElement => {
Expand All @@ -46,10 +45,8 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
} = useAccountProfileSettings();

const {
register,
control,
watch,
reset,
handleSubmit,
formState: { errors },
} = useFormContext<AccountProfileFormValues>();
Expand Down Expand Up @@ -97,10 +94,10 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
try {
await updateOwnBasicInfo(
{
...(allowRealNameChange ? { realname: name } : {}),
...(allowEmailChange && user ? getUserEmailAddress(user) !== email && { email } : {}),
...(canChangeUsername ? { username } : {}),
...(allowUserStatusMessageChange ? { statusText } : {}),
realname: name,
...(user ? getUserEmailAddress(user) !== email && { email } : {}),
username,
statusText,
statusType,
nickname,
bio,
Expand All @@ -110,7 +107,6 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle

await updateAvatar();
dispatchToastMessage({ type: 'success', message: t('Profile_saved_successfully') });
reset(getProfileInitialValues(user));
} catch (error) {
dispatchToastMessage({ type: 'error', message: error });
}
Expand Down Expand Up @@ -147,16 +143,21 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
{t('Name')}
</Field.Label>
<Field.Row>
<TextInput
{...register('name', {
validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true),
})}
id={nameId}
error={errors.name?.message}
disabled={!allowRealNameChange}
aria-required='true'
aria-invalid={errors.username ? 'true' : 'false'}
aria-describedby={`${nameId}-error ${nameId}-hint`}
<Controller
control={control}
name='name'
rules={{ validate: (name) => (requireName && name === '' ? t('error-the-field-is-required', { field: t('Name') }) : true) }}
render={({ field }) => (
<TextInput
{...field}
id={nameId}
error={errors.name?.message}
disabled={!allowRealNameChange}
aria-required='true'
aria-invalid={errors.username ? 'true' : 'false'}
aria-describedby={`${nameId}-error ${nameId}-hint`}
/>
)}
/>
</Field.Row>
{errors.name && (
Expand All @@ -171,17 +172,25 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
{t('Username')}
</Field.Label>
<Field.Row>
<TextInput
{...register('username', {
<Controller
control={control}
name='username'
rules={{
required: t('error-the-field-is-required', { field: t('Username') }),
validate: (username) => validateUsername(username),
})}
id={usernameId}
error={errors.username?.message}
addon={<Icon name='at' size='x20' />}
aria-required='true'
aria-invalid={errors.username ? 'true' : 'false'}
aria-describedby={`${usernameId}-error ${usernameId}-hint`}
}}
render={({ field }) => (
<TextInput
{...field}
id={usernameId}
disabled={!canChangeUsername}
error={errors.username?.message}
addon={<Icon name='at' size='x20' />}
aria-required='true'
aria-invalid={errors.username ? 'true' : 'false'}
aria-describedby={`${usernameId}-error ${usernameId}-hint`}
/>
)}
/>
</Field.Row>
{errors?.username && (
Expand All @@ -195,26 +204,31 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
<Field>
<Field.Label htmlFor={statusTextId}>{t('StatusMessage')}</Field.Label>
<Field.Row>
<TextInput
id={statusTextId}
{...register('statusText', {
maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) },
})}
error={errors?.statusText?.message}
disabled={!allowUserStatusMessageChange}
flexGrow={1}
placeholder={t('StatusMessage_Placeholder')}
aria-invalid={errors.statusText ? 'true' : 'false'}
aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
addon={
<Controller
control={control}
name='statusType'
render={({ field: { value, onChange } }) => (
<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
)}
<Controller
control={control}
name='statusText'
rules={{ maxLength: { value: USER_STATUS_TEXT_MAX_LENGTH, message: t('Max_length_is', USER_STATUS_TEXT_MAX_LENGTH) } }}
render={({ field }) => (
<TextInput
{...field}
id={statusTextId}
error={errors?.statusText?.message}
disabled={!allowUserStatusMessageChange}
flexGrow={1}
placeholder={t('StatusMessage_Placeholder')}
aria-invalid={errors.statusText ? 'true' : 'false'}
aria-describedby={`${statusTextId}-error ${statusTextId}-hint`}
addon={
<Controller
control={control}
name='statusType'
render={({ field: { value, onChange } }) => (
<UserStatusMenu margin='neg-x2' onChange={onChange} initialStatus={value as IUser['status']} />
)}
/>
}
/>
}
)}
/>
</Field.Row>
{errors?.statusText && (
Expand All @@ -227,21 +241,34 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
<Field>
<Field.Label htmlFor={nicknameId}>{t('Nickname')}</Field.Label>
<Field.Row>
<TextInput id={nicknameId} {...register('nickname')} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
<Controller
control={control}
name='nickname'
render={({ field }) => (
<TextInput {...field} id={nicknameId} flexGrow={1} addon={<Icon name='edit' size='x20' alignSelf='center' />} />
)}
/>
</Field.Row>
</Field>
<Field>
<Field.Label htmlFor={bioId}>{t('Bio')}</Field.Label>
<Field.Row>
<TextAreaInput
id={bioId}
{...register('bio', { maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } })}
error={errors.bio?.message}
rows={3}
flexGrow={1}
addon={<Icon name='edit' size='x20' alignSelf='center' />}
aria-invalid={errors.statusText ? 'true' : 'false'}
aria-describedby={`${bioId}-error`}
<Controller
control={control}
name='bio'
rules={{ maxLength: { value: BIO_TEXT_MAX_LENGTH, message: t('Max_length_is', BIO_TEXT_MAX_LENGTH) } }}
render={({ field }) => (
<TextAreaInput
{...field}
id={bioId}
error={errors.bio?.message}
rows={3}
flexGrow={1}
addon={<Icon name='edit' size='x20' alignSelf='center' />}
aria-invalid={errors.statusText ? 'true' : 'false'}
aria-describedby={`${bioId}-error`}
/>
)}
/>
</Field.Row>
{errors?.bio && (
Expand All @@ -255,18 +282,23 @@ const AccountProfileForm = (props: AllHTMLAttributes<HTMLFormElement>): ReactEle
{t('Email')}
</Field.Label>
<Field.Row display='flex' flexDirection='row' justifyContent='space-between'>
<TextInput
id={emailId}
{...register('email', {
validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) },
})}
flexGrow={1}
error={errors.email?.message}
addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
disabled={!allowEmailChange}
aria-required='true'
aria-invalid={errors.email ? 'true' : 'false'}
aria-describedby={`${emailId}-error ${emailId}-hint`}
<Controller
control={control}
name='email'
rules={{ validate: { validateEmail: (email) => (validateEmail(email) ? undefined : t('error-invalid-email-address')) } }}
render={({ field }) => (
<TextInput
{...field}
id={emailId}
flexGrow={1}
error={errors.email?.message}
addon={<Icon name={isUserVerified ? 'circle-check' : 'mail'} size='x20' />}
disabled={!allowEmailChange}
aria-required='true'
aria-invalid={errors.email ? 'true' : 'false'}
aria-describedby={`${emailId}-error ${emailId}-hint`}
/>
)}
/>
{!isUserVerified && (
<Button disabled={email !== previousEmail} onClick={handleSendConfirmationEmail} mis={24}>
Expand Down

0 comments on commit 392bed8

Please sign in to comment.