nezumi/react-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/react-training.git synced 2026-09-22 20:01:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix bug UI and update variable name

Browse Source
This commit is contained in:
nezumi
2023-10-30 14:57:53 +07:00
parent 96bbe99523
commit af4af45aeb
3 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/src/components/Search.tsx
+4 -4
View File
@@ -9,19 +9,19 @@ const StyledSearch = styled.input`
`; `;
interface ISearch { 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(''); const [query, setQuery] = useState('');
useEffect(() => { useEffect(() => {
const timeOut = setTimeout(() => { const timeOut = setTimeout(() => {
setKeyPhone(query); setPhoneSearch(query);
}, 500); }, 500);
return () => clearTimeout(timeOut); return () => clearTimeout(timeOut);
}, [setKeyPhone, query]); }, [setPhoneSearch, query]);
return ( return (
<StyledSearch <StyledSearch
hotel-management/src/hooks/useFetch.ts
+5 -5
View File
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
// Constants // Constants
import { BASE_URL } from '../constants/path'; 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 [data, setData] = useState(null);
const [isPending, setIsPending] = useState(false); const [isPending, setIsPending] = useState(false);
const [errorMsg, setErrorMsg] = useState<string | null>(null); const [errorMsg, setErrorMsg] = useState<string | null>(null);
@@ -16,12 +16,12 @@ export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
setIsPending(true); setIsPending(true);
// prettier-ignore // prettier-ignore
const phoneSearchQuery = keyPhone const query = phoneNum
? `?phone_like=${keyPhone}` ? `?phone_like=${phoneNum}`
: ''; : '';
try { try {
const response = await fetch(BASE_URL + path + phoneSearchQuery); const response = await fetch(BASE_URL + path + query);
const json = await response.json(); const json = await response.json();
if (!response.ok) if (!response.ok)
@@ -39,6 +39,6 @@ export const useFetch = (path: string, keyPhone: string, reload?: boolean) => {
}; };
fetchData(); fetchData();
}, [path, reload, keyPhone]); }, [path, reload, phoneNum]);
return { data, isPending, errorMsg }; return { data, isPending, errorMsg };
}; };
hotel-management/src/pages/User/Table.tsx
+4 -4
View File
@@ -105,8 +105,8 @@ const UserTable = ({
openFormDialog, openFormDialog,
setUser, setUser,
}: IUserTable) => { }: IUserTable) => {
const [keyPhone, setKeyPhone] = useState(''); const [phoneSearch, setPhoneSearch] = useState('');
const { data, isPending, errorMsg } = useFetch('users', keyPhone, reload); const { data, isPending, errorMsg } = useFetch('users', phoneSearch, reload);
const [users, setUsers] = useState<TUser[]>([]); const [users, setUsers] = useState<TUser[]>([]);
useEffect(() => { useEffect(() => {
@@ -125,7 +125,7 @@ const UserTable = ({
<> <>
<Direction> <Direction>
<StyledOperationTable> <StyledOperationTable>
<Search setKeyPhone={setKeyPhone} /> <Search setPhoneSearch={setPhoneSearch} />
</StyledOperationTable> </StyledOperationTable>
{isPending && <Spinner />} {isPending && <Spinner />}
@@ -156,7 +156,7 @@ const UserTable = ({
</Table> </Table>
</Menus> </Menus>
) : ( ) : (
<Message>No data to show here!</Message> !isPending && <Message>No data to show here!</Message>
)} )}
</Direction> </Direction>
</> </>