Skip to content
Snippets Groups Projects
Unverified Commit 62bcd961 authored by Ahmad Farhat's avatar Ahmad Farhat Committed by GitHub
Browse files

Refactor more forms (#4676)

parent 5c9008e1
No related branches found
No related tags found
No related merge requests found
Showing
with 187 additions and 136 deletions
......@@ -438,6 +438,23 @@
"emails": {
"required": "Please enter at least one valid email",
"list": "Please provide a comma separated list of valid emails (user@users.com,user1@users.com,user2@users.com)"
},
"role_name": {
"required": "Please enter the role name"
},
"room": {
"name": {
"required": "Please enter the room name.",
"min": "Name must be at least 2 characters long"
}
}
},
"room": {
"fields": {
"name": {
"label": "Room Name",
"placeholder": "Enter a room name..."
}
}
},
"user": {
......@@ -566,6 +583,21 @@
"label": "Emails"
}
}
},
"site_settings": {
"fields": {
"value": {
"placeholder": "Enter link here..."
}
}
},
"roles": {
"fields": {
"name": {
"label": "Role Name",
"placeholder": "Enter a role name..."
}
}
}
}
}
......
......@@ -162,9 +162,11 @@
width: 100px;
}
#edit-role-form {
.invalid-feedback{
width: 200px;
}
}
.role-badge {
background-color: whitesmoke !important;
......
import React from 'react';
import { useForm } from 'react-hook-form';
import {
Button, Stack,
} from 'react-bootstrap';
......@@ -8,14 +7,13 @@ import { useTranslation } from 'react-i18next';
import Form from '../../../shared_components/forms/Form';
import Spinner from '../../../shared_components/utilities/Spinner';
import FormControl from '../../../shared_components/forms/FormControl';
import { createRoleFormConfig, createRoleFormFields } from '../../../../helpers/forms/CreateRoleFormHelpers';
import useCreateRole from '../../../../hooks/mutations/admin/roles/useCreateRole';
import useRoleForm from '../../../../hooks/forms/admin/roles/useRoleForm';
export default function CreateRoleForm({ handleClose }) {
const { t } = useTranslation();
const createRole = useCreateRole({ onSettled: handleClose });
const methods = useForm(createRoleFormConfig);
const fields = createRoleFormFields;
const { methods, fields } = useRoleForm();
return (
<Form methods={methods} onSubmit={createRole.mutate}>
......
......@@ -3,20 +3,17 @@ import PropTypes from 'prop-types';
import {
Button, InputGroup,
} from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import Form from '../../../shared_components/forms/Form';
import { linksFormConfig, linksFormFields } from '../../../../helpers/forms/LinksFormHelpers';
import Spinner from '../../../shared_components/utilities/Spinner';
import FormControlGeneric from '../../../shared_components/forms/FormControlGeneric';
import useLinksForm from '../../../../hooks/forms/admin/site_settings/useLinksForm';
export default function LinksForm({ id, value, mutation: useUpdateSiteSettingsAPI }) {
const updateSiteSettingsAPI = useUpdateSiteSettingsAPI();
const { t } = useTranslation();
const { defaultValues } = linksFormConfig;
defaultValues.value = value;
const fields = linksFormFields;
const methods = useForm(linksFormConfig);
const { methods, fields } = useLinksForm({ defaultValues: { value } });
return (
<Form id={id} methods={methods} onSubmit={updateSiteSettingsAPI.mutate}>
......
import React from 'react';
import { useForm } from 'react-hook-form';
import {
Button, Stack,
} from 'react-bootstrap';
......@@ -8,20 +7,18 @@ import { useTranslation } from 'react-i18next';
import Form from '../../../shared_components/forms/Form';
import Spinner from '../../../shared_components/utilities/Spinner';
import FormControl from '../../../shared_components/forms/FormControl';
import { createRoomFormConfig, createRoomFormFields } from '../../../../helpers/forms/CreateRoomFormHelpers';
import { useAuth } from '../../../../contexts/auth/AuthProvider';
import useRoomForm from '../../../../hooks/forms/rooms/useRoomForm';
export default function CreateRoomForm({ mutation: useCreateRoomAPI, userId, handleClose }) {
const { t } = useTranslation();
const currentUser = useAuth();
const createRoomAPI = useCreateRoomAPI({ onSettled: handleClose, user_id: currentUser.id });
createRoomFormConfig.defaultValues.user_id = userId;
const methods = useForm(createRoomFormConfig);
const { name } = createRoomFormFields;
const { methods, fields } = useRoomForm({ defaultValues: { user_id: userId } });
return (
<Form methods={methods} onSubmit={createRoomAPI.mutate}>
<FormControl field={name} type="text" />
<FormControl field={fields.name} type="text" />
<Stack className="mt-1" direction="horizontal" gap={1}>
<Button variant="neutral" className="ms-auto" onClick={handleClose}>
{ t('close') }
......
import * as yup from 'yup';
const FILE_SIZE = 3_000_000;
const SUPPORTED_FORMATS = 'image/jpeg|image/png';
export const validationSchema = yup.object().shape({
avatar: yup.mixed()
.test('required', 'Please choose a new image.', (value) => value && value.length)
.test('fileSize', 'The file is too large.', (value) => value && value[0] && value[0].size <= FILE_SIZE)
.test('type', 'Image format is not recognized.', (value) => value && value[0] && value[0].type.match(SUPPORTED_FORMATS)),
});
export const avatarFormFields = {
avatar: {
label: 'Upload an image',
controlId: 'avatarFormAvatar',
hookForm: {
id: 'avatar',
},
},
};
import * as yup from 'yup';
export const validationSchema = yup.object({
emails:
yup.string()
.required('Please enter your email.')
.email('Entered value does not match email format.'),
});
export const createInvitationFormFields = {
emails: {
label: 'Emails',
controlId: 'createInvitationFormEmail',
hookForm: {
id: 'emails',
},
},
};
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
name: yup.string().required('Please enter the role name.'),
});
export const createRoleFormConfig = {
mode: 'onChange',
criteriaMode: 'all',
defaultValues: {
name: '',
},
resolver: yupResolver(validationSchema),
};
export const createRoleFormFields = {
name: {
label: 'Role Name',
placeHolder: 'Enter a role name...',
controlId: 'createRoleFormName',
hookForm: {
id: 'name',
},
},
};
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
name: yup.string().required('Please enter the room name.').min(2, 'Name must be at least 2 characters long'),
});
export const createRoomFormConfig = {
mode: 'onChange',
criteriaMode: 'all',
defaultValues: {
name: '',
user_id: '',
},
resolver: yupResolver(validationSchema),
};
export const createRoomFormFields = {
name: {
label: 'Room Name',
placeHolder: 'Enter a room name...',
controlId: 'createRoomFormName',
hookForm: {
id: 'name',
},
},
};
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
const validationSchema = yup.object({
// TODO: amir - Revisit validations.
value: yup.string().url(),
});
export const linksFormConfig = {
mode: 'onChange',
defaultValues: {
value: '',
},
resolver: yupResolver(validationSchema),
};
export const linksFormFields = {
value: {
placeHolder: 'Enter link here...',
hookForm: {
id: 'value',
},
},
};
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useTranslation } from 'react-i18next';
import { useForm } from 'react-hook-form';
import { useCallback, useMemo } from 'react';
export function useRoleFormValidation() {
return useMemo(() => (yup.object({
name: yup.string().required('forms.validations.role_name.required'),
})), []);
}
export default function useRoleForm({ defaultValues: _defaultValues, ..._config } = {}) {
const { t, i18n } = useTranslation();
const fields = useMemo(() => ({
name: {
label: t('forms.admin.roles.fields.name.label'),
placeHolder: t('forms.admin.roles.fields.name.placeholder'),
controlId: 'createRoleFormName',
hookForm: {
id: 'name',
},
},
}), [i18n.resolvedLanguage]);
const validationSchema = useRoleFormValidation();
const config = useMemo(() => ({
...{
mode: 'onChange',
defaultValues: {
...{
name: '',
},
..._defaultValues,
},
resolver: yupResolver(validationSchema),
},
..._config,
}), [validationSchema, _defaultValues]);
const methods = useForm(config);
const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
return { methods, fields, reset };
}
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useTranslation } from 'react-i18next';
import { useForm } from 'react-hook-form';
import { useCallback, useMemo } from 'react';
export function useLinksFormValidation() {
return useMemo(() => (yup.object({
value: yup.string().url(),
})), []);
}
export default function useLinksForm({ defaultValues: _defaultValues, ..._config } = {}) {
const { t, i18n } = useTranslation();
const fields = useMemo(() => ({
value: {
placeHolder: t('forms.admin.site_settings.fields.value.placeholder'),
hookForm: {
id: 'value',
},
},
}), [i18n.resolvedLanguage]);
const validationSchema = useLinksFormValidation();
const config = useMemo(() => ({
...{
mode: 'onChange',
defaultValues: {
...{
value: '',
},
..._defaultValues,
},
resolver: yupResolver(validationSchema),
},
..._config,
}), [validationSchema, _defaultValues]);
const methods = useForm(config);
const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
return { methods, fields, reset };
}
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { useTranslation } from 'react-i18next';
import { useForm } from 'react-hook-form';
import { useCallback, useMemo } from 'react';
export function useRoomFormValidation() {
return useMemo(() => (yup.object({
name: yup.string().required('forms.validations.room.name.required').min(2, 'forms.validations.room.name.min'),
})), []);
}
export default function useRoomForm({ defaultValues: _defaultValues, ..._config } = {}) {
const { t, i18n } = useTranslation();
const fields = useMemo(() => ({
name: {
label: t('forms.room.fields.name.label'),
placeHolder: t('forms.room.fields.name.placeholder'),
controlId: 'createRoleFormName',
hookForm: {
id: 'name',
},
},
}), [i18n.resolvedLanguage]);
const validationSchema = useRoomFormValidation();
const config = useMemo(() => ({
...{
mode: 'onChange',
defaultValues: {
...{
name: '',
user_id: '',
},
..._defaultValues,
},
resolver: yupResolver(validationSchema),
},
..._config,
}), [validationSchema, _defaultValues]);
const methods = useForm(config);
const reset = useCallback(() => methods.reset(config.defaultValues), [methods.reset, config.defaultValues]);
return { methods, fields, reset };
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment