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 asynchronous error

Browse Source
This commit is contained in:
nezumi
2023-11-05 12:25:01 +07:00
parent e82fb39787
commit b0dd3abf0e
8 changed files with 127 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/src/pages/Room/Dialog.tsx
+15 -7
View File
@@ -1,13 +1,21 @@
import { forwardRef, useEffect } from 'react';
// Components
import Dialog, { IDialogProps } from '../../components/Dialog';
import Dialog from '../../components/Dialog';
import RoomForm from './Form';
// Types
import { TRoom } from '../../globals/types';
const RoomDialog = forwardRef((props, ref) => {
interface IRoomDialog {
onClose?: () => void;
reload?: boolean;
setReload?: React.Dispatch<React.SetStateAction<boolean>>;
ref?: React.MutableRefObject<HTMLDialogElement | null>;
room?: TRoom | null;
isAdd?: boolean;
}
const RoomDialog = forwardRef((props: IRoomDialog, ref) => {
const dialogRef = ref as React.MutableRefObject<
HTMLDialogElement | undefined
>;
@@ -16,7 +24,7 @@ const RoomDialog = forwardRef((props, ref) => {
onClose,
setReload,
reload,
data,
room,
isAdd
} = props;
@@ -42,11 +50,11 @@ const RoomDialog = forwardRef((props, ref) => {
onClose={onClose!}
reload={reload!}
setReload={setReload!}
room={data}
room={room}
isAdd={isAdd!}
/>
</Dialog>
);
}) as React.FC<IDialogProps<TRoom>>;
});
export default RoomDialog;
hotel-management/src/pages/Room/index.tsx
+1 -1
View File
@@ -48,7 +48,7 @@ const Room = () => {
ref={dialogRef}
setReload={setReload}
reload={reload}
data={room}
room={room}
isAdd={isAdd}
/>
</>
hotel-management/src/pages/User/Dialog.tsx
+16 -8
View File
@@ -1,24 +1,32 @@
import { forwardRef, useEffect } from 'react';
// Components
import Dialog, { IDialogProps } from '../../components/Dialog';
import Dialog from '../../components/Dialog';
import UserForm from './Form';
// Types
import { TUser } from '../../globals/types';
import { useForwardRef } from '../../hooks/useForwardRef';
interface IUserDialog {
onClose: () => void;
reload: boolean;
setReload: React.Dispatch<React.SetStateAction<boolean>>;
ref: React.MutableRefObject<HTMLDialogElement | null>;
user: TUser | null;
isAdd: boolean;
}
const UserDialog = forwardRef((props, ref) => {
const dialogRef = ref as React.MutableRefObject<
HTMLDialogElement | undefined
>;
const dialogRef = useForwardRef(ref);
// prettier-ignore
const {
onClose,
setReload,
reload,
data,
isAdd
user,
isAdd,
} = props;
useEffect(() => {
@@ -43,11 +51,11 @@ const UserDialog = forwardRef((props, ref) => {
onClose={onClose!}
reload={reload!}
setReload={setReload!}
user={data}
user={user}
isAdd={isAdd!}
/>
</Dialog>
);
}) as React.FC<IDialogProps<TUser>>;
}) as React.FC<IUserDialog>;
export default UserDialog;
hotel-management/src/pages/User/Form.tsx
+63 -49
View File
@@ -1,4 +1,4 @@
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { FormProvider, useForm } from 'react-hook-form';
@@ -38,14 +38,14 @@ import {
REQUIRED_FIELD_ERROR,
} from '../../constants/formValidateMessage.ts';
import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
import { TUser } from '../../globals/types.ts';
import { TRoom, TUser } from '../../globals/types.ts';
import { INIT_VALUE_USER_FORM } from '../../constants/variables.ts';
interface IUserFormProp {
onClose: () => void;
reload: boolean;
setReload: React.Dispatch<React.SetStateAction<boolean>>;
user?: TUser | null;
user: TUser | null;
isAdd: boolean;
}
@@ -64,19 +64,17 @@ const UserForm = ({
formState: { errors, isDirty, isValid },
trigger,
} = formMethods;
const [rooms, setRooms] = useState<TRoom[]>([]);
const [options, setOptions] = useState<ISelectOptions[]>();
// Init value when edit form and load options
useEffect(() => {
const load = async () => {
const rooms = await getAllRoom();
const options: ISelectOptions[] = [];
const tempUser = isAdd
? {}
: {...user};
const tempUser = isAdd ? {} : { ...user };
// Load and set default options room
if (rooms) {
if (rooms.length > 0) {
rooms.forEach((item) => {
if (!item.status || tempUser?.roomId === item.id)
options.push({
@@ -103,55 +101,71 @@ const UserForm = ({
};
load();
}, [reset, user, isAdd]);
}, [reset, user, isAdd, rooms]);
// Submit form
const onSubmit = async (newUser: TUser) => {
try {
if (isAdd) {
// Add request
const response = await sendRequest(
USER_PATH,
'POST',
JSON.stringify(newUser)
);
const onSubmit = useCallback(
async (newUser: TUser) => {
try {
if (isAdd) {
// Add request
const response = await sendRequest(
USER_PATH,
'POST',
JSON.stringify(newUser)
);
if (response.statusCode === STATUS_CODE.CREATE) {
toast.success(ADD_SUCCESS);
if (response.statusCode === STATUS_CODE.CREATE) {
toast.success(ADD_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
// Update room status
updateRoomStatus(newUser.roomId, true);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
// Edit request
const response = await sendRequest(
USER_PATH + `/${newUser.id}`,
'PUT',
JSON.stringify(newUser)
);
if (response.statusCode == STATUS_CODE.OK) {
toast.success(EDIT_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
// Update room status
updateRoomStatus(user!.roomId, true, newUser.roomId);
}
// Update room status
updateRoomStatus(newUser.roomId, true);
} else {
// Edit request
const response = await sendRequest(
USER_PATH + `/${newUser.id}`,
'PUT',
JSON.stringify(newUser)
);
if (response.statusCode == STATUS_CODE.OK) {
toast.success(EDIT_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
// Reload table data
setReload(!reload);
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
// Update room status
updateRoomStatus(user!.roomId, true, newUser.roomId);
}
// Reload table data
setReload(!reload);
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
}
reset();
onClose();
};
reset();
onClose();
},
[isAdd, onClose, reload, reset, setReload, user]
);
// Load all rooms
useEffect(() => {
const loadRoom = async () => {
const rooms = await getAllRoom();
if (rooms) {
setRooms(rooms);
}
};
loadRoom();
}, [onSubmit]);
return (
<FormProvider {...formMethods}>
hotel-management/src/pages/User/Table.tsx
+3 -8
View File
@@ -75,11 +75,7 @@ const UserRow = ({
<div>{name}</div>
<div>{identifiedCode}</div>
<div>{phone}</div>
<div>{
roomId
? roomId
: 'None'
}</div>
<div>{roomId ? roomId : 'None'}</div>
<Menus.Menu>
<Menus.Toggle id={id.toString()} />
@@ -116,9 +112,9 @@ const UserTable = ({
openFormDialog,
setUser,
}: IUserTable) => {
const [users, setUsers] = useState<TUser[]>([]);
const [phoneSearch, setPhoneSearch] = useState('');
const [searchParams] = useSearchParams();
const [users, setUsers] = useState<TUser[]>([]);
const sortByValue = searchParams.get('sortBy')
? searchParams.get('sortBy')!
: '';
@@ -145,8 +141,7 @@ const UserTable = ({
if (errorFetchMsg) {
console.error(errorFetchMsg);
}
}, [data, errorFetchMsg]);
}, [data, errorFetchMsg, setUsers]);
return (
<>
hotel-management/src/pages/User/index.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import UserDialog from './Dialog';
import { TUser } from '../../globals/types';
const User = () => {
const dialogRef = useRef<HTMLDialogElement>();
const dialogRef = useRef<HTMLDialogElement>(null);
const [reload, setReload] = useState(true);
const [user, setUser] = useState<TUser | null>(null);
const [isAdd, setIsAdd] = useState(false);
@@ -48,7 +48,7 @@ const User = () => {
ref={dialogRef}
setReload={setReload}
reload={reload}
data={user}
user={user}
isAdd={isAdd}
/>
</>