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';
const VALUE = 'value';
@@ -27,10 +28,18 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
}, {} as TKeyValue);
};
const addValidator = (func: (input: string) => boolean, error: string) => {
return {
func: func,
error: invalidFormatMessage(error),
};
};
export {
isObject,
isRequired,
getPropValues,
addValidator,
VALUE,
ERROR,
REQUIRED_FIELD_ERROR,
+77 -44
View File
@@ -23,6 +23,7 @@ import {
isValidPhoneNumber,
isValidString,
} from '../../helpers/validators';
import { addValidator } from '../../helpers/utils.ts';
const FormBtn = styled(Button)`
width: 100%;
@@ -49,6 +50,44 @@ const UserForm = ({ onClose }: IUserFormProp) => {
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
const onSubmitForm = (state: TKeyValue) => {
alert(JSON.stringify(state, null, 2));
@@ -56,54 +95,32 @@ const UserForm = ({ onClose }: IUserFormProp) => {
onResetForm();
};
const { values, errors, dirty, handleOnChange, handleOnSubmit, disable } =
// prettier-ignore
const {
values,
errors,
dirty,
handleOnChange,
handleOnSubmit,
disable } =
useForm(
stateSchema,
{
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.',
},
},
},
stateValidatorSchema,
onSubmitForm,
);
const { fullName, identifiedCode, phone, room, address } = values;
// prettier-ignore
const {
fullName,
identifiedCode,
phone,
room,
address
} = values;
// Reset form
const onResetForm = () => {
setReset(() => !reset);
setReset(!reset);
Object.keys(values).forEach((key) => (values[key] = ''));
};
@@ -113,7 +130,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow
label="Full Name"
error={
errors.fullName && dirty.fullName ? (errors.fullName as string) : ''
// prettier-ignore
errors.fullName && dirty.fullName ?
(errors.fullName as string)
: ''
}
>
<Input
@@ -142,7 +162,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow
label="Phone"
error={errors.phone && dirty.phone ? (errors.phone as string) : ''}
error={
// prettier-ignore
errors.phone && dirty.phone ?
(errors.phone as string)
: ''
}
>
<Input
type="text"
@@ -154,7 +179,12 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow
label="Room"
error={errors.room && dirty.room ? (errors.room as string) : ''}
error={
// prettier-ignore
errors.room && dirty.room ?
(errors.room as string)
: ''
}
>
<Input
type="text"
@@ -167,7 +197,10 @@ const UserForm = ({ onClose }: IUserFormProp) => {
<FormRow
label="Address"
error={
errors.address && dirty.address ? (errors.address as string) : ''
// prettier-ignore
errors.address && dirty.address ?
(errors.address as string)
: ''
}
>
<TextArea