Add comments and optimized code

hotel-management/src/globals/interfaces.ts

@@ -1,3 +1,4 @@
+// Types
 import { TUser } from './types';
 
 interface IMenusContext {

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';

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)
             : '',
         })),

hotel-management/src/pages/User/Form.tsx

@@ -150,7 +150,7 @@ const UserForm = ({
     onClose();
   };
 
-  // Close form
+  // Close and reset form
   const closeAndReset = () => {
     onClose();
     onResetForm();

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;

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}