From 04469af993565b4573ca4ac9a926820946a6d801 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Mon, 30 Oct 2023 09:34:14 +0700
Subject: [PATCH] Add comments and optimized code

---
 hotel-management/src/globals/interfaces.ts |  1 +
 hotel-management/src/helpers/utils.ts      |  3 +++
 hotel-management/src/hooks/useForm.ts      |  4 +++-
 hotel-management/src/pages/User/Form.tsx   |  2 +-
 hotel-management/src/pages/User/Table.tsx  | 10 ++++++----
 hotel-management/src/pages/User/index.tsx  | 14 ++++++++------
 6 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/hotel-management/src/globals/interfaces.ts b/hotel-management/src/globals/interfaces.ts
index 0877e95..ef16998 100644
--- a/hotel-management/src/globals/interfaces.ts
+++ b/hotel-management/src/globals/interfaces.ts
@@ -1,3 +1,4 @@
+// Types
 import { TUser } from './types';
 
 interface IMenusContext {
diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts
index a5fe7c5..eb5ff4f 100644
--- a/hotel-management/src/helpers/utils.ts
+++ b/hotel-management/src/helpers/utils.ts
@@ -1,4 +1,7 @@
+// Constants
 import { invalidFormatMsg } from '../constants/messages';
+
+// Types
 import { TKeyValue, TPropValues, TStateSchema, TUser } from '../globals/types';
 
 const VALUE = 'value';
diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts
index bddd4b6..bc28fc7 100644
--- a/hotel-management/src/hooks/useForm.ts
+++ b/hotel-management/src/hooks/useForm.ts
@@ -37,6 +37,8 @@ const useForm = (
     setInitialErrorState(initialValue);
     setDisable(true);
 
+    // If initial value true, setValues again from stateSchema
+    // and enabled button
     if (initialValue) {
       setValues({});
       setValues(getPropValues(stateSchema, VALUE));
@@ -83,7 +85,7 @@ const useForm = (
       Object.keys(errors).map((name) =>
         setErrors((prevState) => ({
           ...prevState,
-          [name]: !initialValue
+          [name]: !initialValue // Skip error when initialValue have values
             ? validateFormFields(name, values[name] as string)
             : '',
         })),
diff --git a/hotel-management/src/pages/User/Form.tsx b/hotel-management/src/pages/User/Form.tsx
index ddcccc1..580974d 100644
--- a/hotel-management/src/pages/User/Form.tsx
+++ b/hotel-management/src/pages/User/Form.tsx
@@ -150,7 +150,7 @@ const UserForm = ({
     onClose();
   };
 
-  // Close form
+  // Close and reset form
   const closeAndReset = () => {
     onClose();
     onResetForm();
diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx
index 22522c1..533ba3c 100644
--- a/hotel-management/src/pages/User/Table.tsx
+++ b/hotel-management/src/pages/User/Table.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import toast from 'react-hot-toast';
 
 // Components
 import { HiSquare2Stack } from 'react-icons/hi2';
@@ -14,14 +15,15 @@ import { TUser } from '../../globals/types';
 
 // Constants
 import { useFetch } from '../../hooks/useFetch';
+import { USER_PATH } from '../../constants/path';
+import { STATUS_CODE } from '../../constants/statusCode';
+import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
 
 // Styled
 import Spinner from '../../commons/styles/Spinner';
+
+// Utils
 import { sendRequest } from '../../helpers/sendRequest';
-import { USER_PATH } from '../../constants/path';
-import toast from 'react-hot-toast';
-import { STATUS_CODE } from '../../constants/statusCode';
-import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
 
 interface IUserRow {
   user: TUser;
diff --git a/hotel-management/src/pages/User/index.tsx b/hotel-management/src/pages/User/index.tsx
index 5ed2196..1163f29 100644
--- a/hotel-management/src/pages/User/index.tsx
+++ b/hotel-management/src/pages/User/index.tsx
@@ -8,6 +8,8 @@ import UserTable from './Table';
 // Styled
 import { StyledUser, Title } from './styled';
 import UserDialog from './Dialog';
+
+// Types
 import { TUser } from '../../globals/types';
 
 const User = () => {
@@ -16,12 +18,12 @@ const User = () => {
   const [user, setUser] = useState<TUser | null>(null);
   const [isAdd, setIsAdd] = useState(false);
 
-  const openDialog = (isAdd: boolean) => {
-    setIsAdd(isAdd);
+  const openFormDialog = (isAddForm: boolean = false) => {
+    setIsAdd(isAddForm);
     dialogRef.current?.showModal();
   };
 
-  const closeDialog = () => {
+  const closeFormDialog = () => {
     dialogRef.current?.close();
   };
 
@@ -30,19 +32,19 @@ const User = () => {
       <StyledUser>
         <Direction type="horizontal">
           <Title>List User</Title>
-          <Button onClick={() => openDialog(true)}>Add user</Button>
+          <Button onClick={() => openFormDialog(true)}>Add user</Button>
         </Direction>
 
         <UserTable
           reload={reload}
           setReload={setReload}
-          openFormDialog={() => openDialog(false)}
+          openFormDialog={() => openFormDialog()}
           setUser={setUser}
         />
       </StyledUser>
 
       <UserDialog
-        onClose={closeDialog}
+        onClose={closeFormDialog}
         ref={dialogRef}
         setReload={setReload}
         reload={reload}