Optimized performance and fix type of object not correctly

hotel-management/src/components/OrderBy.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 
@@ -41,7 +42,7 @@ interface IOrderProps {
   }[];
 }
 
-const OrderBy = ({ options }: IOrderProps) => {
+const OrderBy = memo(({ options }: IOrderProps) => {
   const field = 'orderBy';
 
   const [searchParams, setSearchParams] = useSearchParams();
@@ -67,6 +68,6 @@ const OrderBy = ({ options }: IOrderProps) => {
       ))}
     </StyledOrder>
   );
-};
+});
 
 export default OrderBy;

hotel-management/src/components/Search.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 const StyledSearch = styled.input`
@@ -10,10 +10,10 @@ const StyledSearch = styled.input`
 
 interface ISearch {
   setPlaceHolder: string;
-  setValueSearch: React.Dispatch<React.SetStateAction<string>>;
+  setValueSearch: (phone: string) => void;
 }
 
-const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
+const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
   const [query, setQuery] = useState('');
 
   useEffect(() => {
@@ -30,6 +30,6 @@ const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
       placeholder={setPlaceHolder}
     />
   );
-};
+});
 
 export default Search;

hotel-management/src/components/SortBy.tsx

@@ -2,6 +2,7 @@ import { useSearchParams } from 'react-router-dom';
 
 // Components
 import Select from './Select';
+import { memo } from 'react';
 
 interface ISortByProps {
   options: {
@@ -10,7 +11,7 @@ interface ISortByProps {
   }[];
 }
 
-const SortBy = ({ options }: ISortByProps) => {
+const SortBy = memo(({ options }: ISortByProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const sortBy = searchParams.get('sortBy') || '';
 
@@ -27,6 +28,6 @@ const SortBy = ({ options }: ISortByProps) => {
       onChange={handleChange} 
     />
   );
-};
+});
 
 export default SortBy;

hotel-management/src/globals/types.ts

@@ -1,18 +1,18 @@
 type TUser = {
-  id: string;
+  id: number;
   name: string;
   identifiedCode: string;
   address: string;
   phone: string;
-  roomId: string;
+  roomId: number;
 };
 
 type TRoom = {
-  id: string;
+  id: number;
   name: string;
-  amount: string;
-  price: string;
-  discount: string;
+  amount: number;
+  price: number;
+  discount: number;
   description: string;
   status: boolean;
 };

hotel-management/src/helpers/utils.ts

@@ -86,12 +86,15 @@ const getValueFromObj = <T>(obj: T | null = null): TKeyString => {
   if (obj) {
     for (const key of Object.keys(obj)) {
       const tempValue = obj[key as keyof typeof obj];
-      const value: string | boolean | number =
-        typeof tempValue === 'boolean' ||
-        typeof tempValue === 'string' ||
-        typeof tempValue === 'number'
-          ? tempValue
-          : '';
+      let value: string | boolean = '';
+
+      if (typeof tempValue === 'string' || typeof tempValue === 'boolean') {
+        value = tempValue;
+      }
+
+      if (typeof tempValue === 'number') {
+        value = tempValue.toString();
+      }
 
       result = { ...result, [`${key}Value`]: value };
     }

hotel-management/src/helpers/validators.ts

@@ -1,12 +1,3 @@
-/**
- * Check value is valid name or not
- * @param value Values need to be checked
- * @returns A boolean indicating whether or not the argument has valid
- */
-const isValidName = (value: string): boolean => {
-  return /^[a-zA-Z]{2,}(?: [a-zA-Z]+){0,2}$/gm.test(value);
-};
-
 /**
  * Check value is valid number or not
  * @param value Value need to be checked
@@ -40,10 +31,4 @@ const isValidString = (value: string): boolean => {
  */
 const skipCheck = () => true;
 
-export {
-  isValidName,
-  isValidNumber,
-  isValidPhoneNumber,
-  isValidString,
-  skipCheck,
-};
+export { isValidNumber, isValidPhoneNumber, isValidString, skipCheck };

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)}