Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Replace useForm in favor of react-hook-form on CreateDiscussion #28249

Merged
merged 1 commit into from Mar 13, 2023
Merged

refactor: Replace useForm in favor of react-hook-form on CreateDiscussion #28249

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
133 changes: 80 additions & 53 deletions apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx
View file
Open in desktop
@@ -1,12 +1,11 @@
import type { IMessage, IRoom, IUser } from '@rocket.chat/core-typings';
import { Modal, Field, FieldGroup, ToggleSwitch, TextInput, TextAreaInput, Button, Icon, Box } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import { useTranslation, useEndpoint } from '@rocket.chat/ui-contexts';
import { useMutation } from '@tanstack/react-query';
import type { ReactElement } from 'react';
import React from 'react';
import { useForm, Controller } from 'react-hook-form';

import { useForm } from '../../hooks/useForm';
import { goToRoomById } from '../../lib/utils/goToRoomById';
import RoomAutoComplete from '../RoomAutoComplete';
import UserAutoCompleteMultiple from '../UserAutoCompleteMultiple';
Expand All @@ -30,19 +29,23 @@ type CreateDiscussionProps = {
const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSuggestion }: CreateDiscussionProps): ReactElement => {
const t = useTranslation();

const { values, handlers } = useForm({
name: nameSuggestion || '',
parentRoom: '',
encrypted: false,
usernames: [],
firstMessage: '',
const {
register,
formState: { isDirty, errors },
handleSubmit,
control,
watch,
} = useForm({
defaultValues: {
name: nameSuggestion || '',
parentRoom: '',
encrypted: false,
usernames: [],
firstMessage: '',
},
});

const { name, parentRoom, encrypted, usernames, firstMessage } = values as CreateDiscussionFormValues;

const { handleName, handleParentRoom, handleEncrypted, handleUsernames, handleFirstMessage } = handlers;

const canCreate = (parentRoom || defaultParentRoom) && name;
const { encrypted } = watch();

const createDiscussion = useEndpoint('POST', '/v1/rooms.createDiscussion');

Expand All @@ -54,15 +57,15 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
},
});

const onChangeUsers = useMutableCallback((value, action) => {
if (!action) {
if (usernames.includes(value)) {
return;
}
return handleUsernames([...usernames, value]);
}
handleUsernames(usernames.filter((current) => current !== value));
});
const handleCreate = async ({ name, parentRoom, encrypted, usernames, firstMessage }: CreateDiscussionFormValues) => {
createDiscussionMutation.mutate({
prid: defaultParentRoom || parentRoom,
t_name: name,
users: usernames,
reply: encrypted ? undefined : firstMessage,
...(parentMessageId && { pmid: parentMessageId }),
});
};

return (
<Modal>
Expand All @@ -78,51 +81,87 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
<Field>
<Field.Label>{t('Discussion_target_channel')}</Field.Label>
<Field.Row>
{defaultParentRoom && <DefaultParentRoomField defaultParentRoom={defaultParentRoom} />}
{defaultParentRoom && (
<Controller
control={control}
name='parentRoom'
render={() => <DefaultParentRoomField defaultParentRoom={defaultParentRoom} />}
/>
)}

{!defaultParentRoom && (
<RoomAutoComplete
value={parentRoom}
onChange={handleParentRoom}
placeholder={t('Discussion_target_channel_description')}
disabled={Boolean(defaultParentRoom)}
<Controller
control={control}
name='parentRoom'
rules={{ required: t('Field_required') }}
render={({ field: { onChange, value } }) => (
<RoomAutoComplete
value={value}
onChange={onChange}
placeholder={t('Discussion_target_channel_description')}
disabled={Boolean(defaultParentRoom)}
/>
)}
/>
)}
</Field.Row>
{errors.parentRoom && <Field.Error>{errors.parentRoom.message}</Field.Error>}
</Field>
<Field display='flex' alignItems='center' flexDirection='row' justifyContent='spaceBetween' flexGrow={1}>
<Box display='flex' flexDirection='column' width='full'>
<Field.Label>{t('Encrypted')}</Field.Label>
</Box>
<ToggleSwitch checked={encrypted} onChange={handleEncrypted} />
<Controller
control={control}
name='encrypted'
render={({ field: { onChange, value } }) => (
<ToggleSwitch
checked={value}
onChange={onChange}
aria-describedby='Encrypted_discussion_Description'
aria-labelledby='Encrypted_discussion_Label'
/>
)}
/>
</Field>
<Field>
<Field.Label>{t('Discussion_name')}</Field.Label>
<Field.Row>
<TextInput
value={name}
onChange={handleName}
addon={<Icon name='baloons' size='x20' />}
{...register('name', { required: t('Field_required') })}
placeholder={t('New_discussion_name')}
addon={<Icon name='baloons' size='x20' />}
/>
</Field.Row>
{errors.name && <Field.Error>{errors.name.message}</Field.Error>}
</Field>
<Field>
<Field.Label>{t('Invite_Users')}</Field.Label>
<Field.Row w='full' display='flex' flexDirection='column' alignItems='stretch'>
<UserAutoCompleteMultiple value={usernames} onChange={onChangeUsers} placeholder={t('Username_Placeholder')} />
<Controller
control={control}
name='usernames'
render={({ field: { onChange, value } }) => (
<UserAutoCompleteMultiple
value={value}
onChange={(currentUsername, action) => {
const expunged = value?.filter((username) => username !== currentUsername) ?? [];
if (action === 'remove') {
onChange(expunged);
return;
}
onChange([...expunged, currentUsername]);
}}
placeholder={t('Username_Placeholder')}
/>
)}
/>
</Field.Row>
</Field>
<Field>
<Field.Label>{t('Discussion_first_message_title')}</Field.Label>
<Field.Row>
<TextAreaInput
value={firstMessage}
onChange={handleFirstMessage}
placeholder={t('New_discussion_first_message')}
rows={5}
disabled={encrypted}
/>
<TextAreaInput {...register('firstMessage')} placeholder={t('New_discussion_first_message')} rows={5} disabled={encrypted} />
</Field.Row>
{encrypted && <Field.Description>{t('Discussion_first_message_disabled_due_to_e2e')}</Field.Description>}
</Field>
Expand All @@ -131,19 +170,7 @@ const CreateDiscussion = ({ onClose, defaultParentRoom, parentMessageId, nameSug
<Modal.Footer>
<Modal.FooterControllers>
<Button onClick={onClose}>{t('Cancel')}</Button>
<Button
primary
disabled={!canCreate || createDiscussionMutation.isLoading}
onClick={() =>
createDiscussionMutation.mutate({
prid: defaultParentRoom || parentRoom,
t_name: name,
users: usernames,
reply: encrypted ? undefined : firstMessage,
...(parentMessageId && { pmid: parentMessageId }),
})
}
>
<Button primary disabled={!isDirty || createDiscussionMutation.isLoading} onClick={handleSubmit(handleCreate)}>
{t('Create')}
</Button>
</Modal.FooterControllers>
Expand Down