Fix bug UI and update variable name

hotel-management/src/components/Search.tsx

@@ -9,19 +9,19 @@ const StyledSearch = styled.input`
 `;
 
 interface ISearch {
-  setKeyPhone: React.Dispatch<React.SetStateAction<string>>;
+  setPhoneSearch: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const Search = ({ setKeyPhone }: ISearch) => {
+const Search = ({ setPhoneSearch }: ISearch) => {
   const [query, setQuery] = useState('');
 
   useEffect(() => {
     const timeOut = setTimeout(() => {
-      setKeyPhone(query);
+      setPhoneSearch(query);
     }, 500);
 
     return () => clearTimeout(timeOut);
-  }, [setKeyPhone, query]);
+  }, [setPhoneSearch, query]);
 
   return (
     <StyledSearch

hotel-management/src/hooks/useFetch.ts

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
 // Constants
 import { BASE_URL } from '../constants/path';
 
-export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
+export const useFetch = (path: string, phoneNum: string, reload?: boolean) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -16,12 +16,12 @@ export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
       setIsPending(true);
 
       // prettier-ignore
-      const phoneSearchQuery = keyPhone
-        ? `?phone_like=${keyPhone}`
+      const query = phoneNum
+        ? `?phone_like=${phoneNum}`
         : '';
 
       try {
-        const response = await fetch(BASE_URL + path + phoneSearchQuery);
+        const response = await fetch(BASE_URL + path + query);
         const json = await response.json();
 
         if (!response.ok)
@@ -39,6 +39,6 @@ export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
     };
 
     fetchData();
-  }, [path, reload, keyPhone]);
+  }, [path, reload, phoneNum]);
   return { data, isPending, errorMsg };
 };

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

@@ -105,8 +105,8 @@ const UserTable = ({
   openFormDialog,
   setUser,
 }: IUserTable) => {
-  const [keyPhone, setKeyPhone] = useState('');
-  const { data, isPending, errorMsg } = useFetch('users', keyPhone, reload);
+  const [phoneSearch, setPhoneSearch] = useState('');
+  const { data, isPending, errorMsg } = useFetch('users', phoneSearch, reload);
   const [users, setUsers] = useState<TUser[]>([]);
 
   useEffect(() => {
@@ -125,7 +125,7 @@ const UserTable = ({
     <>
       <Direction>
         <StyledOperationTable>
-          <Search setKeyPhone={setKeyPhone} />
+          <Search setPhoneSearch={setPhoneSearch} />
         </StyledOperationTable>
 
         {isPending && <Spinner />}
@@ -156,7 +156,7 @@ const UserTable = ({
             </Table>
           </Menus>
         ) : (
-          <Message>No data to show here!</Message>
+          !isPending && <Message>No data to show here!</Message>
         )}
       </Direction>
     </>