Fix style format and optimzed code

hotel-management/src/components/OrderBy.tsx

@@ -41,7 +41,7 @@ interface IFilterProps {
   }[];
 }
 
-function OrderBy({ options }: IFilterProps) {
+const OrderBy = ({ options }: IFilterProps) => {
   const field = 'orderBy';
 
   const [searchParams, setSearchParams] = useSearchParams();
@@ -67,6 +67,6 @@ function OrderBy({ options }: IFilterProps) {
       ))}
     </StyledFilter>
   );
-}
+};
 
 export default OrderBy;

hotel-management/src/components/Select.tsx

@@ -17,7 +17,7 @@ const StyledSelect = styled.select`
   font-weight: 500;
 `;
 
-function Select({ options, value, onChange }: ISelect) {
+const Select = ({ options, value, onChange }: ISelect) => {
   return (
     <StyledSelect value={value} onChange={onChange}>
       {options.map((option) => (
@@ -27,6 +27,6 @@ function Select({ options, value, onChange }: ISelect) {
       ))}
     </StyledSelect>
   );
-}
+};
 
 export default Select;

hotel-management/src/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, memo, useContext } from 'react';
+import { ReactNode, useContext } from 'react';
 
 // Components
 import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
@@ -19,10 +19,10 @@ const Table = ({ columns, children }: ITable) => {
   );
 };
 
-const Header = memo(({ children }: ITable) => {
+const Header = ({ children }: ITable) => {
   const columns = useContext(TableContext);
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
-});
+};
 
 const Body = <T,>({ data, render }: ITableBody<T>) => {
   return (

hotel-management/src/hooks/useFetch.ts

@@ -3,12 +3,13 @@ import { useEffect, useState } from 'react';
 // Constants
 import { BASE_URL } from '../constants/path';
 import { searchQuery } from '../helpers/utils';
+import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 
 export const useFetch = (
   path: string,
   phoneNum: string,
-  sortBy: string,
+  tempSortBy: string,
-  orderBy: string,
+  tempOrderBy: string,
   reload?: boolean,
 ) => {
   const [data, setData] = useState(null);
@@ -22,6 +23,11 @@ export const useFetch = (
     const fetchData = async () => {
       setIsPending(true);
 
+      // Set default value
+      const sortBy = tempSortBy ? tempSortBy : DEFAULT_SORT_BY;
+      const orderBy = tempOrderBy ? tempOrderBy : DEFAULT_ORDER_BY;
+
+      // Query search
       const query = searchQuery(phoneNum, sortBy, orderBy);
 
       try {
@@ -43,6 +49,6 @@ export const useFetch = (
     };
 
     fetchData();
-  }, [path, reload, phoneNum, orderBy, sortBy]);
+  }, [path, reload, phoneNum, tempOrderBy, tempSortBy]);
   return { data, isPending, errorMsg };
 };

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

@@ -1,3 +1,4 @@
+import { useSearchParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 
@@ -9,6 +10,9 @@ import Menus from '../../components/Menus/Menus';
 import Table from '../../components/Table';
 import Direction from '../../commons/styles/Direction';
 import Message from '../../components/Message';
+import Search from '../../components/Search';
+import SortBy from '../../components/SortBy';
+import OrderBy from '../../components/OrderBy';
 
 // Types
 import { TUser } from '../../globals/types';
@@ -24,11 +28,6 @@ import Spinner from '../../commons/styles/Spinner';
 
 // Utils
 import { sendRequest } from '../../helpers/sendRequest';
-import Search from '../../components/Search';
-import SortBy from '../../components/SortBy';
-import OrderBy from '../../components/OrderBy';
-import { useSearchParams } from 'react-router-dom';
-import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../../constants/config';
 
 interface IUserRow {
   user: TUser;
@@ -114,10 +113,10 @@ const UserTable = ({
   const [users, setUsers] = useState<TUser[]>([]);
   const sortByValue = searchParams.get('sortBy')
     ? searchParams.get('sortBy')!
-    : DEFAULT_SORT_BY;
+    : '';
   const orderByValue = searchParams.get('orderBy')
     ? searchParams.get('orderBy')!
-    : DEFAULT_ORDER_BY;
+    : '';
 
   const { data, isPending, errorMsg } = useFetch(
     'users',