From 32a65038f5a731432f1482f395c97b68f15cccc1 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 3 Nov 2023 17:30:34 +0700
Subject: [PATCH] Apply react hook form for user page

---
 hotel-management/package.json                 |   1 +
 hotel-management/pnpm-lock.yaml               |  12 +
 .../src/components/Select/index.tsx           |  20 +-
 .../src/constants/formValidateMessage.ts      |   6 +
 hotel-management/src/constants/messages.ts    |  10 -
 hotel-management/src/constants/path.ts        |   2 +-
 hotel-management/src/helpers/utils.ts         |  33 +-
 hotel-management/src/pages/Room/Form.tsx      | 524 ++++++++----------
 hotel-management/src/pages/User/Form.tsx      | 358 ++++--------
 hotel-management/src/pages/User/styled.ts     |  15 +-
 10 files changed, 404 insertions(+), 577 deletions(-)
 create mode 100644 hotel-management/src/constants/formValidateMessage.ts

diff --git a/hotel-management/package.json b/hotel-management/package.json
index 5e6f8ce..09732e8 100644
--- a/hotel-management/package.json
+++ b/hotel-management/package.json
@@ -30,6 +30,7 @@
     "@emotion/is-prop-valid": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.47.0",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
diff --git a/hotel-management/pnpm-lock.yaml b/hotel-management/pnpm-lock.yaml
index 4d99aad..ab6d085 100644
--- a/hotel-management/pnpm-lock.yaml
+++ b/hotel-management/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-hook-form:
+    specifier: ^7.47.0
+    version: 7.47.0(react@18.2.0)
   react-hot-toast:
     specifier: ^2.4.1
     version: 2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0)
@@ -1815,6 +1818,15 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-hook-form@7.47.0(react@18.2.0):
+    resolution: {integrity: sha512-F/TroLjTICipmHeFlMrLtNLceO2xr1jU3CyiNla5zdwsGUGu2UOxxR4UyJgLlhMwLW/Wzp4cpJ7CPfgJIeKdSg==}
+    engines: {node: '>=12.22.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-hot-toast@2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
     engines: {node: '>=10'}
diff --git a/hotel-management/src/components/Select/index.tsx b/hotel-management/src/components/Select/index.tsx
index 4f5ee25..7317b3e 100644
--- a/hotel-management/src/components/Select/index.tsx
+++ b/hotel-management/src/components/Select/index.tsx
@@ -1,3 +1,4 @@
+import { FieldValues, RegisterOptions, useFormContext } from 'react-hook-form';
 import { StyledSelect } from './styled';
 
 export interface ISelectOptions {
@@ -6,20 +7,25 @@ export interface ISelectOptions {
 }
 interface ISelect {
   options: ISelectOptions[];
-  value: string;
-  onChange: React.ChangeEventHandler<HTMLSelectElement>;
-  name?: string;
+  optionsConfigForm?: RegisterOptions<FieldValues, string> | undefined;
+  value?: number;
+  id: string;
 }
 
-const Select = ({ options, value, onChange, name }: ISelect) => {
+const Select = ({ options, id, optionsConfigForm }: ISelect) => {
+  const { register } = useFormContext() ?? {};
+
+  if(!register) {
+    return null;
+  }
+
   if (!options) return;
 
   return (
     <StyledSelect
-      value={value}
-      onChange={onChange}
       aria-label="Sort"
-      name={name}
+      id={id}
+      {...register(id, optionsConfigForm)}
     >
       {options.map((option) => (
         <option value={option.value} key={option.value}>
diff --git a/hotel-management/src/constants/formValidateMessage.ts b/hotel-management/src/constants/formValidateMessage.ts
new file mode 100644
index 0000000..763d090
--- /dev/null
+++ b/hotel-management/src/constants/formValidateMessage.ts
@@ -0,0 +1,6 @@
+const INVALID_FIELD = 'This field is invalid format!';
+const INVALID_PHONE = 'Phone number is invalid!';
+const REQUIRED_FIELD_ERROR = 'This field is required!';
+const INVALID_DISCOUNT = 'Discount should be greater than 0 and less than 100!';
+
+export { REQUIRED_FIELD_ERROR, INVALID_DISCOUNT, INVALID_FIELD, INVALID_PHONE };
diff --git a/hotel-management/src/constants/messages.ts b/hotel-management/src/constants/messages.ts
index 6e14730..9d427b5 100644
--- a/hotel-management/src/constants/messages.ts
+++ b/hotel-management/src/constants/messages.ts
@@ -1,7 +1,3 @@
-const invalidFormatMsg = (field: string) => {
-  return `Invalid ${field} format`;
-};
-
 const errorMsg = (errorCode: number, msg: string) => {
   return `Error code: ${errorCode}. Message: ${msg}`;
 };
@@ -10,17 +6,11 @@ const ADD_SUCCESS = 'Add success';
 const EDIT_SUCCESS = 'Edit success';
 const CONFIRM_DELETE = 'Are you sure to delete it?';
 const DELETE_SUCCESS = 'Delete success';
-const REQUIRED_FIELD_ERROR = 'This is required field';
-const DISCOUNT_FIELD_ERROR =
-  'Discount should be greater than 0 and less than 100';
 
 export {
-  invalidFormatMsg,
   ADD_SUCCESS,
   errorMsg,
   EDIT_SUCCESS,
   CONFIRM_DELETE,
   DELETE_SUCCESS,
-  REQUIRED_FIELD_ERROR,
-  DISCOUNT_FIELD_ERROR,
 };
diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts
index 03014d3..7775173 100644
--- a/hotel-management/src/constants/path.ts
+++ b/hotel-management/src/constants/path.ts
@@ -2,6 +2,6 @@ export const DASHBOARD = '/dashboard';
 export const USER = '/user';
 export const ROOM = '/room';
 export const OTHER_PATH = '*';
-export const BASE_URL = 'https://hotel-management-api.loiphan.com/';
+export const BASE_URL = 'http://localhost:3000/';
 export const USER_PATH = 'users';
 export const ROOM_PATH = 'rooms';
diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index 631d64f..6b9092f 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -1,5 +1,5 @@
 // Constants
-import { REQUIRED_FIELD_ERROR, invalidFormatMsg } from '../constants/messages';
+import { REQUIRED_FIELD_ERROR } from '../constants/formValidateMessage';
 
 // Types
 import {
@@ -54,36 +54,6 @@ const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
   }, {} as TKeyValue);
 };
 
-type TValidator = {
-  validatorFunc: (value: string) => boolean;
-  prop?: string;
-  customErrorMsg?: string;
-  required?: boolean;
-};
-
-/**
- * Create validator object
- * @param param0 Pass TValidator object
- * @returns An object contains condition validator
- */
-const addValidator = ({
-  validatorFunc,
-  prop = '',
-  customErrorMsg = '',
-  required = true,
-}: TValidator) => {
-  return {
-    required,
-    validator: {
-      func: validatorFunc,
-      // prettier-ignore
-      error: customErrorMsg
-        ? customErrorMsg
-        : invalidFormatMsg(prop),
-    },
-  };
-};
-
 /**
  * Return the object contains values of object pass
  * @param obj Object need to get value
@@ -163,7 +133,6 @@ export {
   isRequired,
   getPropValues,
   getValueFromObj,
-  addValidator,
   searchQuery,
   REQUIRED_FIELD_ERROR,
 };
diff --git a/hotel-management/src/pages/Room/Form.tsx b/hotel-management/src/pages/Room/Form.tsx
index f82c5ef..1a0f6f5 100644
--- a/hotel-management/src/pages/Room/Form.tsx
+++ b/hotel-management/src/pages/Room/Form.tsx
@@ -1,47 +1,12 @@
-import { useEffect, useState } from 'react';
+
 import styled from 'styled-components';
-import toast from 'react-hot-toast';
-
-// Styled
-import Input from '../../commons/styles/Input.ts';
-import TextArea from '../../commons/styles/TextArea.ts';
-
-// Components
-import Form from '../../components/Form/index.tsx';
-import FormRow from '../../components/LabelControl/index.tsx';
 import Button from '../../commons/styles/Button.ts';
 
 // Types
 import {
-  TKeyValue,
   TRoom,
-  TStateSchema,
-  TValidator,
 } from '../../globals/types.ts';
 
-// Hooks
-import useForm from '../../hooks/useForm.ts';
-
-// Utils
-import {
-  isValidDiscount,
-  isValidNumber,
-  isValidString,
-  skipCheck,
-} from '../../helpers/validators.ts';
-import { addValidator, getValueFromObj } from '../../helpers/utils.ts';
-import { sendRequest } from '../../helpers/sendRequest.ts';
-
-// Constants
-import { STATUS_CODE } from '../../constants/statusCode.ts';
-import {
-  ADD_SUCCESS,
-  DISCOUNT_FIELD_ERROR,
-  EDIT_SUCCESS,
-  errorMsg,
-} from '../../constants/messages.ts';
-import { ROOM_PATH } from '../../constants/path.ts';
-
 const FormBtn = styled(Button)`
   width: 100%;
 
@@ -67,271 +32,272 @@ const RoomForm = ({
   room,
   isAdd,
 }: IRoomFormProp) => {
-  const [reset, setReset] = useState(true);
+  // const [reset, setReset] = useState(true);
 
-  if (isAdd) {
-    // If this is add form, reset value
-    room = null;
-  }
+  // if (isAdd) {
+  //   // If this is add form, reset value
+  //   room = null;
+  // }
 
-  // prettier-ignore
-  const initialValue: string = isAdd 
-    ? '' 
-    : room! 
-    && room.id.toString();
+  // // prettier-ignore
+  // const initialValue: string = isAdd 
+  //   ? '' 
+  //   : room! 
+  //   && room.id.toString();
 
-  const {
-    idValue,
-    nameValue,
-    priceValue,
-    discountValue,
-    statusValue,
-    descriptionValue,
-  } = getValueFromObj<TRoom>(room);
+  // const {
+  //   idValue,
+  //   nameValue,
+  //   priceValue,
+  //   discountValue,
+  //   statusValue,
+  //   descriptionValue,
+  // } = getValueFromObj<TRoom>(room);
 
-  // Define your state schema
-  // prettier-ignore
-  const stateSchema: TStateSchema = {
-    id: { 
-      value: idValue || '' 
-    },
-    name: { 
-      value: nameValue || '',
-      error: '' 
-    },
-    price: { 
-      value: priceValue || '',
-      error: '' 
-    },
-    discount: { 
-      value: discountValue || '',
-      error: '' 
-    },
-    status: { 
-      value: statusValue || '',
-      error: '' 
-    },
-    description: { 
-      value: descriptionValue || '',
-      error: '' 
-    },
-  };
+  // // Define your state schema
+  // // prettier-ignore
+  // const stateSchema: TStateSchema = {
+  //   id: { 
+  //     value: idValue || '' 
+  //   },
+  //   name: { 
+  //     value: nameValue || '',
+  //     error: '' 
+  //   },
+  //   price: { 
+  //     value: priceValue || '',
+  //     error: '' 
+  //   },
+  //   discount: { 
+  //     value: discountValue || '',
+  //     error: '' 
+  //   },
+  //   status: { 
+  //     value: statusValue || '',
+  //     error: '' 
+  //   },
+  //   description: { 
+  //     value: descriptionValue || '',
+  //     error: '' 
+  //   },
+  // };
 
-  // prettier-ignore
-  const stateValidatorSchema: TValidator = {
-    name: addValidator({ 
-      validatorFunc: isValidString, 
-      prop: 'name' 
-    }),
-    price: addValidator({
-      validatorFunc: isValidNumber,
-      prop: 'price',
-    }),
-    discount: addValidator({ 
-      validatorFunc: isValidDiscount, 
-      customErrorMsg: DISCOUNT_FIELD_ERROR
-    }),
-    status: addValidator({
-      validatorFunc: skipCheck,
-      prop: 'status',
-      required: false,
-    }),
-    description: addValidator({ 
-      validatorFunc: isValidString, 
-      prop: 'description' 
-    }),
-  };
+  // // prettier-ignore
+  // const stateValidatorSchema: TValidator = {
+  //   name: addValidator({ 
+  //     validatorFunc: isValidString, 
+  //     prop: 'name' 
+  //   }),
+  //   price: addValidator({
+  //     validatorFunc: isValidNumber,
+  //     prop: 'price',
+  //   }),
+  //   discount: addValidator({ 
+  //     validatorFunc: isValidDiscount, 
+  //     customErrorMsg: DISCOUNT_FIELD_ERROR
+  //   }),
+  //   status: addValidator({
+  //     validatorFunc: skipCheck,
+  //     prop: 'status',
+  //     required: false,
+  //   }),
+  //   description: addValidator({ 
+  //     validatorFunc: isValidString, 
+  //     prop: 'description' 
+  //   }),
+  // };
 
-  // Submit form
-  const onSubmitForm = async (state: TKeyValue) => {
-    // Convert to room type
-    const data: TRoom = {
-      id: +state.id!,
-      name: '' + state.name,
-      discount: +state.discount!,
-      price: +state.price!,
-      status: !!state.status,
-      description: '' + state.description,
-    };
+  // // Submit form
+  // const onSubmitForm = async (state: TKeyValue) => {
+  //   // Convert to room type
+  //   const data: TRoom = {
+  //     id: +state.id!,
+  //     name: '' + state.name,
+  //     discount: +state.discount!,
+  //     price: +state.price!,
+  //     status: !!state.status,
+  //     description: '' + state.description,
+  //   };
 
-    try {
-      if (isAdd) {
-        // Add request
-        const response = await sendRequest(
-          ROOM_PATH,
-          JSON.stringify(data),
-          'POST',
-        );
+  //   try {
+  //     if (isAdd) {
+  //       // Add request
+  //       const response = await sendRequest(
+  //         ROOM_PATH,
+  //         JSON.stringify(data),
+  //         'POST',
+  //       );
 
-        if (response.statusCode === STATUS_CODE.CREATE) {
-          toast.success(ADD_SUCCESS);
+  //       if (response.statusCode === STATUS_CODE.CREATE) {
+  //         toast.success(ADD_SUCCESS);
 
-          onResetForm();
-        } else {
-          throw new Error(errorMsg(response.statusCode, response.msg));
-        }
-      } else {
-        // Edit request
-        const response = await sendRequest(
-          ROOM_PATH + `/${room!.id}`,
-          JSON.stringify(data),
-          'PUT',
-        );
+  //         onResetForm();
+  //       } else {
+  //         throw new Error(errorMsg(response.statusCode, response.msg));
+  //       }
+  //     } else {
+  //       // Edit request
+  //       const response = await sendRequest(
+  //         ROOM_PATH + `/${room!.id}`,
+  //         JSON.stringify(data),
+  //         'PUT',
+  //       );
 
-        if (response.statusCode == STATUS_CODE.OK) {
-          toast.success(EDIT_SUCCESS);
-        } else {
-          throw new Error(errorMsg(response.statusCode, response.msg));
-        }
-      }
-      // Reload table data
-      setReload(!reload);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        toast.error(error.message);
-      }
-    }
+  //       if (response.statusCode == STATUS_CODE.OK) {
+  //         toast.success(EDIT_SUCCESS);
+  //       } else {
+  //         throw new Error(errorMsg(response.statusCode, response.msg));
+  //       }
+  //     }
+  //     // Reload table data
+  //     setReload(!reload);
+  //   } catch (error: unknown) {
+  //     if (error instanceof Error) {
+  //       toast.error(error.message);
+  //     }
+  //   }
 
-    onClose();
-  };
+  //   onClose();
+  // };
 
-  // Close and reset form
-  const closeAndReset = () => {
-    onClose();
-    onResetForm();
-  };
+  // // Close and reset form
+  // const closeAndReset = () => {
+  //   onClose();
+  //   onResetForm();
+  // };
 
-  // prettier-ignore
-  const { 
-    values,
-    errors,
-    valid,
-    handleOnChange,
-    handleOnSubmit,
-    disable }  =
-    useForm(
-      stateSchema,
-      stateValidatorSchema,
-      onSubmitForm,
-      initialValue
-    );
+  // // prettier-ignore
+  // const { 
+  //   values,
+  //   errors,
+  //   valid,
+  //   handleOnChange,
+  //   handleOnSubmit,
+  //   disable }  =
+  //   useForm(
+  //     stateSchema,
+  //     stateValidatorSchema,
+  //     onSubmitForm,
+  //     initialValue
+  //   );
 
-  // prettier-ignore
-  const {
-    id,
-    name,
-    price,
-    discount, 
-    status,
-    description 
-  } = values;
+  // // prettier-ignore
+  // const {
+  //   id,
+  //   name,
+  //   price,
+  //   discount, 
+  //   status,
+  //   description 
+  // } = values;
 
-  // Clear form value when this is a add form
-  useEffect(() => {
-    if (isAdd) {
-      Object.keys(values).forEach((key) => (values[key] = ''));
-    }
-  }, [isAdd]); // eslint-disable-line
+  // // Clear form value when this is a add form
+  // useEffect(() => {
+  //   if (isAdd) {
+  //     Object.keys(values).forEach((key) => (values[key] = ''));
+  //   }
+  // }, [isAdd]); // eslint-disable-line
 
-  // Reset form
-  const onResetForm = () => {
-    setReset(!reset);
-    Object.keys(values).forEach((key) => (values[key] = ''));
-  };
+  // // Reset form
+  // const onResetForm = () => {
+  //   setReset(!reset);
+  //   Object.keys(values).forEach((key) => (values[key] = ''));
+  // };
 
   return (
-    <Form onSubmit={handleOnSubmit}>
-      <Input type="hidden" name="id" value={id as string} />
-      <FormRow
-        label="Name"
-        error={
-          // prettier-ignore
-          errors.name && valid.name 
-            ? (errors.name as string) 
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="name"
-          value={name as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
-      <FormRow
-        label="Price"
-        error={
-          // prettier-ignore
-          errors.price && valid.price 
-            ? (errors.price as string) 
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="price"
-          value={price as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+    // <Form onSubmit={handleOnSubmit}>
+    //   <Input type="hidden" name="id" value={id as string} />
+    //   <FormRow
+    //     label="Name"
+    //     error={
+    //       // prettier-ignore
+    //       errors.name && valid.name 
+    //         ? (errors.name as string) 
+    //         : ''
+    //     }
+    //   >
+    //     <Input
+    //       type="text"
+    //       name="name"
+    //       value={name as string}
+    //       onChange={handleOnChange}
+    //     />
+    //   </FormRow>
+    //   <FormRow
+    //     label="Price"
+    //     error={
+    //       // prettier-ignore
+    //       errors.price && valid.price 
+    //         ? (errors.price as string) 
+    //         : ''
+    //     }
+    //   >
+    //     <Input
+    //       type="text"
+    //       name="price"
+    //       value={price as string}
+    //       onChange={handleOnChange}
+    //     />
+    //   </FormRow>
 
-      <FormRow
-        label="Discount"
-        error={
-          // prettier-ignore
-          errors.discount && valid.discount
-            ? (errors.discount as string) 
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="discount"
-          value={discount as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+    //   <FormRow
+    //     label="Discount"
+    //     error={
+    //       // prettier-ignore
+    //       errors.discount && valid.discount
+    //         ? (errors.discount as string) 
+    //         : ''
+    //     }
+    //   >
+    //     <Input
+    //       type="text"
+    //       name="discount"
+    //       value={discount as string}
+    //       onChange={handleOnChange}
+    //     />
+    //   </FormRow>
 
-      <FormRow label="Status">
-        <Input
-          type="checkbox"
-          name="status"
-          checked={status as boolean}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+    //   <FormRow label="Status">
+    //     <Input
+    //       type="checkbox"
+    //       name="status"
+    //       checked={status as boolean}
+    //       onChange={handleOnChange}
+    //     />
+    //   </FormRow>
 
-      <FormRow
-        label="Description"
-        error={
-          // prettier-ignore
-          errors.description && valid.description 
-            ? (errors.description as string) 
-            : ''
-        }
-      >
-        <TextArea
-          name="description"
-          rows={3}
-          value={description as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+    //   <FormRow
+    //     label="Description"
+    //     error={
+    //       // prettier-ignore
+    //       errors.description && valid.description 
+    //         ? (errors.description as string) 
+    //         : ''
+    //     }
+    //   >
+    //     <TextArea
+    //       name="description"
+    //       rows={3}
+    //       value={description as string}
+    //       onChange={handleOnChange}
+    //     />
+    //   </FormRow>
 
-      <Form.Action>
-        <FormBtn type="submit" name="submit" disabled={disable}>
-          {
-            // prettier-ignore
-            isAdd
-              ? 'Add'
-              : 'Save'
-          }
-        </FormBtn>
-        <FormBtn type="button" styled="secondary" onClick={closeAndReset}>
-          Close
-        </FormBtn>
-      </Form.Action>
-    </Form>
+    //   <Form.Action>
+    //     <FormBtn type="submit" name="submit" disabled={disable}>
+    //       {
+    //         // prettier-ignore
+    //         isAdd
+    //           ? 'Add'
+    //           : 'Save'
+    //       }
+    //     </FormBtn>
+    //     <FormBtn type="button" styled="secondary" onClick={closeAndReset}>
+    //       Close
+    //     </FormBtn>
+    //   </Form.Action>
+    // </Form>
+    <p></p>
   );
 };
 
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index 06329ce..02912cf 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import styled from 'styled-components';
 import toast from 'react-hot-toast';
+import { FormProvider, useForm } from 'react-hook-form';
 
 // Styled
 import Input from '../../commons/styles/Input';
@@ -9,27 +9,17 @@ import TextArea from '../../commons/styles/TextArea';
 // Components
 import Form from '../../components/Form';
 import FormRow from '../../components/LabelControl/index.tsx';
-import Button from '../../commons/styles/Button.ts';
 
 // Types
-import {
-  TKeyValue,
-  TStateSchema,
-  TUser,
-  TValidator,
-} from '../../globals/types';
-
-// Hooks
-import useForm from '../../hooks/useForm';
+import { TKeyValue, TUser } from '../../globals/types';
 
 // Utils
+import { sendRequest } from '../../helpers/sendRequest.ts';
 import {
-  isValidString,
   isValidNumber,
   isValidPhoneNumber,
-} from '../../helpers/validators';
-import { addValidator, getValueFromObj } from '../../helpers/utils.ts';
-import { sendRequest } from '../../helpers/sendRequest.ts';
+  isValidString,
+} from '../../helpers/validators.ts';
 
 // Constants
 import { STATUS_CODE } from '../../constants/statusCode.ts';
@@ -40,17 +30,13 @@ import {
 } from '../../constants/messages.ts';
 import { USER_PATH } from '../../constants/path.ts';
 import Select, { ISelectOptions } from '../../components/Select';
+
+// Hooks
 import { useFetch } from '../../hooks/useFetch.ts';
 
-const FormBtn = styled(Button)`
-  width: 100%;
-
-  &:disabled,
-  &[disabled] {
-    background-color: var(--disabled-btn-color);
-    cursor: no-drop;
-  }
-`;
+// Styled
+import { FormBtn } from './styled.ts';
+import { INVALID_FIELD, INVALID_PHONE, REQUIRED_FIELD_ERROR } from '../../constants/formValidateMessage.ts';
 
 interface IUserFormProp {
   onClose: () => void;
@@ -67,10 +53,27 @@ const UserForm = ({
   user,
   isAdd,
 }: IUserFormProp) => {
-  const [reset, setReset] = useState(true);
+  const formMethods = useForm<TUser>({
+    defaultValues: {
+      roomId: 1,
+    },
+  });
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty, isValid },
+    trigger,
+  } = formMethods;
   const [options, setOptions] = useState<ISelectOptions[]>();
   const { data, errorFetchMsg } = useFetch('rooms');
 
+  useEffect(() => {
+    if (user) {
+      reset(user);
+    }
+  }, [reset, user]);
+
   useEffect(() => {
     if (data) {
       const tempData = data as TKeyValue[];
@@ -90,95 +93,15 @@ const UserForm = ({
     }
   }, [data, errorFetchMsg]);
 
-  if (isAdd) {
-    // If this is add form, reset value
-    user = null;
-  }
-
-  // prettier-ignore
-  const initialValue: string = isAdd 
-    ? '' 
-    : user! 
-    && user.id.toLocaleString();
-
-  const {
-    idValue,
-    nameValue,
-    identifiedCodeValue,
-    phoneValue,
-    roomIdValue,
-    addressValue,
-  } = getValueFromObj<TUser>(user);
-
-  // Define your state schema
-  // prettier-ignore
-  const stateSchema: TStateSchema = {
-    id: { value: idValue || '' },
-    name: { 
-      value: nameValue || '',
-      error: '' ,
-    },
-    identifiedCode: {
-      value: identifiedCodeValue || '',
-      error: '',
-    },
-    phone: { 
-      value: phoneValue || '',
-       error: '',
-    },
-    roomId: { 
-      value: roomIdValue || '' + (options && options[0].value),
-      error: '' ,
-    },
-    address: { 
-      value: addressValue || '',
-      error: ''
-    },
-  };
-
-  // prettier-ignore
-  const stateValidatorSchema: TValidator = {
-    name: addValidator({ 
-      validatorFunc: isValidString, 
-      prop: 'full name' 
-    }),
-    identifiedCode: addValidator({
-      validatorFunc: isValidNumber,
-      prop: 'identified code',
-    }),
-    phone: addValidator({
-      validatorFunc: isValidPhoneNumber,
-      prop: 'phone number',
-    }),
-    roomId: addValidator({ 
-      validatorFunc: isValidNumber, 
-      prop: 'room number' 
-    }),
-    address: addValidator({ 
-      validatorFunc: isValidString, 
-      prop: 'address' 
-    }),
-  };
-
   // Submit form
-  const onSubmitForm = async (state: TKeyValue) => {
-    // Convert to user type
-    const user: TUser = {
-      id: +state.id!,
-      name: '' + state.name,
-      identifiedCode: '' + state.identifiedCode,
-      phone: '' + state.phone,
-      roomId: +state.roomId!,
-      address: '' + state.address,
-    };
-
+  const onSubmit = async (user: TUser) => {
     try {
       if (isAdd) {
         // Add request
         const response = await sendRequest(
           USER_PATH,
           JSON.stringify(user),
-          'POST',
+          'POST'
         );
 
         if (response.statusCode === STATUS_CODE.CREATE) {
@@ -188,14 +111,12 @@ const UserForm = ({
         }
 
         // TODO Update status when user create
-
-        onResetForm();
       } else {
         // Edit request
         const response = await sendRequest(
           USER_PATH + `/${user!.id}`,
-          JSON.stringify(data),
-          'PUT',
+          JSON.stringify(user),
+          'PUT'
         );
 
         if (response.statusCode == STATUS_CODE.OK) {
@@ -212,153 +133,96 @@ const UserForm = ({
       }
     }
 
+    reset();
     onClose();
   };
 
-  // Close and reset form
-  const closeAndReset = () => {
-    onClose();
-    onResetForm();
-  };
-
-  // prettier-ignore
-  const { 
-    values,
-    errors,
-    valid,
-    handleOnChange,
-    handleOnSubmit,
-    disable }  =
-    useForm(
-      stateSchema,
-      stateValidatorSchema,
-      onSubmitForm,
-      initialValue
-    );
-
-  // prettier-ignore
-  const {
-    id,
-    name, 
-    identifiedCode,
-    phone,
-    roomId, 
-    address 
-  } = values;
-
-  useEffect(() => {
-    if (isAdd) {
-      Object.keys(values).forEach((key) => (values[key] = ''));
-    }
-  }, [isAdd]); // eslint-disable-line
-
-  // Reset form
-  const onResetForm = () => {
-    setReset(!reset);
-    Object.keys(values).forEach((key) => (values[key] = ''));
-  };
-
   return (
-    <Form onSubmit={handleOnSubmit}>
-      <Input type="hidden" name="id" value={id as string} />
-      <FormRow
-        label="Full Name"
-        error={
-          // prettier-ignore
-          errors.name && valid.name 
-            ? (errors.name as string) 
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="name"
-          value={name as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+    <FormProvider {...formMethods}>
+      <Form onSubmit={handleSubmit(onSubmit)}>
+        <Input type="hidden" id="id" {...register('id')} />
+        <FormRow label="Full Name" error={errors?.name?.message}>
+          <Input
+            type="text"
+            id="name"
+            {...register('name', {
+              required: REQUIRED_FIELD_ERROR,
+              validate: {
+                checkValidName: (value) =>
+                  isValidString(value) || INVALID_FIELD,
+              },
+              onChange: () => trigger('name'),
+            })}
+          />
+        </FormRow>
 
-      <FormRow
-        label="Identified Code"
-        error={
-          errors.identifiedCode && valid.identifiedCode
-            ? (errors.identifiedCode as string)
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="identifiedCode"
-          value={identifiedCode as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+        <FormRow
+          label="Identified Code"
+          error={errors?.identifiedCode?.message}
+        >
+          <Input
+            type="text"
+            id="identifiedCode"
+            {...register('identifiedCode', {
+              required: REQUIRED_FIELD_ERROR,
+              validate: {
+                checkIdentifiedCode: (v) =>
+                  isValidNumber(v) || INVALID_FIELD,
+              },
+              onChange: () => trigger('identifiedCode'),
+            })}
+          />
+        </FormRow>
 
-      <FormRow
-        label="Phone"
-        error={
-          // prettier-ignore
-          errors.phone && valid.phone 
-            ? (errors.phone as string) 
-            : ''
-        }
-      >
-        <Input
-          type="text"
-          name="phone"
-          value={phone as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+        <FormRow label="Phone" error={errors?.phone?.message}>
+          <Input
+            type="text"
+            id="phone"
+            {...register('phone', {
+              required: REQUIRED_FIELD_ERROR,
+              validate: {
+                checkPhoneNum: (v) =>
+                  isValidPhoneNumber(v) || INVALID_PHONE,
+              },
+              onChange: () => trigger('phone'),
+            })}
+          />
+        </FormRow>
 
-      <FormRow
-        label="Room"
-        error={
-          // prettier-ignore
-          errors.roomId && valid.roomId
-            ? (errors.roomId as string) 
-            : ''
-        }
-      >
-        <Select
-          name="roomId"
-          value={roomId as string}
-          onChange={handleOnChange}
-          options={options!}
-        />
-      </FormRow>
+        <FormRow label="Room">
+          <Select id="roomId" options={options!} />
+        </FormRow>
 
-      <FormRow
-        label="Address"
-        error={
-          // prettier-ignore
-          errors.address && valid.address 
-            ? (errors.address as string) 
-            : ''
-        }
-      >
-        <TextArea
-          name="address"
-          rows={3}
-          value={address as string}
-          onChange={handleOnChange}
-        />
-      </FormRow>
+        <FormRow label="Address" error={errors.address?.message}>
+          <TextArea
+            id="address"
+            rows={3}
+            {...register('address', {
+              required: REQUIRED_FIELD_ERROR,
+              validate: {
+                checkValidString: (v) =>
+                  isValidString(v) || INVALID_FIELD,
+              },
+              onChange: () => trigger('address'),
+            })}
+          />
+        </FormRow>
 
-      <Form.Action>
-        <FormBtn type="submit" name="submit" disabled={disable}>
-          {
-            // prettier-ignore
-            isAdd
+        <Form.Action>
+          <FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
+            {
+              // prettier-ignore
+              isAdd
               ? 'Add'
               : 'Save'
-          }
-        </FormBtn>
-        <FormBtn type="button" styled="secondary" onClick={closeAndReset}>
-          Close
-        </FormBtn>
-      </Form.Action>
-    </Form>
+            }
+          </FormBtn>
+          <FormBtn type="button" styled="secondary">
+            Close
+          </FormBtn>
+        </Form.Action>
+      </Form>
+    </FormProvider>
   );
 };
 
diff --git a/hotel-management/src/pages/User/styled.ts b/hotel-management/src/pages/User/styled.ts
index 803f1ec..82229a4 100644
--- a/hotel-management/src/pages/User/styled.ts
+++ b/hotel-management/src/pages/User/styled.ts
@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 
+// Components
+import Button from '../../commons/styles/Button';
+
 const StyledUser = styled.main`
   padding: 20px;
   padding-bottom: 100px;
@@ -21,4 +24,14 @@ const StyledOperationTable = styled.div`
   justify-content: flex-end;
 `;
 
-export { StyledUser, Title, StyledOperationTable };
+const FormBtn = styled(Button)`
+  width: 100%;
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--disabled-btn-color);
+    cursor: no-drop;
+  }
+`;
+
+export { StyledUser, Title, StyledOperationTable, FormBtn };