Fix code style format

This commit is contained in:
2023-10-27 11:31:03 +07:00
parent 4ab846da3c
commit e95ac9c4ca
3 changed files with 91 additions and 44 deletions
@@ -0,0 +1,5 @@
const invalidFormatMessage = (field: string) => {
return `Invalid ${field} format`;
};
export { invalidFormatMessage };
+9
View File
@@ -1,3 +1,4 @@
import { invalidFormatMessage } from '../constants/messages';
import { TKeyValue, TPropValues, TStateSchema } from '../globals/types'; import { TKeyValue, TPropValues, TStateSchema } from '../globals/types';
const VALUE = 'value'; const VALUE = 'value';
@@ -27,10 +28,18 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
}, {} as TKeyValue); }, {} as TKeyValue);
}; };
const addValidator = (func: (input: string) => boolean, error: string) => {
return {
func: func,
error: invalidFormatMessage(error),
};
};
export { export {
isObject, isObject,
isRequired, isRequired,
getPropValues, getPropValues,
addValidator,
VALUE, VALUE,
ERROR, ERROR,
REQUIRED_FIELD_ERROR, REQUIRED_FIELD_ERROR,
+77 -44
View File
@@ -23,6 +23,7 @@ import {
isValidPhoneNumber, isValidPhoneNumber,
isValidString, isValidString,
} from '../../helpers/validators'; } from '../../helpers/validators';
import { addValidator } from '../../helpers/utils.ts';
const FormBtn = styled(Button)` const FormBtn = styled(Button)`
width: 100%; width: 100%;
@@ -49,6 +50,44 @@ const UserForm = ({ onClose }: IUserFormProp) => {
address: { value: '', error: '' }, address: { value: '', error: '' },
}; };
const stateValidatorSchema = {
fullName: {
required: true,
validator: addValidator(
(input: string) => isValidString(input),
'full name',
),
},
identifiedCode: {
required: true,
validator: addValidator(
(input: string) => isValidNumber(input),
'identified code',
),
},
phone: {
required: true,
validator: addValidator(
(input: string) => isValidPhoneNumber(input),
'phone',
),
},
room: {
required: true,
validator: addValidator(
(input: string) => isValidNumber(input),
'room number',
),
},
address: {
required: true,
validator: addValidator(
(input: string) => isValidAddress(input),
'address',
),
},
};
// Submit form // Submit form
const onSubmitForm = (state: TKeyValue) => { const onSubmitForm = (state: TKeyValue) => {
alert(JSON.stringify(state, null, 2)); alert(JSON.stringify(state, null, 2));
@@ -56,54 +95,32 @@ const UserForm = ({ onClose }: IUserFormProp) => {
onResetForm(); onResetForm();
}; };
const { values, errors, dirty, handleOnChange, handleOnSubmit, disable } = // prettier-ignore
const {
values,
errors,
dirty,
handleOnChange,
handleOnSubmit,
disable } =
useForm( useForm(
stateSchema, stateSchema,
{ stateValidatorSchema,
fullName: {
required: true,
validator: {
func: (input) => isValidString(input),
error: 'Invalid full name format.',
},
},
identifiedCode: {
required: true,
validator: {
func: (input) => isValidNumber(input),
error: 'Invalid identified code format.',
},
},
phone: {
required: true,
validator: {
func: (input) => isValidPhoneNumber(input),
error: 'Invalid phone format.',
},
},
room: {
required: true,
validator: {
func: (input) => isValidNumber(input),
error: 'Invalid room number format.',
},
},
address: {
required: true,
validator: {
func: (input) => isValidAddress(input),
error: 'Invalid address format.',
},
},
},
onSubmitForm, onSubmitForm,
); );
const { fullName, identifiedCode, phone, room, address } = values; // prettier-ignore
const {
fullName,
identifiedCode,
phone,
room,
address
} = values;
// Reset form // Reset form
const onResetForm = () => { const onResetForm = () => {
setReset(() => !reset); setReset(!reset);
Object.keys(values).forEach((key) => (values[key] = '')); Object.keys(values).forEach((key) => (values[key] = ''));
}; };
@@ -113,7 +130,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow <FormRow
label="Full Name" label="Full Name"
error={ error={
errors.fullName && dirty.fullName ? (errors.fullName as string) : '' // prettier-ignore
errors.fullName && dirty.fullName ?
(errors.fullName as string)
: ''
} }
> >
<Input <Input
@@ -142,7 +162,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow <FormRow
label="Phone" label="Phone"
error={errors.phone && dirty.phone ? (errors.phone as string) : ''} error={
// prettier-ignore
errors.phone && dirty.phone ?
(errors.phone as string)
: ''
}
> >
<Input <Input
type="text" type="text"
@@ -154,7 +179,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow <FormRow
label="Room" label="Room"
error={errors.room && dirty.room ? (errors.room as string) : ''} error={
// prettier-ignore
errors.room && dirty.room ?
(errors.room as string)
: ''
}
> >
<Input <Input
type="text" type="text"
@@ -167,7 +197,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow <FormRow
label="Address" label="Address"
error={ error={
errors.address && dirty.address ? (errors.address as string) : '' // prettier-ignore
errors.address && dirty.address ?
(errors.address as string)
: ''
} }
> >
<TextArea <TextArea