Update room, user pages and service

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

@@ -1,5 +1,4 @@
-import { useSearchParams } from 'react-router-dom';
-import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 
 // Components
 import Menus from '@component/Menus';
@@ -13,9 +12,6 @@ import UserRow from './UserRow';
 // Types
 import { IUser } from '@type/users';
 
-// Hooks
-import { useFetch } from '@hook/useFetch';
-
 // Constants
 import { ORDERBY_OPTIONS, USER_PAGE } from '@constant/commons';
 
@@ -24,44 +20,23 @@ import Direction from '@commonStyle/Direction';
 import { StyledOperationTable } from './styled';
 import Spinner from '@commonStyle/Spinner';
 
-interface IUserTable {
-  reload: boolean;
-  setReload: Dispatch<SetStateAction<boolean>>;
-}
+// Hooks
+import { useUsers } from '@hook/users/useUsers';
 
-const UserTable = ({ reload, setReload }: IUserTable) => {
-  const columnName = ['Id', 'Name', 'Identified Code', 'Phone', 'Room Id'];
-  const [users, setUsers] = useState<IUser[]>([]);
-  const [phoneSearch, setPhoneSearch] = useState('');
-  const [searchParams] = useSearchParams();
-  const sortByValue = searchParams.get('sortBy')
-    ? searchParams.get('sortBy')!
-    : '';
-  const orderByValue = searchParams.get('orderBy')
-    ? searchParams.get('orderBy')!
-    : '';
+const UserTable = () => {
+  const columnName = ['Id', 'Name', 'Phone'];
+  const { isLoading, users } = useUsers();
 
-  const { data, isPending, errorFetchMsg } = useFetch(
-    'users',
-    'phone',
-    phoneSearch,
-    sortByValue,
-    orderByValue,
-    reload
+  const renderUserRow = useCallback(
+    (user: IUser) => (
+      <UserRow
+        user={user}
+        key={user.id}
+      />
+    ),
+    []
   );
 
-  useEffect(() => {
-    if (data) {
-      setUsers(data);
-    } else {
-      setUsers([]);
-    }
-
-    if (errorFetchMsg) {
-      console.error(errorFetchMsg);
-    }
-  }, [data, errorFetchMsg, setUsers]);
-
   return (
     <>
       <Direction>
@@ -69,33 +44,20 @@ const UserTable = ({ reload, setReload }: IUserTable) => {
           <OrderBy options={ORDERBY_OPTIONS} />
 
           <SortBy options={USER_PAGE.SORTBY_OPTIONS} />
-          <Search
-            setValueSearch={setPhoneSearch}
-            setPlaceHolder="Search by phone..."
-          />
+          <Search setPlaceHolder="Search by phone..." />
         </StyledOperationTable>
 
-        {isPending && <Spinner />}
+        {isLoading && <Spinner />}
 
-        {users.length ? (
+        {users && users.length ? (
           <Menus>
-            <Table columns="10% 30% 20% 20% 10% 5%">
+            <Table columns="10% 40% 35% 15%">
               <Table.Header headerColumn={columnName} />
-              <Table.Body<IUser>
-                data={users}
-                render={(user: IUser) => (
-                  <UserRow
-                    user={user}
-                    key={user.id}
-                    reload={reload}
-                    setReload={setReload}
-                  />
-                )}
-              />
+              <Table.Body<IUser> data={users} render={renderUserRow} />
             </Table>
           </Menus>
         ) : (
-          !isPending && <Message>No data to show here!</Message>
+          !isLoading && <Message>No data to show here!</Message>
         )}
       </Direction>
     </>