mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 20:01:59 +00:00
Remove unnecessary code
This commit is contained in:
@@ -2,6 +2,6 @@ export const DASHBOARD = '/dashboard';
|
|||||||
export const USER = '/user';
|
export const USER = '/user';
|
||||||
export const ROOM = '/room';
|
export const ROOM = '/room';
|
||||||
export const OTHER_PATH = '*';
|
export const OTHER_PATH = '*';
|
||||||
export const BASE_URL = 'http://localhost:3000/';
|
export const BASE_URL = 'https://hotel-management-api.loiphan.com/';
|
||||||
export const USER_PATH = 'users';
|
export const USER_PATH = 'users';
|
||||||
export const ROOM_PATH = 'rooms';
|
export const ROOM_PATH = 'rooms';
|
||||||
|
|||||||
@@ -22,16 +22,6 @@ const USER_PAGE = {
|
|||||||
label: 'Sort by room',
|
label: 'Sort by room',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
ORDERBY_OPTIONS: [
|
|
||||||
{
|
|
||||||
value: 'asc',
|
|
||||||
label: 'Ascending',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'desc',
|
|
||||||
label: 'Descending',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const ORDERBY_OPTIONS = [
|
const ORDERBY_OPTIONS = [
|
||||||
@@ -60,25 +50,9 @@ const ROOM_PAGE = {
|
|||||||
value: 'price',
|
value: 'price',
|
||||||
label: 'Sort by price',
|
label: 'Sort by price',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
value: 'discount',
|
|
||||||
label: 'Sort by discount',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 'status',
|
|
||||||
label: 'Sort by status',
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
|
|
||||||
const INITIAL_STATE_SCHEMA = {
|
|
||||||
id: '',
|
|
||||||
name: '',
|
|
||||||
identifiedCode: '',
|
|
||||||
phone: '',
|
|
||||||
roomId: 'undefined',
|
|
||||||
address: '',
|
|
||||||
};
|
|
||||||
|
|
||||||
const VALUE = 'value';
|
const VALUE = 'value';
|
||||||
const ERROR = 'error';
|
const ERROR = 'error';
|
||||||
@@ -87,7 +61,6 @@ const INIT_VALUE_USER_FORM = {
|
|||||||
name: '',
|
name: '',
|
||||||
id: 0,
|
id: 0,
|
||||||
identifiedCode: '',
|
identifiedCode: '',
|
||||||
address: '',
|
|
||||||
phone: '',
|
phone: '',
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -96,7 +69,6 @@ export {
|
|||||||
ROOM_PAGE,
|
ROOM_PAGE,
|
||||||
VALUE,
|
VALUE,
|
||||||
ERROR,
|
ERROR,
|
||||||
INITIAL_STATE_SCHEMA,
|
|
||||||
ORDERBY_OPTIONS,
|
ORDERBY_OPTIONS,
|
||||||
INIT_VALUE_USER_FORM
|
INIT_VALUE_USER_FORM
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ type TUser = {
|
|||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
identifiedCode: string;
|
identifiedCode: string;
|
||||||
address: string;
|
|
||||||
phone: string;
|
phone: string;
|
||||||
roomId: number;
|
roomId: number;
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -87,17 +87,11 @@ const searchQuery = (
|
|||||||
sort: string,
|
sort: string,
|
||||||
order: string
|
order: string
|
||||||
) => {
|
) => {
|
||||||
const phoneParams = keySearch
|
const phoneParams = keySearch ? `${columnSearch}_like=` + keySearch : '';
|
||||||
? `${columnSearch}_like=` + keySearch
|
|
||||||
: '';
|
|
||||||
|
|
||||||
const sortParams = sort
|
const sortParams = sort ? '_sort=' + sort : '';
|
||||||
? '_sort=' + sort
|
|
||||||
: '';
|
|
||||||
|
|
||||||
const orderParams = order
|
const orderParams = order ? '_order=' + order : '';
|
||||||
? '_order=' + order
|
|
||||||
: '';
|
|
||||||
const finalParam = [phoneParams, sortParams, orderParams];
|
const finalParam = [phoneParams, sortParams, orderParams];
|
||||||
let query = '';
|
let query = '';
|
||||||
let isFirstParam = true;
|
let isFirstParam = true;
|
||||||
@@ -116,12 +110,18 @@ const searchQuery = (
|
|||||||
return query;
|
return query;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const formatCurrency = (value: number): string => {
|
||||||
|
return Intl.NumberFormat('en-US', {
|
||||||
|
style: 'currency',
|
||||||
|
currency: 'USD',
|
||||||
|
}).format(value);
|
||||||
|
};
|
||||||
|
|
||||||
export {
|
export {
|
||||||
isRequired,
|
isRequired,
|
||||||
getPropValues,
|
getPropValues,
|
||||||
getValueFromObj,
|
getValueFromObj,
|
||||||
searchQuery,
|
searchQuery,
|
||||||
REQUIRED_FIELD_ERROR
|
formatCurrency,
|
||||||
|
REQUIRED_FIELD_ERROR,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -12,8 +12,8 @@ const isValidNumber = (value: unknown): boolean => {
|
|||||||
* @param value Value need to be checked
|
* @param value Value need to be checked
|
||||||
* @returns A boolean indicating whether or not the argument has valid
|
* @returns A boolean indicating whether or not the argument has valid
|
||||||
*/
|
*/
|
||||||
const isValidDiscount = (value: string): boolean => {
|
const isValidDiscount = (value: number): boolean => {
|
||||||
return +value >= 0 && +value <= 100;
|
return value >= 0 && value <= 100;
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import { sendRequest } from '../../helpers/sendRequest.ts';
|
|||||||
import Input from '../../commons/styles/Input.ts';
|
import Input from '../../commons/styles/Input.ts';
|
||||||
import FormRow from '../../components/LabelControl/index.tsx';
|
import FormRow from '../../components/LabelControl/index.tsx';
|
||||||
import { INVALID_DISCOUNT, INVALID_FIELD, REQUIRED_FIELD_ERROR } from '../../constants/formValidateMessage.ts';
|
import { INVALID_DISCOUNT, INVALID_FIELD, REQUIRED_FIELD_ERROR } from '../../constants/formValidateMessage.ts';
|
||||||
import { isValidNumber, isValidString } from '../../helpers/validators.ts';
|
import { isValidDiscount, isValidNumber, isValidString } from '../../helpers/validators.ts';
|
||||||
import Form from '../../components/Form/index.tsx';
|
import Form from '../../components/Form/index.tsx';
|
||||||
import { useEffect } from 'react';
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
@@ -140,7 +140,7 @@ const RoomForm = ({
|
|||||||
{...register('discount', {
|
{...register('discount', {
|
||||||
required: REQUIRED_FIELD_ERROR,
|
required: REQUIRED_FIELD_ERROR,
|
||||||
validate: {
|
validate: {
|
||||||
checkPhoneNum: (v) => isValidNumber(v) || INVALID_DISCOUNT,
|
checkPhoneNum: (v) => isValidDiscount(v) || INVALID_DISCOUNT,
|
||||||
},
|
},
|
||||||
onChange: () => trigger('discount'),
|
onChange: () => trigger('discount'),
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
|
|||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import { HiSquare2Stack } from 'react-icons/hi2';
|
import { RiEditBoxFill } from 'react-icons/ri';
|
||||||
import { HiTrash } from 'react-icons/hi';
|
import { HiTrash } from 'react-icons/hi';
|
||||||
import { StyledOperationTable } from './styled';
|
import { StyledOperationTable } from './styled';
|
||||||
import Menus from '../../components/Menus';
|
import Menus from '../../components/Menus';
|
||||||
@@ -29,6 +29,7 @@ import Spinner from '../../commons/styles/Spinner';
|
|||||||
|
|
||||||
// Utils
|
// Utils
|
||||||
import { sendRequest } from '../../helpers/sendRequest';
|
import { sendRequest } from '../../helpers/sendRequest';
|
||||||
|
import { formatCurrency } from '../../helpers/utils';
|
||||||
|
|
||||||
interface IRoomRow {
|
interface IRoomRow {
|
||||||
room: TRoom;
|
room: TRoom;
|
||||||
@@ -52,10 +53,7 @@ const RoomRow = ({
|
|||||||
|
|
||||||
const handleOnDelete = async (room: TRoom) => {
|
const handleOnDelete = async (room: TRoom) => {
|
||||||
if (confirm(CONFIRM_DELETE)) {
|
if (confirm(CONFIRM_DELETE)) {
|
||||||
const response = await sendRequest(
|
const response = await sendRequest(ROOM_PATH + `/${room.id}`, 'DELETE');
|
||||||
ROOM_PATH + `/${room.id}`,
|
|
||||||
'DELETE'
|
|
||||||
);
|
|
||||||
|
|
||||||
if (response.statusCode === STATUS_CODE.OK) {
|
if (response.statusCode === STATUS_CODE.OK) {
|
||||||
toast.success(DELETE_SUCCESS);
|
toast.success(DELETE_SUCCESS);
|
||||||
@@ -66,7 +64,10 @@ const RoomRow = ({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const { id, name, price, status } = room;
|
const { id, name, price, discount, status } = room;
|
||||||
|
|
||||||
|
// Calculate final price
|
||||||
|
const finalPrice = price - (price * discount / 100);
|
||||||
|
|
||||||
// prettier-ignore
|
// prettier-ignore
|
||||||
const statusText = status
|
const statusText = status
|
||||||
@@ -77,7 +78,7 @@ const RoomRow = ({
|
|||||||
<Table.Row>
|
<Table.Row>
|
||||||
<div>{id}</div>
|
<div>{id}</div>
|
||||||
<div>{name}</div>
|
<div>{name}</div>
|
||||||
<div>{price}</div>
|
<div>{formatCurrency(finalPrice)}</div>
|
||||||
<div>{statusText}</div>
|
<div>{statusText}</div>
|
||||||
|
|
||||||
<Menus.Menu>
|
<Menus.Menu>
|
||||||
@@ -85,7 +86,7 @@ const RoomRow = ({
|
|||||||
|
|
||||||
<Menus.List id={id.toString()}>
|
<Menus.List id={id.toString()}>
|
||||||
<Menus.Button
|
<Menus.Button
|
||||||
icon={<HiSquare2Stack />}
|
icon={<RiEditBoxFill />}
|
||||||
onClick={() => handleOnEdit(room)}
|
onClick={() => handleOnEdit(room)}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
@@ -128,7 +129,7 @@ const RoomTable = ({
|
|||||||
nameSearch,
|
nameSearch,
|
||||||
sortByValue,
|
sortByValue,
|
||||||
orderByValue,
|
orderByValue,
|
||||||
reload,
|
reload
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import { FormProvider, useForm } from 'react-hook-form';
|
|||||||
|
|
||||||
// Styled
|
// Styled
|
||||||
import Input from '../../commons/styles/Input';
|
import Input from '../../commons/styles/Input';
|
||||||
import TextArea from '../../commons/styles/TextArea';
|
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
import Form from '../../components/Form';
|
import Form from '../../components/Form';
|
||||||
@@ -216,20 +215,6 @@ const UserForm = ({
|
|||||||
/>
|
/>
|
||||||
</FormRow>
|
</FormRow>
|
||||||
|
|
||||||
<FormRow label="Address" error={errors.address?.message}>
|
|
||||||
<TextArea
|
|
||||||
id="address"
|
|
||||||
rows={3}
|
|
||||||
{...register('address', {
|
|
||||||
required: REQUIRED_FIELD_ERROR,
|
|
||||||
validate: {
|
|
||||||
checkValidString: (v) => isValidString(v) || INVALID_FIELD,
|
|
||||||
},
|
|
||||||
onChange: () => trigger('address'),
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</FormRow>
|
|
||||||
|
|
||||||
<Form.Action>
|
<Form.Action>
|
||||||
<FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
|
<FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user