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

Fix bug and optimzed code

Browse Source
This commit is contained in:
nezumi
2023-11-06 11:27:29 +07:00
parent 96d1e6038c
commit 7bfc2bcfa4
32 changed files with 285 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/src/commons/styles/Button.ts
+4 -2
View File
@@ -1,7 +1,9 @@
import styled, { css } from 'styled-components';
type TButtonStyle = 'primary' | 'secondary';
interface IButtonStyle {
styled?: 'primary' | 'secondary';
styled?: TButtonStyle;
}
const Button = styled.button<IButtonStyle>`
@@ -11,7 +13,7 @@ const Button = styled.button<IButtonStyle>`
font-weight: 600;
cursor: pointer;
border-radius: var(--radius-md);
${(props) =>
hotel-management/src/commons/styles/ButtonIcon.ts
+1 -1
View File
@@ -5,7 +5,7 @@ const ButtonIcon = styled.button`
padding: 8px;
transition: all 0.2s;
border: none;
border-radius: var(--radius-md);
hotel-management/src/commons/styles/CommonInput.ts
+2 -2
View File
@@ -5,9 +5,9 @@ const CommonInput = css`
border-radius: var(--radius-sm);
padding: 10px 20px;
font-size: var(--fs-sm-x);
width: 200px;
`;
hotel-management/src/commons/styles/Direction.ts
+3 -1
View File
@@ -1,7 +1,9 @@
import styled, { css } from 'styled-components';
type TDirection = 'vertical' | 'horizontal';
interface IDirection {
type?: 'vertical' | 'horizontal';
type?: TDirection;
}
const Direction = styled.div<IDirection>`
hotel-management/src/commons/styles/Input.ts
+3 -1
View File
@@ -3,8 +3,10 @@ import styled, { css } from 'styled-components';
// Styled
import CommonInput from './CommonInput';
type TInput = 'text' | 'checkbox' | 'hidden';
interface IInputTyped {
type?: 'text' | 'checkbox' | 'hidden';
type?: TInput;
}
const Input = styled.input<IInputTyped>`
hotel-management/src/components/Dialog/index.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export interface IDialogProps {
const Dialog = forwardRef<HTMLDialogElement, IDialogProps>(
(props: IDialogProps, ref) => {
const { title, children, onClose } = props;
return (
<StyledDialog ref={ref} onClose={onClose}>
<StyledTitle>{title}</StyledTitle>
hotel-management/src/components/Search/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { memo, useEffect, useState } from 'react';
import { useEffect, useState } from 'react';
// Styled
import { StyledSearch } from './styled';
@@ -11,7 +11,7 @@ interface ISearch {
setValueSearch: (phone: string) => void;
}
const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
const [query, setQuery] = useState('');
const debounceValue = useDebounce<string>(query, 700);
@@ -25,6 +25,6 @@ const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
placeholder={setPlaceHolder}
/>
);
});
};
export default Search;
hotel-management/src/components/Select/index.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ const Select = ({
optionsConfigForm,
value,
onChange,
ariaLabel
ariaLabel,
}: ISelect) => {
const { register } = useFormContext() ?? {};
hotel-management/src/components/Sidebar/styled.ts
+1 -1
View File
@@ -12,7 +12,7 @@ const Heading = styled.h1`
font-size: var(--fs-md);
text-transform: uppercase;
text-align: center;
color: var(--primary-color);
`;
hotel-management/src/components/SortBy/index.tsx
+5 -5
View File
@@ -20,11 +20,11 @@ const SortBy = memo(({ options }: ISortByProps) => {
};
return (
<Select
options={options}
value={sortBy}
onChange={handleChange}
ariaLabel='Sort'
<Select
options={options}
value={sortBy}
onChange={handleChange}
ariaLabel="Sort"
/>
);
});
hotel-management/src/components/Table/index.tsx
+1 -1
View File
@@ -42,7 +42,7 @@ const Body = <T,>({ data, render }: ITableBody<T>) => {
const Row = ({ children }: ITable) => {
const { columns } = useContext(TableContext);
return <StyledRow columns={columns}>{children}</StyledRow>;
};
hotel-management/src/constants/messages.ts
+2 -5
View File
@@ -1,20 +1,17 @@
const errorMsg = (errorCode: number, msg: string) => {
return `Error code: ${errorCode}. Message: ${msg}`;
};
const ADD_SUCCESS = 'Add success';
const EDIT_SUCCESS = 'Edit success';
const CONFIRM_MESSAGE = 'Do you want to checkout this user?';
const CONFIRM_DELETE = 'Are you sure to delete it?'
const DELETE_SUCCESS = 'Delete success';
const CHECKOUT_SUCCESS = 'Check out success';
const DENIED_ACTION = "Can't checkout user not in room!";
export {
ADD_SUCCESS,
errorMsg,
EDIT_SUCCESS,
CONFIRM_MESSAGE,
CONFIRM_DELETE,
DELETE_SUCCESS,
CHECKOUT_SUCCESS,
DENIED_ACTION
};
hotel-management/src/constants/responseStatus.ts
-1
View File
@@ -2,7 +2,6 @@ const STATUS_CODE = {
OK: 200,
CREATE: 201,
NOT_FOUND: 404,
INTERNAL_SERVER_ERROR: 500,
};
const RESPONSE_MESSAGE = {
hotel-management/src/constants/variables.ts
+8
View File
@@ -61,6 +61,13 @@ const INIT_VALUE_USER_FORM = {
phone: '',
};
const INIT_VALUE_ROOM_FORM = {
name: '',
id: 0,
price: 0,
discount: 0,
};
export {
USER_PAGE,
ROOM_PAGE,
@@ -68,4 +75,5 @@ export {
ERROR,
ORDERBY_OPTIONS,
INIT_VALUE_USER_FORM,
INIT_VALUE_ROOM_FORM,
};
hotel-management/src/helpers/utils.ts → hotel-management/src/helpers/helper.ts
+16 -12
View File
@@ -1,17 +1,6 @@
// Constants
import { REQUIRED_FIELD_ERROR } from '../constants/formValidateMessage';
/**
* Set required error for value
* @param value The value set required or not
* @param isRequired Set required for value
* @returns Return error text if value has required
*/
const isRequired = (value: string | number, isRequired: unknown) => {
if (!value && isRequired) return REQUIRED_FIELD_ERROR;
return '';
};
/**
* Create query url for search
* @param columnSearch Column want to search
@@ -53,6 +42,11 @@ const searchQuery = (
return query;
};
/**
* Convert value to currency format with value
* @param value Value need to be converted
* @returns Return the string value with currency
*/
const formatCurrency = (value: number): string => {
return Intl.NumberFormat('en-US', {
style: 'currency',
@@ -60,4 +54,14 @@ const formatCurrency = (value: number): string => {
}).format(value);
};
export { isRequired, searchQuery, formatCurrency, REQUIRED_FIELD_ERROR };
/**
* Create error string
* @param errorCode Error code
* @param msg Message error
* @returns Return the full error string
*/
const errorMsg = (errorCode: number, msg: string) => {
return `Error code: ${errorCode}. Message: ${msg}`;
};
export { errorMsg, searchQuery, formatCurrency, REQUIRED_FIELD_ERROR };
hotel-management/src/helpers/sendRequest.ts
+2 -2
View File
@@ -2,7 +2,7 @@
import { BASE_URL } from '../constants/path';
// Types
import { TResponse } from '../types/response';
import { IResponse } from '../types/responses';
type TMethodRequest = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
@@ -17,7 +17,7 @@ export const sendRequest = async <T>(
path: string,
method: TMethodRequest = 'GET',
body?: BodyInit
): Promise<TResponse<T>> => {
): Promise<IResponse<T>> => {
const response = await fetch(BASE_URL + path, {
method,
body,
hotel-management/src/hooks/useFetch.ts
+5 -5
View File
@@ -5,7 +5,7 @@ import { BASE_URL } from '../constants/path';
import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
// Helpers
import { searchQuery } from '../helpers/utils';
import { searchQuery } from '../helpers/helper';
// Types
import { Nullable } from '../types/common';
@@ -40,11 +40,11 @@ const useFetch = (
setIsPending(true);
// Set default value
const sortBy = tempSortBy
? tempSortBy
const sortBy = tempSortBy
? tempSortBy
: DEFAULT_SORT_BY;
const orderBy = tempOrderBy
? tempOrderBy
const orderBy = tempOrderBy
? tempOrderBy
: DEFAULT_ORDER_BY;
// Query search
hotel-management/src/hooks/useOutsideClick.ts
+1 -1
View File
@@ -11,7 +11,7 @@ import { Nullable } from '../types/common';
*/
export const useOutsideClick = (
handler: () => void,
listeningCapturing = true,
listeningCapturing = true
): MutableRefObject<Nullable<HTMLUListElement>> => {
const ref = useRef<HTMLUListElement>(null);
hotel-management/src/pages/Room/Dialog.tsx
+2 -2
View File
@@ -12,7 +12,7 @@ import RoomForm from './Form';
// Types
import { Nullable } from '../../types/common';
import { TRoom } from '../../types/rooms';
import { IRoom } from '../../types/rooms';
// Hooks
import { useForwardRef } from '../../hooks/useForwardRef';
@@ -22,7 +22,7 @@ interface IRoomDialog {
reload?: boolean;
setReload?: Dispatch<SetStateAction<boolean>>;
ref?: MutableRefObject<Nullable<HTMLDialogElement>>;
room?: Nullable<TRoom>;
room?: Nullable<IRoom>;
isAdd?: boolean;
}
hotel-management/src/pages/Room/Form.tsx
+15 -28
View File
@@ -11,15 +11,12 @@ import Input from '../../commons/styles/Input.ts';
// Types
import { Nullable } from '../../types/common';
import { TRoom } from '../../types/rooms.ts';
import { IRoom } from '../../types/rooms';
// Constants
import { ROOM_PATH } from '../../constants/path.ts';
import { STATUS_CODE } from '../../constants/responseStatus.ts';
import {
ADD_SUCCESS,
EDIT_SUCCESS,
errorMsg,
} from '../../constants/messages.ts';
import {
INVALID_DISCOUNT,
@@ -28,7 +25,6 @@ import {
} from '../../constants/formValidateMessage.ts';
// Helpers
import { sendRequest } from '../../helpers/sendRequest.ts';
import {
isValidDiscount,
isValidNumber,
@@ -38,6 +34,8 @@ import {
// Components
import FormRow from '../../components/LabelControl/index.tsx';
import Form from '../../components/Form/index.tsx';
import { addRoom, updateRoom } from '../../services/roomServices.ts';
import { INIT_VALUE_ROOM_FORM } from '../../constants/variables.ts';
const FormBtn = styled(Button)`
width: 100%;
@@ -53,7 +51,7 @@ interface IRoomFormProp {
onClose: () => void;
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
room?: Nullable<TRoom>;
room?: Nullable<IRoom>;
isAdd: boolean;
}
@@ -64,7 +62,7 @@ const RoomForm = ({
room,
isAdd,
}: IRoomFormProp) => {
const formMethods = useForm<TRoom>();
const formMethods = useForm<IRoom>();
const {
register,
handleSubmit,
@@ -74,43 +72,32 @@ const RoomForm = ({
} = formMethods;
useEffect(() => {
if (room) {
if (room && !isAdd) {
reset(room);
} else {
reset(INIT_VALUE_ROOM_FORM);
}
}, [room, reset]);
}, [room, reset, isAdd]);
// Submit form
const onSubmit = async (room: TRoom) => {
const onSubmit = async (room: IRoom) => {
// Calculate final price
room.finalPrice = room.price - (room.price * room.discount) / 100;
try {
if (isAdd) {
// Add request
const response = await sendRequest(
ROOM_PATH,
'POST',
JSON.stringify(room)
);
if (response.statusCode === STATUS_CODE.CREATE) {
const response = await addRoom(room);
if(response) {
toast.success(ADD_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
} else {
// Edit request
const response = await sendRequest(
ROOM_PATH + `/${room!.id}`,
'PUT',
JSON.stringify(room)
);
const response = await updateRoom(room);
if (response.statusCode == STATUS_CODE.OK) {
if (response) {
toast.success(EDIT_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
}
// Reload table data
hotel-management/src/pages/Room/Table.tsx
+10 -10
View File
@@ -16,7 +16,7 @@ import OrderBy from '../../components/OrderBy';
// Types
import { Nullable } from '../../types/common';
import { TRoom } from '../../types/rooms';
import { IRoom } from '../../types/rooms';
// Constants
import { useFetch } from '../../hooks/useFetch';
@@ -30,12 +30,12 @@ import Spinner from '../../commons/styles/Spinner';
// Helpers
import { sendRequest } from '../../helpers/sendRequest';
import { formatCurrency } from '../../helpers/utils';
import { formatCurrency } from '../../helpers/helper';
interface IRoomRow {
room: TRoom;
room: IRoom;
openFormDialog: () => void;
setRoom: Dispatch<SetStateAction<Nullable<TRoom>>>;
setRoom: Dispatch<SetStateAction<Nullable<IRoom>>>;
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
}
@@ -47,12 +47,12 @@ const RoomRow = ({
reload,
setReload,
}: IRoomRow) => {
const handleEdit = (room: TRoom) => {
const handleEdit = (room: IRoom) => {
setRoom(room);
openFormDialog();
};
const handleDelete = async (room: TRoom) => {
const handleDelete = async (room: IRoom) => {
if (confirm(CONFIRM_DELETE)) {
const response = await sendRequest(ROOM_PATH + `/${room.id}`, 'DELETE');
@@ -101,7 +101,7 @@ interface IRoomTable {
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
openFormDialog: () => void;
setRoom?: Dispatch<SetStateAction<Nullable<TRoom>>>;
setRoom?: Dispatch<SetStateAction<Nullable<IRoom>>>;
}
const RoomTable = ({
@@ -112,7 +112,7 @@ const RoomTable = ({
}: IRoomTable) => {
const [nameSearch, setNameSearch] = useState('');
const [searchParams] = useSearchParams();
const [rooms, setRooms] = useState<TRoom[]>([]);
const [rooms, setRooms] = useState<IRoom[]>([]);
const sortByValue = searchParams.get('sortBy')
? searchParams.get('sortBy')!
: '';
@@ -165,9 +165,9 @@ const RoomTable = ({
<div>Price</div>
<div>Status</div>
</Table.Header>
<Table.Body<TRoom>
<Table.Body<IRoom>
data={rooms}
render={(room: TRoom) => (
render={(room: IRoom) => (
<RoomRow
room={room}
key={room.id}
hotel-management/src/pages/Room/index.tsx
+2 -2
View File
@@ -11,12 +11,12 @@ import RoomDialog from './Dialog';
// Types
import { Nullable } from '../../types/common';
import { TRoom } from '../../types/rooms';
import { IRoom } from '../../types/rooms';
const Room = () => {
const dialogRef = useRef<HTMLDialogElement>(null);
const [reload, setReload] = useState(true);
const [room, setRoom] = useState<Nullable<TRoom>>(null);
const [room, setRoom] = useState<Nullable<IRoom>>(null);
const [isAdd, setIsAdd] = useState(false);
const openFormDialog = (isAddForm: boolean = false) => {
hotel-management/src/pages/User/Dialog.tsx
+2 -2
View File
@@ -12,7 +12,7 @@ import UserForm from './Form';
// Types
import { Nullable } from '../../types/common';
import { TUser } from '../../types/user';
import { IUser } from '../../types/users';
// Hooks
import { useForwardRef } from '../../hooks/useForwardRef';
@@ -22,7 +22,7 @@ interface IUserDialog {
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
ref: MutableRefObject<Nullable<HTMLDialogElement>>;
user: Nullable<TUser>;
user: Nullable<IUser>;
isAdd: boolean;
}
hotel-management/src/pages/User/Form.tsx
+29 -40
View File
@@ -19,7 +19,6 @@ import FormRow from '../../components/LabelControl/index.tsx';
import Select, { ISelectOptions } from '../../components/Select';
// Helpers
import { sendRequest } from '../../helpers/sendRequest.ts';
import {
isEmptyObj,
isValidName,
@@ -28,13 +27,7 @@ import {
} from '../../helpers/validators.ts';
// Constants
import { STATUS_CODE } from '../../constants/responseStatus.ts';
import {
ADD_SUCCESS,
EDIT_SUCCESS,
errorMsg,
} from '../../constants/messages.ts';
import { USER_PATH } from '../../constants/path.ts';
import { ADD_SUCCESS, EDIT_SUCCESS } from '../../constants/messages.ts';
import {
INVALID_FIELD,
INVALID_PHONE,
@@ -49,15 +42,16 @@ import { FormBtn } from './styled.ts';
import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
// Types
import { Nullable } from '../../types/common';
import { TUser } from '../../types/user.ts';
import { TRoom } from '../../types/rooms.ts';
import { Nullable } from '../../types/common.ts';
import { IUser } from '../../types/users.ts';
import { IRoom } from '../../types/rooms.ts';
import { createUser, updateUser } from '../../services/userServices.ts';
interface IUserFormProp {
onClose: () => void;
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
user: Nullable<TUser>;
user: Nullable<IUser>;
isAdd: boolean;
}
@@ -68,7 +62,7 @@ const UserForm = ({
user,
isAdd,
}: IUserFormProp) => {
const formMethods = useForm<TUser>();
const formMethods = useForm<IUser>();
const {
register,
handleSubmit,
@@ -76,17 +70,25 @@ const UserForm = ({
formState: { errors, isDirty, isValid },
trigger,
} = formMethods;
const [rooms, setRooms] = useState<TRoom[]>([]);
const [rooms, setRooms] = useState<IRoom[]>([]);
const [options, setOptions] = useState<ISelectOptions[]>();
// Init value when edit form and load options
useEffect(() => {
const load = async () => {
const options: ISelectOptions[] = [];
const tempUser = isAdd ? {} : { ...user };
const tempUser = isAdd
? {}
: { ...user };
// Load and set default options room
if (rooms.length > 0) {
// Init first options
options.push({
label: '---Select---',
value: '0',
});
rooms.forEach((item) => {
if (!item.status || tempUser?.roomId === item.id)
options.push({
@@ -98,16 +100,10 @@ const UserForm = ({
if (options.length > 0) {
setOptions(options);
reset({ roomId: +options[0].value });
}
if (!isEmptyObj(tempUser)) {
// Init value
// Set default value when user not have room yet.
if (!tempUser.roomId) {
tempUser.roomId = +options[0].value;
}
reset(tempUser);
} else {
reset(INIT_VALUE_USER_FORM);
@@ -119,36 +115,24 @@ const UserForm = ({
// Submit form
const onSubmit = useCallback(
async (newUser: TUser) => {
async (newUser: IUser) => {
try {
if (isAdd) {
// Add request
const response = await sendRequest(
USER_PATH,
'POST',
JSON.stringify(newUser)
);
const response = await createUser(newUser);
if (response.statusCode === STATUS_CODE.CREATE) {
if (response) {
toast.success(ADD_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
// Update room status
updateRoomStatus(newUser.roomId, true);
} else {
// Edit request
const response = await sendRequest(
USER_PATH + `/${newUser.id}`,
'PUT',
JSON.stringify(newUser)
);
const response = await updateUser(newUser);
if (response.statusCode == STATUS_CODE.OK) {
if (response) {
toast.success(EDIT_SUCCESS);
} else {
throw new Error(errorMsg(response.statusCode, response.msg));
}
// Update room status
@@ -232,7 +216,7 @@ const UserForm = ({
</FormRow>
<FormRow label="Room">
{options && options.length > 0 ? (
{options && options.length > 1 ? (
<Select
id="roomId"
options={options!}
@@ -240,6 +224,7 @@ const UserForm = ({
optionsConfigForm={{
valueAsNumber: true,
onChange: () => trigger('roomId'),
validate: (v) => v !== 0,
}}
/>
) : (
@@ -249,7 +234,11 @@ const UserForm = ({
<Form.Action>
<FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
{isAdd ? 'Add' : 'Save'}
{
isAdd
? 'Add'
: 'Save'
}
</FormBtn>
<FormBtn type="button" styled="secondary" onClick={onClose}>
Close
hotel-management/src/pages/User/Table.tsx
+27 -22
View File
@@ -15,7 +15,7 @@ import OrderBy from '../../components/OrderBy';
// Types
import { Nullable } from '../../types/common';
import { TUser } from '../../types/user';
import { IUser } from '../../types/users';
// Hooks
import { useFetch } from '../../hooks/useFetch';
@@ -23,7 +23,7 @@ import { useFetch } from '../../hooks/useFetch';
// Constants
import { STATUS_CODE } from '../../constants/responseStatus';
import { ORDERBY_OPTIONS, USER_PAGE } from '../../constants/variables';
import { CONFIRM_MESSAGE } from '../../constants/messages';
import { CONFIRM_MESSAGE, DENIED_ACTION } from '../../constants/messages';
// Styled
import { StyledOperationTable } from './styled';
@@ -34,9 +34,9 @@ import { updateRoomStatus } from '../../services/roomServices';
import { checkOutUser } from '../../services/userServices';
interface IUserRow {
user: TUser;
user: IUser;
openFormDialog: () => void;
setUser: Dispatch<SetStateAction<Nullable<TUser>>>;
setUser: Dispatch<SetStateAction<Nullable<IUser>>>;
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
}
@@ -48,26 +48,31 @@ const UserRow = ({
reload,
setReload,
}: IUserRow) => {
const handleEdit = (user: TUser) => {
const handleEdit = (user: IUser) => {
setUser(user);
openFormDialog();
};
const handleCheckOut = async (user: TUser) => {
if (confirm(CONFIRM_MESSAGE)) {
const resUpdateStatus = await updateRoomStatus(user.roomId, false);
const resCheckoutUser = await checkOutUser(user);
if (
resCheckoutUser?.statusCode === STATUS_CODE.OK &&
resUpdateStatus?.statusCode === STATUS_CODE.OK
) {
toast.success('Check out complete!');
// Reload table
setReload(!reload);
const handleCheckOut = async (user: IUser) => {
if(user.roomId !== 0) {
if (confirm(CONFIRM_MESSAGE)) {
const resUpdateStatus = await updateRoomStatus(user.roomId, false);
const resCheckoutUser = await checkOutUser(user);
if (
resCheckoutUser?.statusCode === STATUS_CODE.OK &&
resUpdateStatus?.statusCode === STATUS_CODE.OK
) {
toast.success('Check out complete!');
// Reload table
setReload(!reload);
}
}
} else {
toast.error(DENIED_ACTION);
}
};
const { id, name, identifiedCode, phone, roomId } = user;
@@ -107,7 +112,7 @@ interface IUserTable {
reload: boolean;
setReload: Dispatch<SetStateAction<boolean>>;
openFormDialog: () => void;
setUser?: Dispatch<SetStateAction<Nullable<TUser>>>;
setUser?: Dispatch<SetStateAction<Nullable<IUser>>>;
}
const UserTable = ({
@@ -116,7 +121,7 @@ const UserTable = ({
openFormDialog,
setUser,
}: IUserTable) => {
const [users, setUsers] = useState<TUser[]>([]);
const [users, setUsers] = useState<IUser[]>([]);
const [phoneSearch, setPhoneSearch] = useState('');
const [searchParams] = useSearchParams();
const sortByValue = searchParams.get('sortBy')
@@ -172,9 +177,9 @@ const UserTable = ({
<div>Phone</div>
<div>Room Id</div>
</Table.Header>
<Table.Body<TUser>
<Table.Body<IUser>
data={users}
render={(user: TUser) => (
render={(user: IUser) => (
<UserRow
user={user}
key={user.id}
hotel-management/src/pages/User/index.tsx
+2 -2
View File
@@ -11,12 +11,12 @@ import UserDialog from './Dialog';
// Types
import { Nullable } from '../../types/common';
import { TUser } from '../../types/user';
import { IUser } from '../../types/users';
const User = () => {
const dialogRef = useRef<HTMLDialogElement>(null);
const [reload, setReload] = useState(true);
const [user, setUser] = useState<Nullable<TUser>>(null);
const [user, setUser] = useState<Nullable<IUser>>(null);
const [isAdd, setIsAdd] = useState(false);
const openFormDialog = (isAddForm: boolean = false) => {
hotel-management/src/services/roomServices.ts
+80 -51
View File
@@ -2,24 +2,24 @@ import toast from 'react-hot-toast';
// Types
import { Nullable } from '../types/common';
import { TRoom } from '../types/rooms';
import { TResponse } from '../types/response';
import { IResponse } from '../types/responses';
import { IRoom } from '../types/rooms';
// Helpers
import { sendRequest } from '../helpers/sendRequest';
import { errorMsg } from '../helpers/helper';
// Constants
import { STATUS_CODE, RESPONSE_MESSAGE } from '../constants/responseStatus';
import { errorMsg } from '../constants/messages';
import { ROOM_PATH } from '../constants/path';
/**
* Get all rooms from server
* @returns Return all rooms in server
*/
const getAllRoom = async (): Promise<Nullable<TRoom[]>> => {
const getAllRoom = async (): Promise<Nullable<IRoom[]>> => {
try {
const response = await sendRequest<TRoom[]>(ROOM_PATH);
const response = await sendRequest<IRoom[]>(ROOM_PATH);
if (response.statusCode === STATUS_CODE.OK) {
const rooms = response.data!;
@@ -42,17 +42,17 @@ const getAllRoom = async (): Promise<Nullable<TRoom[]>> => {
* @param roomId The id room need to be get
* @returns Return the room object depend on room id
*/
const getRoom = async (roomId: number): Promise<Nullable<TRoom>> => {
const getRoom = async (roomId: number): Promise<Nullable<IRoom>> => {
try {
const response = await sendRequest<TRoom>(ROOM_PATH + '/' + roomId);
const response = await sendRequest<IRoom>(ROOM_PATH + '/' + roomId);
if (response.statusCode === STATUS_CODE.OK) {
const rooms = response.data!;
return rooms;
} else {
if (response.statusCode !== STATUS_CODE.OK) {
throw new Error(errorMsg(response.statusCode, response.msg));
}
const rooms = response.data!;
return rooms;
} catch (error) {
if (error instanceof Error) {
toast.error(error.message);
@@ -67,18 +67,14 @@ const getRoom = async (roomId: number): Promise<Nullable<TRoom>> => {
* @param room Room object need to be updated
* @returns The response object
*/
const updateRoom = async (room: TRoom): Promise<Nullable<TResponse<TRoom>>> => {
const updateRoom = async (room: IRoom): Promise<Nullable<IResponse<IRoom>>> => {
try {
const response = await sendRequest<TRoom>(
const response = await sendRequest<IRoom>(
ROOM_PATH + '/' + room.id,
'PUT',
JSON.stringify(room)
);
if (response.statusCode !== STATUS_CODE.OK) {
throw new Error(errorMsg(response.statusCode, response.msg));
}
return response;
} catch (error: unknown) {
if (error instanceof Error) {
@@ -100,45 +96,78 @@ const updateRoomStatus = async (
roomId: number,
status: boolean,
roomIdNew?: number
): Promise<Nullable<TResponse<TRoom>>> => {
if (!roomIdNew) {
const response = await sendRequest<TRoom>(
ROOM_PATH + '/' + roomId,
): Promise<Nullable<IResponse<IRoom>>> => {
try {
if (!roomIdNew) {
const response = await sendRequest<IRoom>(
ROOM_PATH + '/' + roomId,
'PATCH',
JSON.stringify({ status: status })
);
return response;
}
// Update new room status
const resNewRoom = await sendRequest<IRoom>(
ROOM_PATH + '/' + roomIdNew,
'PATCH',
JSON.stringify({ status: status })
);
return response;
}
// Update new room status
const resNewRoom = await sendRequest<TRoom>(
ROOM_PATH + '/' + roomIdNew,
'PATCH',
JSON.stringify({ status: status })
);
// Update old room status;
const resOldRoom = await sendRequest<IRoom>(
ROOM_PATH + '/' + roomId,
'PATCH',
JSON.stringify({ status: !status })
);
// Update old room status;
const resOldRoom = await sendRequest<TRoom>(
ROOM_PATH + '/' + roomId,
'PATCH',
JSON.stringify({ status: !status })
);
if (
resNewRoom.statusCode === STATUS_CODE.OK &&
resOldRoom.statusCode === STATUS_CODE.OK
) {
return {
statusCode: STATUS_CODE.OK,
msg: RESPONSE_MESSAGE.UPDATE_SUCCESS,
};
if (
resNewRoom.statusCode === STATUS_CODE.OK &&
resOldRoom.statusCode === STATUS_CODE.OK
) {
return {
statusCode: STATUS_CODE.OK,
msg: RESPONSE_MESSAGE.UPDATE_SUCCESS,
};
}
} catch (error) {
if (error instanceof Error) {
toast.error(error.message);
}
}
return {
statusCode: STATUS_CODE.INTERNAL_SERVER_ERROR,
msg: 'Something went wrong!',
};
return null;
};
export { getRoom, updateRoom, updateRoomStatus, getAllRoom };
/**
* Add room to server
* @param room The room object need to be add
* @returns The response object if complete or null
*/
const addRoom = async (room: IRoom): Promise<Nullable<IResponse<IRoom>>> => {
try {
// Set default status room
room.status = false;
const response = await sendRequest<IRoom>(
ROOM_PATH,
'POST',
JSON.stringify(room)
);
if (response.statusCode !== STATUS_CODE.CREATE) {
throw new Error(errorMsg(response.statusCode, response.msg));
}
return response;
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
}
return null;
};
export { getRoom, updateRoom, updateRoomStatus, getAllRoom, addRoom };
hotel-management/src/services/userServices.ts
+44 -7
View File
@@ -1,21 +1,53 @@
import toast from 'react-hot-toast';
// Constants
import { errorMsg } from '../constants/messages';
import { USER_PATH } from '../constants/path';
import { STATUS_CODE } from '../constants/responseStatus';
// Types
import { Nullable } from '../types/common';
import { TUser } from '../types/user';
import { TResponse } from '../types/response';
import { IResponse } from '../types/responses';
import { IUser } from '../types/users';
// Helpers
import { sendRequest } from '../helpers/sendRequest';
import { errorMsg } from '../helpers/helper';
const updateUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
/**
* Create user to the server
* @param user The user object need to be created
* @returns The IResponse object if success or null
*/
const createUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
try {
const response = await sendRequest<TUser>(
const response = await sendRequest<IUser>(
USER_PATH,
'POST',
JSON.stringify(user)
);
if (response.statusCode !== STATUS_CODE.CREATE) {
throw new Error(errorMsg(response.statusCode, response.msg));
}
return response;
} catch (error: unknown) {
if (error instanceof Error) {
toast.error(error.message);
}
}
return null;
}
/**
* Update the user to the server
* @param user The user object need to be updated
* @returns The IResponse object if update success or null
*/
const updateUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
try {
const response = await sendRequest<IUser>(
USER_PATH + '/' + user.id,
'PUT',
JSON.stringify(user)
@@ -35,7 +67,12 @@ const updateUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
return null;
};
const checkOutUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
/**
* Checkout user
* @param user The user need to be checkout
* @returns The IResponse object if checkout success or not
*/
const checkOutUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
const tempUser = user;
if (tempUser) {
@@ -48,4 +85,4 @@ const checkOutUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> =>
return null;
};
export { updateUser, checkOutUser };
export { updateUser, checkOutUser, createUser };
hotel-management/src/types/response.ts
-7
View File
@@ -1,7 +0,0 @@
type TResponse<T> = {
statusCode: number;
msg: string;
data?: T;
};
export type { TResponse };
hotel-management/src/types/responses.ts
+7
View File
@@ -0,0 +1,7 @@
interface IResponse<T> {
statusCode: number;
msg: string;
data?: T;
}
export type { IResponse };
hotel-management/src/types/rooms.ts
+3 -3
View File
@@ -1,10 +1,10 @@
type TRoom = {
interface IRoom {
id: number;
name: string;
price: number;
discount: number;
finalPrice: number;
status: boolean;
};
}
export type { TRoom };
export type { IRoom };
hotel-management/src/types/user.ts → hotel-management/src/types/users.ts
+3 -3
View File
@@ -1,9 +1,9 @@
type TUser = {
interface IUser {
id: number;
name: string;
identifiedCode: string;
phone: string;
roomId: number;
};
}
export type { TUser };
export type { IUser };