From 96bbe99523ec1b18f54e4c4e4a577f7fee9c0bae Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 30 Oct 2023 14:13:27 +0700 Subject: [PATCH 1/2] Implement search method --- hotel-management/src/components/Search.tsx | 34 ++++++++++++++++++++++ hotel-management/src/hooks/useFetch.ts | 11 +++++-- hotel-management/src/pages/User/Table.tsx | 25 +++++++++------- 3 files changed, 56 insertions(+), 14 deletions(-) create mode 100644 hotel-management/src/components/Search.tsx diff --git a/hotel-management/src/components/Search.tsx b/hotel-management/src/components/Search.tsx new file mode 100644 index 0000000..facaf21 --- /dev/null +++ b/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>; +} + +const Search = ({ setKeyPhone }: ISearch) => { + const [query, setQuery] = useState(''); + + useEffect(() => { + const timeOut = setTimeout(() => { + setKeyPhone(query); + }, 500); + + return () => clearTimeout(timeOut); + }, [setKeyPhone, query]); + + return ( + setQuery(e.target.value)} + placeholder="Search by phone..." + /> + ); +}; + +export default Search; diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts index aacea1f..7345d2a 100644 --- a/hotel-management/src/hooks/useFetch.ts +++ b/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(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 }; }; diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx index 533ba3c..6797316 100644 --- a/hotel-management/src/pages/User/Table.tsx +++ b/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([]); useEffect(() => { @@ -121,13 +123,14 @@ const UserTable = ({ return ( <> - {isPending && } - {users.length ? ( - - -

Sort / Search table

- + + + + + {isPending && } + + {users.length ? ( @@ -152,10 +155,10 @@ const UserTable = ({ />
- - ) : ( - No data to show here! - )} + ) : ( + No data to show here! + )} + ); }; From af4af45aeb74dcce1e0efe5c40da9b5f552c3dca Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Mon, 30 Oct 2023 14:57:53 +0700 Subject: [PATCH 2/2] Fix bug UI and update variable name --- hotel-management/src/components/Search.tsx | 8 ++++---- hotel-management/src/hooks/useFetch.ts | 10 +++++----- hotel-management/src/pages/User/Table.tsx | 8 ++++---- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/hotel-management/src/components/Search.tsx b/hotel-management/src/components/Search.tsx index facaf21..71538f5 100644 --- a/hotel-management/src/components/Search.tsx +++ b/hotel-management/src/components/Search.tsx @@ -9,19 +9,19 @@ const StyledSearch = styled.input` `; interface ISearch { - setKeyPhone: React.Dispatch>; + setPhoneSearch: React.Dispatch>; } -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 ( { +export const useFetch = (path: string, phoneNum: string, reload?: boolean) => { const [data, setData] = useState(null); const [isPending, setIsPending] = useState(false); const [errorMsg, setErrorMsg] = useState(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 }; }; diff --git a/hotel-management/src/pages/User/Table.tsx b/hotel-management/src/pages/User/Table.tsx index 6797316..e9e60e8 100644 --- a/hotel-management/src/pages/User/Table.tsx +++ b/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([]); useEffect(() => { @@ -125,7 +125,7 @@ const UserTable = ({ <> - + {isPending && } @@ -156,7 +156,7 @@ const UserTable = ({ ) : ( - No data to show here! + !isPending && No data to show here! )}