From ae7c25e6f3a2f08e14811a5a0e3eba8a6884a030 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 3 Nov 2023 10:18:57 +0700 Subject: [PATCH] Hot fixed and format code --- .../src/components/AppLayout/index.tsx | 4 +- .../src/components/Header/index.tsx | 4 +- .../src/components/Menus/index.tsx | 4 +- .../src/components/Sidebar/index.tsx | 2 +- .../src/components/Table/index.tsx | 2 +- .../src/components/Table/styled.ts | 4 +- .../src/components/Toast/index.tsx | 40 ++++++++++++------- hotel-management/src/helpers/utils.ts | 2 +- hotel-management/src/hooks/useFetch.ts | 4 +- hotel-management/src/hooks/useForm.ts | 16 ++++---- hotel-management/src/pages/Room/Dialog.tsx | 2 +- 11 files changed, 46 insertions(+), 38 deletions(-) diff --git a/hotel-management/src/components/AppLayout/index.tsx b/hotel-management/src/components/AppLayout/index.tsx index f2f96cd..d2a0239 100644 --- a/hotel-management/src/components/AppLayout/index.tsx +++ b/hotel-management/src/components/AppLayout/index.tsx @@ -10,8 +10,8 @@ import { Main, StyledAppLayout } from './styled'; const AppLayout = () => { return ( -
- +
+
diff --git a/hotel-management/src/components/Header/index.tsx b/hotel-management/src/components/Header/index.tsx index c329fe0..b286703 100644 --- a/hotel-management/src/components/Header/index.tsx +++ b/hotel-management/src/components/Header/index.tsx @@ -5,10 +5,10 @@ import HeaderMenu from '../HeaderMenu'; import { StyledHeader } from './styled'; interface IHeader { - accountName: string + accountName: string; } -const Header = ({accountName}: IHeader) => { +const Header = ({ accountName }: IHeader) => { return (

Hi, {accountName}!

diff --git a/hotel-management/src/components/Menus/index.tsx b/hotel-management/src/components/Menus/index.tsx index b4ef286..c490e3e 100644 --- a/hotel-management/src/components/Menus/index.tsx +++ b/hotel-management/src/components/Menus/index.tsx @@ -33,9 +33,7 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => { const handleClick = (e: React.MouseEvent) => { e.stopPropagation(); - openId === '' || openId !== id - ? open!(id) - : close!(); + openId === '' || openId !== id ? open!(id) : close!(); }; return ( diff --git a/hotel-management/src/components/Sidebar/index.tsx b/hotel-management/src/components/Sidebar/index.tsx index 3792fe6..3c14f06 100644 --- a/hotel-management/src/components/Sidebar/index.tsx +++ b/hotel-management/src/components/Sidebar/index.tsx @@ -8,7 +8,7 @@ interface ISidebar { heading: string; } -const Sidebar = ({heading}: ISidebar) => { +const Sidebar = ({ heading }: ISidebar) => { return ( {heading} diff --git a/hotel-management/src/components/Table/index.tsx b/hotel-management/src/components/Table/index.tsx index c7d5262..d305dc7 100644 --- a/hotel-management/src/components/Table/index.tsx +++ b/hotel-management/src/components/Table/index.tsx @@ -6,7 +6,7 @@ import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled'; // Contexts import TableContext from '../../contexts/TableContext'; -interface ITable { +export interface ITable { columns?: string; children: React.ReactNode; } diff --git a/hotel-management/src/components/Table/styled.ts b/hotel-management/src/components/Table/styled.ts index 5e89ff2..9219f55 100644 --- a/hotel-management/src/components/Table/styled.ts +++ b/hotel-management/src/components/Table/styled.ts @@ -1,7 +1,5 @@ import styled from 'styled-components'; - -// Interfaces -import { ITable } from '../../globals/interfaces'; +import { ITable } from '.'; const StyledTable = styled.div` border: 1px solid var(--border-color); diff --git a/hotel-management/src/components/Toast/index.tsx b/hotel-management/src/components/Toast/index.tsx index fa3caee..256c436 100644 --- a/hotel-management/src/components/Toast/index.tsx +++ b/hotel-management/src/components/Toast/index.tsx @@ -1,17 +1,29 @@ -import { DefaultToastOptions, ToastOptions, ToastPosition, Toaster } from 'react-hot-toast'; +import { + DefaultToastOptions, + ToastOptions, + ToastPosition, + Toaster, +} from 'react-hot-toast'; import { CSSProperties } from 'styled-components'; interface IToast { - position: ToastPosition; - gutter: number; - containerStyle: CSSProperties; - toastOptions: DefaultToastOptions; - success: ToastOptions; - error: ToastOptions; - style: CSSProperties | undefined; + position?: ToastPosition; + gutter?: number; + containerStyle?: CSSProperties; + toastOptions?: DefaultToastOptions; + success?: ToastOptions; + error?: ToastOptions; + style?: CSSProperties | undefined; } -const Toast = ({position, gutter, containerStyle, success, error, style}: IToast) => { +const Toast = ({ + position, + gutter, + containerStyle, + success, + error, + style, +}: IToast) => { return ( ); }; Toast.defaultProps = { - position: "top-center", + position: 'top-center', gutter: 12, containerStyle: { margin: '8px', zIndex: 1 }, success: { duration: 3000, }, - error:{ + error: { duration: 5000, }, style: { fontSize: '16px', maxWidth: '500px', padding: '16px 24px', - } -} + }, +}; export default Toast; diff --git a/hotel-management/src/helpers/utils.ts b/hotel-management/src/helpers/utils.ts index 075502b..631d64f 100644 --- a/hotel-management/src/helpers/utils.ts +++ b/hotel-management/src/helpers/utils.ts @@ -124,7 +124,7 @@ const searchQuery = ( columnSearch: string, keySearch: string, sort: string, - order: string + order: string, ) => { // prettier-ignore const phoneParams = keySearch diff --git a/hotel-management/src/hooks/useFetch.ts b/hotel-management/src/hooks/useFetch.ts index f81dc12..8fbe38b 100644 --- a/hotel-management/src/hooks/useFetch.ts +++ b/hotel-management/src/hooks/useFetch.ts @@ -23,7 +23,7 @@ const useFetch = ( keyWord: string = '', tempSortBy?: string, tempOrderBy?: string, - reload?: boolean + reload?: boolean, ) => { const [data, setData] = useState(null); const [isPending, setIsPending] = useState(false); @@ -56,7 +56,7 @@ const useFetch = ( if (!response.ok) throw new Error( - `Error code: ${response.status} \n Messages: ${response.statusText}` + `Error code: ${response.status} \n Messages: ${response.statusText}`, ); setIsPending(false); diff --git a/hotel-management/src/hooks/useForm.ts b/hotel-management/src/hooks/useForm.ts index 5f57745..7351140 100644 --- a/hotel-management/src/hooks/useForm.ts +++ b/hotel-management/src/hooks/useForm.ts @@ -21,7 +21,7 @@ const useForm = ( stateSchema = {}, stateValidatorSchema = {} as TValidator, submitFormCallback: (values: TKeyValue) => void, - initialValue: string = '' + initialValue: string = '', ) => { const [values, setValues] = useState(INITIAL_STATE_SCHEMA); const [errors, setErrors] = useState(getPropValues(stateSchema, ERROR)); @@ -73,7 +73,7 @@ const useForm = ( return error; }, - [stateValidatorSchema] + [stateValidatorSchema], ); // Set Initial Error State @@ -86,10 +86,10 @@ const useForm = ( [name]: !initialValue // Skip error when initialValue have values ? validateFormFields(name, values[name] as string) : '', - })) + })), ); }, - [errors, values, validateFormFields] + [errors, values, validateFormFields], ); // Used to disable submit button if there's a value in errors @@ -98,7 +98,7 @@ const useForm = ( // in every re-render in component const validateErrorState = useCallback( () => Object.values(errors).some((error) => error), - [errors] + [errors], ); // For every changed in our state this will be fired @@ -114,7 +114,7 @@ const useForm = ( ( event: ChangeEvent< HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement - > + >, ) => { setIsDirty(true); @@ -136,7 +136,7 @@ const useForm = ( setErrors((prevState) => ({ ...prevState, [name]: error })); isValid((prevState) => ({ ...prevState, [name]: true })); }, - [validateFormFields] + [validateFormFields], ); const handleOnSubmit = useCallback( @@ -152,7 +152,7 @@ const useForm = ( setDisable(true); } }, - [validateErrorState, submitFormCallback, values] + [validateErrorState, submitFormCallback, values], ); return { diff --git a/hotel-management/src/pages/Room/Dialog.tsx b/hotel-management/src/pages/Room/Dialog.tsx index c500767..2b08d17 100644 --- a/hotel-management/src/pages/Room/Dialog.tsx +++ b/hotel-management/src/pages/Room/Dialog.tsx @@ -1,7 +1,7 @@ import { forwardRef, useEffect } from 'react'; // Components -import Dialog, { IDialogProps } from '../../components/Dialog'; +import Dialog, { IDialogProps } from '../../components/Dialog'; import RoomForm from './Form'; // Types