Optimized performance and fix type of object not correctly

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

@@ -75,7 +75,7 @@ const RoomForm = ({
   const initialValue: string = isAdd 
     ? '' 
     : room! 
-    && room.id;
+    && room.id.toString();
 
   const {
     idValue,
@@ -150,12 +150,23 @@ const RoomForm = ({
 
   // Submit form
   const onSubmitForm = async (state: TKeyValue) => {
+    // Convert to room type
+    const data: TRoom = {
+      id: +state.id!,
+      name: '' + state.name,
+      amount: +state.amount!,
+      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(state),
+          JSON.stringify(data),
           'POST',
         );
 
@@ -170,7 +181,7 @@ const RoomForm = ({
         // Edit request
         const response = await sendRequest(
           ROOM_PATH + `/${room!.id}`,
-          JSON.stringify(state),
+          JSON.stringify(data),
           'PUT',
         );
 
@@ -197,8 +208,6 @@ const RoomForm = ({
     onResetForm();
   };
 
-  console.log(initialValue);
-
   // prettier-ignore
   const { 
     values,

hotel-management/src/pages/Room/Table.tsx

@@ -71,8 +71,8 @@ const RoomRow = ({
 
   // prettier-ignore
   const statusText = status
-    ? 'Valid' 
-    : 'Invalid';
+    ? 'Invalid' 
+    : 'Valid';
 
   return (
     <Table.Row>
@@ -84,9 +84,9 @@ const RoomRow = ({
       <div>{statusText}</div>
 
       <Menus.Menu>
-        <Menus.Toggle id={id} />
+        <Menus.Toggle id={id.toString()} />
 
-        <Menus.List id={id}>
+        <Menus.List id={id.toString()}>
           <Menus.Button
             icon={<HiSquare2Stack />}
             onClick={() => handleOnEdit(room)}

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

@@ -27,7 +27,6 @@ import {
   isValidString,
   isValidNumber,
   isValidPhoneNumber,
-  isValidName,
 } from '../../helpers/validators';
 import { addValidator, getValueFromObj } from '../../helpers/utils.ts';
 import { sendRequest } from '../../helpers/sendRequest.ts';
@@ -76,7 +75,7 @@ const UserForm = ({
   const initialValue: string = isAdd 
     ? '' 
     : user! 
-    && user.id;
+    && user.id.toLocaleString();
 
   const {
     idValue,
@@ -116,7 +115,7 @@ const UserForm = ({
   // prettier-ignore
   const stateValidatorSchema: TValidator = {
     name: addValidator({ 
-      validatorFunc: isValidName, 
+      validatorFunc: isValidString, 
       prop: 'full name' 
     }),
     identifiedCode: addValidator({
@@ -139,12 +138,22 @@ const UserForm = ({
 
   // Submit form
   const onSubmitForm = async (state: TKeyValue) => {
+    // Convert to user type
+    const data: TUser = {
+      id: +state.id!,
+      name: '' + state.name,
+      identifiedCode: '' + state.identifiedCode,
+      phone: '' + state.phone,
+      roomId: +state.roomId!,
+      address: '' + state.address,
+    };
+
     try {
       if (isAdd) {
         // Add request
         const response = await sendRequest(
           USER_PATH,
-          JSON.stringify(state),
+          JSON.stringify(data),
           'POST',
         );
 
@@ -159,7 +168,7 @@ const UserForm = ({
         // Edit request
         const response = await sendRequest(
           USER_PATH + `/${user!.id}`,
-          JSON.stringify(state),
+          JSON.stringify(data),
           'PUT',
         );
 

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

@@ -78,9 +78,9 @@ const UserRow = ({
       <div>{roomId}</div>
 
       <Menus.Menu>
-        <Menus.Toggle id={id} />
+        <Menus.Toggle id={id.toString()} />
 
-        <Menus.List id={id}>
+        <Menus.List id={id.toString()}>
           <Menus.Button
             icon={<HiSquare2Stack />}
             onClick={() => handleOnEdit(user)}