Implement search method

hotel-management/src/components/Search.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+const StyledSearch = styled.input`
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  font-size: var(--fs-sm-x);
+  padding: 5px 10px;
+`;
+
+interface ISearch {
+  setKeyPhone: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const Search = ({ setKeyPhone }: ISearch) => {
+  const [query, setQuery] = useState('');
+
+  useEffect(() => {
+    const timeOut = setTimeout(() => {
+      setKeyPhone(query);
+    }, 500);
+
+    return () => clearTimeout(timeOut);
+  }, [setKeyPhone, query]);
+
+  return (
+    <StyledSearch
+      onChange={(e) => setQuery(e.target.value)}
+      placeholder="Search by phone..."
+    />
+  );
+};
+
+export default Search;

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, reload?: boolean) => {
+export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -15,8 +15,13 @@ export const useFetch = (path: string, reload?: boolean) => {
     const fetchData = async () => {
       setIsPending(true);
 
+      // prettier-ignore
+      const phoneSearchQuery = keyPhone
+        ? `?phone_like=${keyPhone}`
+        : '';
+
       try {
-        const response = await fetch(BASE_URL + path);
+        const response = await fetch(BASE_URL + path + phoneSearchQuery);
         const json = await response.json();
 
         if (!response.ok)
@@ -34,6 +39,6 @@ export const useFetch = (path: string, reload?: boolean) => {
     };
 
     fetchData();
-  }, [path, reload]);
+  }, [path, reload, keyPhone]);
   return { data, isPending, errorMsg };
 };

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

@@ -24,6 +24,7 @@ import Spinner from '../../commons/styles/Spinner';
 
 // Utils
 import { sendRequest } from '../../helpers/sendRequest';
+import Search from '../../components/Search';
 
 interface IUserRow {
   user: TUser;
@@ -104,7 +105,8 @@ const UserTable = ({
   openFormDialog,
   setUser,
 }: IUserTable) => {
-  const { data, isPending, errorMsg } = useFetch('users', reload);
+  const [keyPhone, setKeyPhone] = useState('');
+  const { data, isPending, errorMsg } = useFetch('users', keyPhone, reload);
   const [users, setUsers] = useState<TUser[]>([]);
 
   useEffect(() => {
@@ -121,13 +123,14 @@ const UserTable = ({
 
   return (
     <>
-      {isPending && <Spinner />}
-      {users.length ? (
       <Direction>
         <StyledOperationTable>
-            <p>Sort / Search table</p>
+          <Search setKeyPhone={setKeyPhone} />
         </StyledOperationTable>
 
+        {isPending && <Spinner />}
+
+        {users.length ? (
           <Menus>
             <Table columns="10% 30% 20% 20% 10% 5%">
               <Table.Header>
@@ -152,10 +155,10 @@ const UserTable = ({
               />
             </Table>
           </Menus>
-        </Direction>
         ) : (
           <Message>No data to show here!</Message>
         )}
+      </Direction>
     </>
   );
 };