From 5aec68dfce7f3dbfa307354497bdb3b01b50e77d Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 30 Nov 2023 10:37:50 +0700 Subject: [PATCH] Update common file --- hotel-management/src/assets/images/logo.png | Bin 0 -> 15533 bytes hotel-management/src/commons/styles/Button.ts | 1 + .../src/commons/styles/Direction.ts | 3 +- .../src/components/ButtonIcon/index.tsx | 5 ++++ .../src/components/Form/index.tsx | 8 +++-- .../src/components/Form/styled.ts | 28 +++++++++++++++--- .../src/components/HeaderMenu/index.tsx | 9 +++++- .../src/components/RootLayout/index.tsx | 24 +++++++++++++++ .../src/components/RootLayout/styled.ts | 11 +++++++ .../src/components/RouteProtected/index.tsx | 15 ++++++++++ hotel-management/src/constants/path.ts | 1 + .../src/styles/abstracts/variables.css | 2 ++ hotel-management/src/types/common.ts | 9 +++++- 13 files changed, 106 insertions(+), 10 deletions(-) create mode 100644 hotel-management/src/assets/images/logo.png create mode 100644 hotel-management/src/components/RootLayout/index.tsx create mode 100644 hotel-management/src/components/RootLayout/styled.ts create mode 100644 hotel-management/src/components/RouteProtected/index.tsx diff --git a/hotel-management/src/assets/images/logo.png b/hotel-management/src/assets/images/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..198ab2bfc4c905f6f082e6fc1d69fb2bf19ac1b4 GIT binary patch literal 15533 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 &:disabled, &[disabled] { cursor: not-allowed; + background-color: var(--disabled-btn-color); } `; diff --git a/hotel-management/src/commons/styles/Direction.ts b/hotel-management/src/commons/styles/Direction.ts index 6fe5a18..c1a0661 100644 --- a/hotel-management/src/commons/styles/Direction.ts +++ b/hotel-management/src/commons/styles/Direction.ts @@ -1,7 +1,6 @@ +import { TDirection } from '@type/common'; import styled, { css } from 'styled-components'; -type TDirection = 'vertical' | 'horizontal'; - interface IDirection { type?: TDirection; } diff --git a/hotel-management/src/components/ButtonIcon/index.tsx b/hotel-management/src/components/ButtonIcon/index.tsx index dff27b0..6671291 100644 --- a/hotel-management/src/components/ButtonIcon/index.tsx +++ b/hotel-management/src/components/ButtonIcon/index.tsx @@ -1,4 +1,6 @@ import { ReactNode } from 'react'; + +// Styled import { StyledButtonIcon } from './styled'; interface IButtonIcon { @@ -14,6 +16,7 @@ interface IButtonIcon { size?: string; }; onClick?: () => void; + disabled?: boolean; } const ButtonIcon = ({ @@ -22,6 +25,7 @@ const ButtonIcon = ({ style, iconStyle, onClick, + disabled, }: IButtonIcon) => { const isHaveChildren = Boolean(children); @@ -35,6 +39,7 @@ const ButtonIcon = ({ }} iconStyle={iconStyle} onClick={onClick} + disabled={disabled} > {icon} {children} diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index 6dd2cc3..891934b 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -10,6 +10,9 @@ import { FormBtn, } from './styled'; +// Types +import { TDirection } from '@type/common'; + interface IFormProps { children: ReactNode; onSubmit: (event: FormEvent) => void; @@ -20,6 +23,7 @@ interface IFormRow { label: string; error?: string; children: ReactNode; + direction?: TDirection; } const Form = ({ children, onSubmit, id }: IFormProps) => { @@ -30,9 +34,9 @@ const Form = ({ children, onSubmit, id }: IFormProps) => { ); }; -const FormRow = ({ label, error, children }: IFormRow) => { +const FormRow = ({ label, error, children, direction }: IFormRow) => { return ( - +
{children} diff --git a/hotel-management/src/components/Form/styled.ts b/hotel-management/src/components/Form/styled.ts index 01ed87f..f9a2192 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -1,4 +1,11 @@ -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; + +// Types +import { TDirection } from '@type/common'; + +interface IStyledFormRow { + direction?: TDirection; +} // Styled import Button from '@commonStyle/Button'; @@ -16,11 +23,20 @@ const StyledActionBtn = styled.div` gap: 100px; `; -const StyledFormRow = styled.div` +const StyledFormRow = styled.div` display: flex; justify-content: space-between; - align-items: center; - gap: 100px; + + ${(props) => + props.direction === 'horizontal' + ? css` + align-items: center; + gap: 100px; + ` + : css` + flex-direction: column; + gap: 15px; + `} `; const Label = styled.label` @@ -45,4 +61,8 @@ const FormBtn = styled(Button)` } `; +StyledFormRow.defaultProps = { + direction: 'horizontal', +}; + export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn }; diff --git a/hotel-management/src/components/HeaderMenu/index.tsx b/hotel-management/src/components/HeaderMenu/index.tsx index 9a5cd93..adfd681 100644 --- a/hotel-management/src/components/HeaderMenu/index.tsx +++ b/hotel-management/src/components/HeaderMenu/index.tsx @@ -6,7 +6,12 @@ import ButtonIcon from '@component/ButtonIcon'; // Styled import { StyledHeaderMenu } from './styled'; +// Hooks +import { useLogout } from '@hook/authentication/useLogout'; + const HeaderMenu = () => { + const { logout, isPending } = useLogout(); + return (
  • @@ -18,9 +23,11 @@ const HeaderMenu = () => {
  • } - iconStyle={{size: '23px' }} + iconStyle={{ size: '23px' }} />
    • diff --git a/hotel-management/src/components/RootLayout/index.tsx b/hotel-management/src/components/RootLayout/index.tsx new file mode 100644 index 0000000..8ca6e58 --- /dev/null +++ b/hotel-management/src/components/RootLayout/index.tsx @@ -0,0 +1,24 @@ +import { Outlet } from 'react-router-dom'; + +// Styled +import Spinner from '@commonStyle/Spinner'; +import { FullPageLayout } from './styled'; + +// Hooks +import { useAccount } from '@hook/authentication/useAccount'; + +const RootLayout = () => { + const { isPending } = useAccount(); + + return isPending ? ( + + + + ) : ( + <> + + + ); +}; + +export default RootLayout; diff --git a/hotel-management/src/components/RootLayout/styled.ts b/hotel-management/src/components/RootLayout/styled.ts new file mode 100644 index 0000000..159ab1c --- /dev/null +++ b/hotel-management/src/components/RootLayout/styled.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +const FullPageLayout = styled.div` + height: 100vh; + background-color: var(--color-grey-50); + display: flex; + align-items: center; + justify-content: center; +`; + +export { FullPageLayout }; diff --git a/hotel-management/src/components/RouteProtected/index.tsx b/hotel-management/src/components/RouteProtected/index.tsx new file mode 100644 index 0000000..9f970f2 --- /dev/null +++ b/hotel-management/src/components/RouteProtected/index.tsx @@ -0,0 +1,15 @@ +import { useAccount } from '@hook/authentication/useAccount'; +import { ReactNode } from 'react'; +import { Navigate } from 'react-router-dom'; + +interface IRouteProtected { + children: ReactNode; +} +const RouteProtected = ({ children }: IRouteProtected) => { + // Load user login + const { account } = useAccount(); + + return !account ? : children; +}; + +export default RouteProtected; diff --git a/hotel-management/src/constants/path.ts b/hotel-management/src/constants/path.ts index a83803e..89dc268 100644 --- a/hotel-management/src/constants/path.ts +++ b/hotel-management/src/constants/path.ts @@ -4,3 +4,4 @@ export const ROOM = '/room'; export const OTHER_PATH = '*'; export const USER_PATH = 'users'; export const ROOM_PATH = 'rooms'; +export const LOGIN = 'login'; diff --git a/hotel-management/src/styles/abstracts/variables.css b/hotel-management/src/styles/abstracts/variables.css index d9ae533..8ced783 100644 --- a/hotel-management/src/styles/abstracts/variables.css +++ b/hotel-management/src/styles/abstracts/variables.css @@ -23,6 +23,8 @@ --form-color: #fff; + --background-login: #f8f8f8; + --shadow-sm: 0px 10px 20px rgba(0, 0, 0, 0.2); --fs-md: 30px; diff --git a/hotel-management/src/types/common.ts b/hotel-management/src/types/common.ts index 7445679..08e954e 100644 --- a/hotel-management/src/types/common.ts +++ b/hotel-management/src/types/common.ts @@ -7,4 +7,11 @@ interface IDataState { isBooked?: boolean; } -export type { Nullable, IDataState }; +interface ILogin { + email: string; + password: string; +} + +type TDirection = 'vertical' | 'horizontal'; + +export type { Nullable, IDataState, TDirection, ILogin };