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

Update config, ButtonIcon, remove cloneElement

Browse Source
This commit is contained in:
nezumi
2023-12-06 17:43:16 +07:00
parent 0a893aae3f
commit 7c7e6cd1b1
118 changed files with 718 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/jest-setup.ts
+1
View File
@@ -0,0 +1 @@
import '@testing-library/jest-dom'
hotel-management/jest.config.ts
+5 -12
View File
@@ -1,25 +1,18 @@
import type { Config } from 'jest';
const config: Config = {
preset: 'ts-jest',
verbose: true,
testEnvironment: 'jsdom',
transform: {
'^.+\\.tsx?$': 'ts-jest',
'.+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|gif)$':
'jest-transform-stub',
},
moduleNameMapper: {
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.ts',
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
'@service/(.*)': ['<rootDir>/src/services/$1'],
'@constant/(.*)': ['<rootDir>/src/constants/$1'],
'@hook/(.*)': ['<rootDir>/src/hooks/$1'],
'@helper/(.*)': ['<rootDir>/src/helpers/$1'],
'@context/(.*)': ['<rootDir>/src/contexts/$1'],
'@component/(.*)': ['<rootDir>/src/components/$1'],
'@commonStyle/(.*)': ['<rootDir>/src/commons/styles/$1'],
'@type/(.*)': ['<rootDir>/src/types/$1'],
'@page/(.*)': ['<rootDir>/src/pages/$1'],
'@src/(.*)': ['<rootDir>/src/$1'],
},
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
setupFiles: ['<rootDir>/.jest/setEnvVar.ts'],
testEnvironmentOptions: {
customExportConditions: [''],
hotel-management/jest.setup.ts
-1
View File
@@ -1 +0,0 @@
import "@testing-library/jest-dom";
hotel-management/package.json
+2
View File
@@ -28,6 +28,7 @@
"styled-components": "^6.1.0"
},
"devDependencies": {
"@babel/preset-typescript": "^7.23.3",
"@testing-library/jest-dom": "^6.1.4",
"@testing-library/react": "^14.1.0",
"@testing-library/user-event": "^14.5.1",
@@ -45,6 +46,7 @@
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"jest-transform-stub": "^2.0.0",
"ts-jest": "^29.1.1",
"ts-node": "^10.9.1",
"typescript": "^5.0.2",
hotel-management/pnpm-lock.yaml
Generated
+121
View File
@@ -40,6 +40,9 @@ dependencies:
version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
devDependencies:
'@babel/preset-typescript':
specifier: ^7.23.3
version: 7.23.3(@babel/core@7.23.2)
'@testing-library/jest-dom':
specifier: ^6.1.4
version: 6.1.4(@types/jest@29.5.8)(jest@29.7.0)
@@ -91,6 +94,9 @@ devDependencies:
jest-environment-jsdom:
specifier: ^29.7.0
version: 29.7.0
jest-transform-stub:
specifier: ^2.0.0
version: 2.0.0
ts-jest:
specifier: ^29.1.1
version: 29.1.1(@babel/core@7.23.2)(jest@29.7.0)(typescript@5.2.2)
@@ -175,6 +181,13 @@ packages:
jsesc: 2.5.2
dev: true
/@babel/helper-annotate-as-pure@7.22.5:
resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.23.0
dev: true
/@babel/helper-compilation-targets@7.22.15:
resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
engines: {node: '>=6.9.0'}
@@ -186,6 +199,24 @@ packages:
semver: 6.3.1
dev: true
/@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.2):
resolution: {integrity: sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-annotate-as-pure': 7.22.5
'@babel/helper-environment-visitor': 7.22.20
'@babel/helper-function-name': 7.23.0
'@babel/helper-member-expression-to-functions': 7.23.0
'@babel/helper-optimise-call-expression': 7.22.5
'@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.2)
'@babel/helper-skip-transparent-expression-wrappers': 7.22.5
'@babel/helper-split-export-declaration': 7.22.6
semver: 6.3.1
dev: true
/@babel/helper-environment-visitor@7.22.20:
resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
engines: {node: '>=6.9.0'}
@@ -206,6 +237,13 @@ packages:
'@babel/types': 7.23.0
dev: true
/@babel/helper-member-expression-to-functions@7.23.0:
resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.23.0
dev: true
/@babel/helper-module-imports@7.22.15:
resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
engines: {node: '>=6.9.0'}
@@ -227,11 +265,44 @@ packages:
'@babel/helper-validator-identifier': 7.22.20
dev: true
/@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2):
resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-environment-visitor': 7.22.20
'@babel/helper-module-imports': 7.22.15
'@babel/helper-simple-access': 7.22.5
'@babel/helper-split-export-declaration': 7.22.6
'@babel/helper-validator-identifier': 7.22.20
dev: true
/@babel/helper-optimise-call-expression@7.22.5:
resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.23.0
dev: true
/@babel/helper-plugin-utils@7.22.5:
resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-replace-supers@7.22.20(@babel/core@7.23.2):
resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-environment-visitor': 7.22.20
'@babel/helper-member-expression-to-functions': 7.23.0
'@babel/helper-optimise-call-expression': 7.22.5
dev: true
/@babel/helper-simple-access@7.22.5:
resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
engines: {node: '>=6.9.0'}
@@ -239,6 +310,13 @@ packages:
'@babel/types': 7.23.0
dev: true
/@babel/helper-skip-transparent-expression-wrappers@7.22.5:
resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.23.0
dev: true
/@babel/helper-split-export-declaration@7.22.6:
resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
engines: {node: '>=6.9.0'}
@@ -418,6 +496,18 @@ packages:
'@babel/helper-plugin-utils': 7.22.5
dev: true
/@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.2):
resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.2)
'@babel/helper-plugin-utils': 7.22.5
'@babel/helper-simple-access': 7.22.5
dev: true
/@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.2):
resolution: {integrity: sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==}
engines: {node: '>=6.9.0'}
@@ -438,6 +528,33 @@ packages:
'@babel/helper-plugin-utils': 7.22.5
dev: true
/@babel/plugin-transform-typescript@7.23.5(@babel/core@7.23.2):
resolution: {integrity: sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-annotate-as-pure': 7.22.5
'@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.2)
'@babel/helper-plugin-utils': 7.22.5
'@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.2)
dev: true
/@babel/preset-typescript@7.23.3(@babel/core@7.23.2):
resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
engines: {node: '>=6.9.0'}
peerDependencies:
'@babel/core': ^7.0.0-0
dependencies:
'@babel/core': 7.23.2
'@babel/helper-plugin-utils': 7.22.5
'@babel/helper-validator-option': 7.22.15
'@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.2)
'@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.2)
'@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.2)
dev: true
/@babel/runtime@7.23.2:
resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
engines: {node: '>=6.9.0'}
@@ -3383,6 +3500,10 @@ packages:
- supports-color
dev: true
/jest-transform-stub@2.0.0:
resolution: {integrity: sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==}
dev: true
/jest-util@29.7.0:
resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
hotel-management/src/App.test.tsx
+4 -4
View File
@@ -1,14 +1,14 @@
import { render, act, RenderResult } from '@testing-library/react';
// Services
import * as userServices from '@service/userServices';
import * as roomServices from '@service/roomServices';
import * as userServices from '@src/services/userServices';
import * as roomServices from '@src/services/roomServices';
// Components
import App from './App';
jest.mock('@service/userServices');
jest.mock('@service/roomServices');
jest.mock('@src/services/userServices');
jest.mock('@src/services/roomServices');
describe('App', () => {
let wrapper: RenderResult | null = null;
hotel-management/src/App.tsx
+7 -7
View File
@@ -7,16 +7,16 @@ import { useEffect, useMemo, useReducer } from 'react';
// Components
import AppLayout from './components/AppLayout';
import Toast from './components/Toast';
import RouteProtected from '@component/RouteProtected';
import RootLayout from '@component/RootLayout';
import RouteProtected from '@src/components/RouteProtected';
import RootLayout from '@src/components/RootLayout';
// Pages
import User from './pages/User';
import Booking from './pages/Booking';
import Room from './pages/Room';
import NotFound from './pages/NotFound';
import Login from '@page/Login';
import Account from '@page/Account';
import Login from '@src/pages/Login';
import Account from '@src/pages/Account';
// Constants
import * as PATH from './constants/path';
@@ -26,11 +26,11 @@ import {
UserRoomAvailableContext,
initialState,
reducer,
} from '@context/UserRoomAvailableContext';
} from '@src/contexts/UserRoomAvailableContext';
// Services
import { getAllUsers } from '@service/userServices';
import { getAllRooms } from '@service/roomServices';
import { getAllUsers } from '@src/services/userServices';
import { getAllRooms } from '@src/services/roomServices';
const queryClient = new QueryClient();
hotel-management/src/commons/styles/Direction.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import styled, { css } from 'styled-components';
// Types
import { TDirection } from '@type/common';
import { TDirection } from '@src/types/common';
interface IDirection {
type?: TDirection;
hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap
+12 -12
View File
@@ -21,8 +21,9 @@ exports[`AppLayout Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -41,14 +42,14 @@ exports[`AppLayout Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -67,7 +68,6 @@ exports[`AppLayout Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
@@ -172,8 +172,9 @@ exports[`AppLayout Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -192,14 +193,14 @@ exports[`AppLayout Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -218,7 +219,6 @@ exports[`AppLayout Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
hotel-management/src/components/AppLayout/index.tsx
+3 -3
View File
@@ -1,14 +1,14 @@
import { Outlet } from 'react-router-dom';
// Components
import Header from '@component/Header';
import Sidebar from '@component/Sidebar';
import Header from '../Header';
import Sidebar from '../Sidebar';
// Styled
import { Main, StyledAppLayout } from './styled';
// Hooks
import { useAccount } from '@hook/authentication/useAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
const AppLayout = () => {
const { account } = useAccount();
hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx
-1
View File
@@ -9,7 +9,6 @@ describe('ButtonIcon', () => {
<ButtonIcon
aria-label="Logout"
icon={<HiOutlineLogout />}
iconStyle={{ size: '23px' }}
/>
);
hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap
+8 -6
View File
@@ -6,8 +6,10 @@ exports[`ButtonIcon Should render correctly 1`] = `
"baseElement": <body>
<div>
<button
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
aria-label="Logout"
class="sc-bdnyFh gPNQLR"
iconcolor="#000"
iconsize="16px"
>
<svg
aria-hidden="true"
@@ -26,14 +28,15 @@ exports[`ButtonIcon Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</div>
</body>,
"container": <div>
<button
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
aria-label="Logout"
class="sc-bdnyFh gPNQLR"
iconcolor="#000"
iconsize="16px"
>
<svg
aria-hidden="true"
@@ -52,7 +55,6 @@ exports[`ButtonIcon Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</div>,
"debug": [Function],
hotel-management/src/components/ButtonIcon/index.tsx
+13 -34
View File
@@ -1,50 +1,29 @@
import { ReactNode } from 'react';
import { ButtonHTMLAttributes, ReactNode } from 'react';
// Styled
import { StyledButtonIcon } from './styled';
interface IButtonIcon {
interface IButtonIcon extends ButtonHTMLAttributes<HTMLButtonElement> {
icon: ReactNode;
children?: ReactNode;
style?: {
fontSize?: string;
backgroundColor?: string;
color?: string;
};
iconStyle?: {
color?: string;
size?: string;
};
onClick?: () => void;
disabled?: boolean;
label?: string;
iconSize?: string;
iconColor?: string;
text?: string;
}
const ButtonIcon = ({
icon,
children,
style,
iconStyle,
onClick,
disabled,
label,
iconSize,
iconColor,
text,
...props
}: IButtonIcon) => {
const isHaveChildren = Boolean(children);
return (
<StyledButtonIcon
aria-label={label}
isHaveChildren={isHaveChildren}
style={{
fontSize: style?.fontSize,
backgroundColor: style?.backgroundColor,
color: style?.color,
}}
iconStyle={iconStyle}
onClick={onClick}
disabled={disabled}
iconColor={iconColor}
iconSize={iconSize}
{...props}
>
{icon} <span>{children}</span>
{icon} {text && <span>{text}</span>}
</StyledButtonIcon>
);
};
hotel-management/src/components/ButtonIcon/styled.ts
+17 -56
View File
@@ -1,57 +1,24 @@
import styled, { css } from 'styled-components';
interface IStyledButtonIcon {
isHaveChildren: boolean;
style?: {
fontSize?: string;
backgroundColor?: string;
color?: string;
};
iconStyle?: {
color?: string;
size?: string;
};
iconSize?: string;
iconColor?: string;
}
const StyledButtonIcon = styled.button<IStyledButtonIcon>`
background: none;
padding: 10px;
transition: all 0.2s;
border: none;
${(props) =>
props.style?.fontSize &&
css`
font-size: ${props.style.fontSize};
`}
${(props) =>
props.style?.fontSize &&
css`
font-size: ${props.style.fontSize};
`}
${(props) =>
props.color &&
css`
font-size: ${props.color};
`}
${(props) =>
props.isHaveChildren
? css`
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
text-align: left;
font-size: var(--fs-sm-2x);
padding: 10px;
transition: all 0.2s;
width: 100%;
`
: css`
border-radius: var(--radius-md);
`}
border: none;
&:hover {
background-color: var(--hover-background-color);
@@ -59,31 +26,25 @@ const StyledButtonIcon = styled.button<IStyledButtonIcon>`
& svg {
${(props) =>
props.iconStyle?.size &&
props.iconSize &&
css`
width: ${props.iconStyle.size};
height: ${props.iconStyle.size};
width: ${props.iconSize};
height: ${props.iconSize};
`}
${(props) =>
props.iconStyle?.color &&
props.iconColor &&
css`
color: ${props.iconStyle.color};
color: ${props.iconColor};
`}
transition: all 0.3s;
}
`;
StyledButtonIcon.defaultProps = {
style: {
fontSize: '14px',
backgroundColor: 'var(--primary-color)',
color: '#000',
},
iconStyle: {
color: '#000',
size: '14px',
},
iconSize: '16px',
iconColor: '#000',
};
export { StyledButtonIcon };
hotel-management/src/components/ConfirmMessage/index.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { memo, useCallback } from 'react';
import { StyledConfirmDelete } from './styled';
// Component
import Button from '@commonStyle/Button';
import Button from '@src/commons/styles/Button';
interface IConfirmMessage {
message: string;
hotel-management/src/components/Form/Form.test.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
import Form from '.';
// Styled
import Input from '@commonStyle/Input';
import Input from '@src/commons/styles/Input';
describe('Form ', () => {
const isDisable = true;
hotel-management/src/components/Form/index.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ import {
} from './styled';
// Types
import { TDirection } from '@type/common';
import { TDirection } from '@src/types/common';
interface IFormProps {
children: ReactNode;
hotel-management/src/components/Form/styled.ts
+2 -2
View File
@@ -1,14 +1,14 @@
import styled, { css } from 'styled-components';
// Types
import { TDirection } from '@type/common';
import { TDirection } from '@src/types/common';
interface IStyledFormRow {
direction?: TDirection;
}
// Styled
import Button from '@commonStyle/Button';
import Button from '@src/commons/styles/Button';
const StyledForm = styled.form`
display: flex;
hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap
+12 -12
View File
@@ -19,8 +19,9 @@ exports[`Header Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -39,14 +40,14 @@ exports[`Header Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -65,7 +66,6 @@ exports[`Header Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
@@ -87,8 +87,9 @@ exports[`Header Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -107,14 +108,14 @@ exports[`Header Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -133,7 +134,6 @@ exports[`Header Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap
+12 -12
View File
@@ -11,8 +11,9 @@ exports[`HeaderMenu Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -31,14 +32,14 @@ exports[`HeaderMenu Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -57,7 +58,6 @@ exports[`HeaderMenu Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
@@ -70,8 +70,9 @@ exports[`HeaderMenu Should render correctly 1`] = `
<li>
<button
aria-label="Profile"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
fill="currentColor"
@@ -90,14 +91,14 @@ exports[`HeaderMenu Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
<li>
<button
aria-label="Logout"
class="sc-bdnyFh bxHnoO"
iconstyle="[object Object]"
class="sc-bdnyFh olJWF"
iconcolor="#000"
iconsize="23px"
>
<svg
aria-hidden="true"
@@ -116,7 +117,6 @@ exports[`HeaderMenu Should render correctly 1`] = `
/>
</svg>
<span />
</button>
</li>
</ul>
hotel-management/src/components/HeaderMenu/index.tsx
+7 -7
View File
@@ -3,13 +3,13 @@ import { useNavigate } from 'react-router-dom';
// Components
import { IoPersonCircleOutline } from 'react-icons/io5';
import { HiOutlineLogout } from 'react-icons/hi';
import ButtonIcon from '@component/ButtonIcon';
import ButtonIcon from '../ButtonIcon';
// Styled
import { StyledHeaderMenu } from './styled';
// Hooks
import { useLogout } from '@hook/authentication/useLogout';
import { useLogout } from '@src/hooks/authentication/useLogout';
const HeaderMenu = () => {
const { logout, isPending } = useLogout();
@@ -19,19 +19,19 @@ const HeaderMenu = () => {
<StyledHeaderMenu>
<li>
<ButtonIcon
label="Profile"
aria-label="Profile"
icon={<IoPersonCircleOutline />}
iconStyle={{ size: '23px' }}
iconSize='23px'
onClick={() => navigate('/account')}
/>
</li>
<li>
<ButtonIcon
onClick={logout}
onClick={() => logout()}
disabled={isPending}
label='Logout'
aria-label='Logout'
icon={<HiOutlineLogout />}
iconStyle={{ size: '23px' }}
iconSize='23px'
/>
</li>
</StyledHeaderMenu>
hotel-management/src/components/Menus/Menus.test.tsx
+10 -6
View File
@@ -17,12 +17,16 @@ describe('Menus', () => {
<Menus.Toggle id={id} />
<Menus.List id={id.toString()}>
<Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
Edit
</Menus.Button>
<Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
Delete
</Menus.Button>
<Menus.Button
onClick={handleOnClick}
icon={<RiEditBoxFill />}
label="Edit"
/>
<Menus.Button
onClick={handleOnClick}
icon={<RiDeleteBin2Line />}
label="Delete"
/>
</Menus.List>
</Menus.Menu>
</Menus>
hotel-management/src/components/Menus/index.tsx
+13 -24
View File
@@ -2,26 +2,22 @@ import { MouseEvent, ReactNode, useContext, useState } from 'react';
// Components
import { HiEllipsisVertical } from 'react-icons/hi2';
import ButtonIcon from '@component/ButtonIcon';
import ButtonIcon from '../ButtonIcon';
// Hooks
import { useOutsideClick } from '@hook/useOutsideClick';
import { useOutsideClick } from '@src/hooks/useOutsideClick';
// Styled
import {
StyledMenu,
StyledList,
StyledToggle
} from './styled';
import { StyledMenu, StyledList, StyledToggle } from './styled';
// Contexts
import MenusContext from '@context/MenuContext';
import MenusContext from '@src/contexts/MenuContext';
// Types
import { Nullable } from '@type/common';
import { Nullable } from '@src/types/common';
interface IButton {
children?: string;
label?: string;
icon?: ReactNode;
onClick?: () => void;
disabled?: boolean;
@@ -46,17 +42,11 @@ const Menus = ({ children }: { children: ReactNode }) => {
};
const Toggle = ({ id }: { id: string }): ReactNode => {
const {
openId,
close,
open
} = useContext(MenusContext);
const { openId, close, open } = useContext(MenusContext);
const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
e.stopPropagation();
openId !== id
? open!(id)
: close!();
openId !== id ? open!(id) : close!();
};
return (
@@ -81,7 +71,7 @@ const List = ({
return <StyledList ref={ref}>{children}</StyledList>;
};
const Button = ({ children, icon, onClick, disabled }: IButton): ReactNode => {
const Button = ({ label, icon, onClick, disabled }: IButton): ReactNode => {
const { close } = useContext(MenusContext);
const handleClick = () => {
onClick?.();
@@ -91,14 +81,13 @@ const Button = ({ children, icon, onClick, disabled }: IButton): ReactNode => {
return (
<li>
<ButtonIcon
text={label}
aria-label={label}
icon={icon}
iconColor='var(--primary-color)'
onClick={handleClick}
iconStyle={{ color: 'var(--primary-color)', size: '19px' }}
style={{ fontSize: '16px' }}
disabled={disabled}
>
{children}
</ButtonIcon>
/>
</li>
);
};
hotel-management/src/components/Modal/Modal.test.tsx
+6 -4
View File
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
// Components
import Modal from '.';
import Button from '@commonStyle/Button';
import Button from '@src/commons/styles/Button';
describe('Modal', () => {
const wrapper = render(
@@ -13,9 +13,11 @@ describe('Modal', () => {
<Button onClick={onCloseModal}>Add room</Button>
)}
/>
<Modal.Window name="room-form" title="Add form">
<p>This is a windows</p>
</Modal.Window>
<Modal.Window
name="room-form"
title="Add form"
renderChildren={(fn) => <p onClick={fn}>This is a windows</p>}
/>
</Modal>
);
hotel-management/src/components/Modal/index.tsx
+6 -8
View File
@@ -1,17 +1,15 @@
import {
ReactElement,
ReactNode,
cloneElement,
useContext,
useState,
} from 'react';
import { createPortal } from 'react-dom';
// Hooks
import { useOutsideClick } from '@hook/useOutsideClick';
import { useOutsideClick } from '@src/hooks/useOutsideClick';
// Contexts
import { ModalContext } from '@context/ModalContext';
import { ModalContext } from '@src/contexts/ModalContext';
// Styled
import { Overlay, StyledModal, StyledModalContent, TitleModal } from './styled';
@@ -34,7 +32,7 @@ const Modal = ({ children }: IModal) => {
};
interface IOpen {
renderChildren: (onCloseModal: () => void) => ReactNode;
renderChildren: (onOpenModal: () => void) => ReactNode;
modalName: string;
}
@@ -45,12 +43,12 @@ const Open = ({ renderChildren, modalName }: IOpen) => {
};
interface IWindow {
children: ReactElement;
renderChildren: (callBack: () => void) => ReactNode;
name: string;
title: string;
}
const Window = ({ children, name, title }: IWindow) => {
const Window = ({ renderChildren, name, title }: IWindow) => {
const { openName, close } = useContext(ModalContext);
const ref = useOutsideClick<HTMLDivElement>(close!);
@@ -61,7 +59,7 @@ const Window = ({ children, name, title }: IWindow) => {
<StyledModal ref={ref}>
<StyledModalContent>
<TitleModal>{title}</TitleModal>
{cloneElement(children, { onCloseModal: close })}
{renderChildren(close!)}
</StyledModalContent>
</StyledModal>
</Overlay>,
hotel-management/src/components/Nav/Nav.test.tsx
-1
View File
@@ -1,4 +1,3 @@
import { render } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
hotel-management/src/components/Nav/index.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { BsHouseDoorFill } from 'react-icons/bs';
import { StyledNav, StyledNavLink } from './styled';
// Constants
import { BOOKING, ROOM, USER } from '@constant/path';
import { BOOKING, ROOM, USER } from '@src/constants/path';
const Nav = () => {
return (
hotel-management/src/components/Pagination/__snapshots__/index.test.tsx.snap
+4 -4
View File
@@ -12,10 +12,10 @@ exports[`Pagination Should render correctly 1`] = `
Showing
1
to
5
10
of
<span>
10
20
</span>
results
</p>
@@ -84,10 +84,10 @@ exports[`Pagination Should render correctly 1`] = `
Showing
1
to
5
10
of
<span>
10
20
</span>
results
</p>
hotel-management/src/components/Pagination/index.test.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
import Pagination from '.';
describe('Pagination', () => {
const count = 10;
const count = 20;
let wrapper: RenderResult | null = null;
beforeEach(() => {
hotel-management/src/components/Pagination/index.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { useSearchParams } from 'react-router-dom';
// Constants
import { DEFAULT_PAGE_SIZE } from '@constant/config';
import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
// Styled
import { Buttons, PaginationBtn, StyledPagination } from './styled';
hotel-management/src/components/RootLayout/index.tsx
+2 -2
View File
@@ -1,11 +1,11 @@
import { Outlet } from 'react-router-dom';
// Styled
import Spinner from '@commonStyle/Spinner';
import Spinner from '@src/commons/styles/Spinner';
import { FullPageLayout } from './styled';
// Hooks
import { useAccount } from '@hook/authentication/useAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
const RootLayout = () => {
const { isPending } = useAccount();
hotel-management/src/components/RouteProtected/index.test.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { render } from '@testing-library/react';
import RouteProtected from '.';
import AppLayout from '@component/AppLayout';
import AppLayout from '../AppLayout';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { BrowserRouter } from 'react-router-dom';
hotel-management/src/components/RouteProtected/index.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { useAccount } from '@hook/authentication/useAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
import { ReactNode } from 'react';
import { Navigate } from 'react-router-dom';
hotel-management/src/components/Search/Search.test.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ jest.mock('react-router-dom', () => ({
useSearchParams: jest.fn(),
}));
jest.mock('@hook/useDebounce', () => ({
jest.mock('@src/hooks/useDebounce', () => ({
useDebounce: jest.fn((value) => value),
}));
hotel-management/src/components/Search/index.tsx
+2 -2
View File
@@ -5,10 +5,10 @@ import { useSearchParams } from 'react-router-dom';
import { StyledSearch } from './styled';
// Hooks
import { useDebounce } from '@hook/useDebounce';
import { useDebounce } from '@src/hooks/useDebounce';
// Types
import { Nullable } from '@type/common';
import { Nullable } from '@src/types/common';
interface ISearch {
setPlaceHolder: string;
hotel-management/src/components/Sidebar/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
// Components
import Nav from '@component/Nav';
import Nav from '../Nav';
// Styled
import { Heading, StyledSidebar } from './styled';
hotel-management/src/components/SortBy/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { useSearchParams } from 'react-router-dom';
import { ChangeEvent, memo } from 'react';
// Components
import Select from '@component/Select';
import Select from '../Select';
interface ISortByProps {
options: {
hotel-management/src/components/Table/Table.test.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
import Table from '.';
// Types
import { IUser } from '@type/user';
import { IUser } from '@src/types/user';
interface ITableRow {
user: IUser;
hotel-management/src/components/Table/index.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import {
} from './styled';
// Contexts
import TableContext from '@context/TableContext';
import TableContext from '@src/contexts/TableContext';
export interface ITable {
columns?: string;
hotel-management/src/contexts/UserRoomAvailableContext.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { Dispatch, createContext } from 'react';
// Types
import { IDataState } from '@type/common';
import { IDataState } from '@src/types/common';
interface IUserRoomState {
usersAvailable: IDataState[];
hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
// Contexts
import { reducer } from '@context/UserRoomAvailableContext';
import { reducer } from '../UserRoomAvailableContext';
// Types
import { IDataState } from '@type/common';
import { IDataState } from '@src/types/common';
describe('userRoomAvailableContext', () => {
let initialState: {
hotel-management/src/helpers/__tests__/helpers.test.ts
+1 -1
View File
@@ -1,5 +1,5 @@
// Helpers
import { formatCurrency, getDayDiff } from '@helper/helper';
import { formatCurrency, getDayDiff } from '../helper';
describe('formatCurrency', () => {
test('Should format correctly', () => {
hotel-management/src/helpers/__tests__/validators.test.ts
+2 -2
View File
@@ -1,5 +1,5 @@
// Constants
import { REGEX } from '@constant/commons';
import { REGEX } from '@src/constants/commons';
// Helpers
import {
@@ -7,7 +7,7 @@ import {
isValidDiscount,
isValidRegex,
isValidString,
} from '@helper/validators';
} from '../validators';
describe('isValidPhone', () => {
const isValidPhone = (phone: string) =>
hotel-management/src/hooks/__tests__/useDebounce.test.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { act, fireEvent, render } from '@testing-library/react';
import { useState } from 'react';
// Hooks
import { useDebounce } from '@hook/useDebounce';
import { useDebounce } from '../useDebounce';
jest.useFakeTimers();
hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { fireEvent, render, renderHook, screen } from '@testing-library/react';
// Hooks
import { useOutsideClick } from '@hook/useOutsideClick';
import { useOutsideClick } from '../useOutsideClick';
describe('useOutsideClick', () => {
test('Call handler when click outside element', () => {
hotel-management/src/hooks/authentication/__tests__/useAccount.test.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react';
import { User } from '@supabase/supabase-js';
// Services
import * as authenticationService from '@service/authenticationService';
import * as authenticationService from '@src/services/authenticationService';
// Hooks
import { useAccount } from '../useAccount';
hotel-management/src/hooks/authentication/useAccount.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { useQuery } from '@tanstack/react-query';
// Services
import { getCurrentAccount } from '@service/authenticationService';
import { getCurrentAccount } from '@src/services/authenticationService';
/**
* Get data of account currently login
hotel-management/src/hooks/authentication/useLogin.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
import toast from 'react-hot-toast';
// Services
import { login as loginFn } from '@service/authenticationService';
import { login as loginFn } from '@src/services/authenticationService';
/**
* Login web
hotel-management/src/hooks/authentication/useLogout.ts
+1 -1
View File
@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
// Services
import { logout as logoutFn } from '@service/authenticationService';
import { logout as logoutFn } from '@src/services/authenticationService';
/**
* Logout web
hotel-management/src/hooks/authentication/useUpdateAccount.ts
+2 -2
View File
@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'react-hot-toast';
// Services
import { updateAccount as updateAccountFn } from '@service/authenticationService';
import { updateAccount as updateAccountFn } from '@src/services/authenticationService';
// Constants
import { UPDATE_ACCOUNT_SUCCESSFUL } from '@constant/messages';
import { UPDATE_ACCOUNT_SUCCESSFUL } from '@src/constants/messages';
/**
* Update account currently login.
hotel-management/src/hooks/bookings/__tests__/useBookings.test.tsx
+4 -4
View File
@@ -11,7 +11,7 @@ import { URLSearchParams } from 'url';
import { useBookings } from '../useBookings';
// Services
import { getAllBookings } from '@service/bookingServices';
import { getAllBookings } from '@src/services/bookingServices';
jest.mock('react-router-dom', () => ({
useSearchParams: jest.fn(),
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
useQuery: jest.fn(),
}));
jest.mock('@service/bookingServices', () => ({
jest.mock('@src/services/bookingServices', () => ({
getAllBookings: jest.fn(),
}));
@@ -67,7 +67,7 @@ describe('useBookings hook', () => {
});
test('Should prefetch the second page when in the first page', async () => {
const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 7 };
const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 11 };
(queryClient.prefetchQuery as jest.Mock) = jest.fn();
(useSearchParams as jest.Mock).mockReturnValue([
@@ -105,7 +105,7 @@ describe('useBookings hook', () => {
});
test('Should prefetch the previous page and next page when in the second page', async () => {
const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 12 };
const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 22 };
(useSearchParams as jest.Mock).mockReturnValue([
new URLSearchParams('page=2'),
hotel-management/src/hooks/bookings/__tests__/useCheckout.test.tsx
+5 -5
View File
@@ -8,13 +8,13 @@ import useCheckOut from '../useCheckout';
import { act, renderHook } from '@testing-library/react';
// Services
import { checkOutBooking } from '@service/bookingServices';
import { checkOutBooking } from '@src/services/bookingServices';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
// Constants
import { CHECKOUT_SUCCESS } from '@constant/messages';
import { CHECKOUT_SUCCESS } from '@src/constants/messages';
// Mock services and constants
jest.mock('react-hot-toast');
@@ -22,10 +22,10 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/bookingServices', () => ({
jest.mock('@src/services/bookingServices', () => ({
checkOutBooking: jest.fn(),
}));
jest.mock('@hook/useUserRoomAvailable', () => ({
jest.mock('@src/hooks/useUserRoomAvailable', () => ({
useUserRoomAvailable: jest.fn(),
}));
hotel-management/src/hooks/bookings/__tests__/useCreateBooking.test.tsx
+4 -4
View File
@@ -11,20 +11,20 @@ import toast from 'react-hot-toast';
import { useCreateBooking } from '../useCreateBooking';
// Types
import { IBooking } from '@type/booking';
import { IBooking } from '@src/types/booking';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
// Services
import { createBooking } from '@service/bookingServices';
import { createBooking } from '@src/services/bookingServices';
// Mock the necessary dependencies
jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/bookingServices', () => ({
jest.mock('@src/services/bookingServices', () => ({
createBooking: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/bookings/__tests__/useUpdateBooking.test.tsx
+4 -4
View File
@@ -8,13 +8,13 @@ import {
import { ReactNode } from 'react';
// Types
import { IBooking } from '@type/booking';
import { IBooking } from '@src/types/booking';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
// Services
import { updateBooking } from '@service/bookingServices';
import { updateBooking } from '@src/services/bookingServices';
// Hooks
import { useUpdateBooking } from '../useUpdateBooking';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/bookingServices', () => ({
jest.mock('@src/services/bookingServices', () => ({
updateBooking: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/bookings/useBookings.ts
+2 -2
View File
@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
// Services
import { getAllBookings } from '@service/bookingServices';
import { getAllBookings } from '@src/services/bookingServices';
// Constants
import { DEFAULT_PAGE_SIZE } from '@constant/config';
import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
/**
* Fetch booking from database
hotel-management/src/hooks/bookings/useCheckout.ts
+3 -3
View File
@@ -2,13 +2,13 @@ import toast from 'react-hot-toast';
import { useMutation, useQueryClient } from '@tanstack/react-query';
// Constants
import { CHECKOUT_SUCCESS } from '@constant/messages';
import { CHECKOUT_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
// Services
import { checkOutBooking as checkOutBookingFn } from '@service/bookingServices';
import { checkOutBooking as checkOutBookingFn } from '@src/services/bookingServices';
const useCheckOut = () => {
const queryClient = useQueryClient();
hotel-management/src/hooks/bookings/useCreateBooking.ts
+2 -2
View File
@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { createBooking as createBookingFn } from '@service/bookingServices';
import { createBooking as createBookingFn} from '@src/services/bookingServices';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
/**
* Create booking on database
hotel-management/src/hooks/bookings/useUpdateBooking.ts
+2 -2
View File
@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { updateBooking as updateBookingFn } from '@service/bookingServices';
import { updateBooking as updateBookingFn } from '@src/services/bookingServices';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
/**
* Update booking from database
hotel-management/src/hooks/rooms/__tests__/useCreateRoom.test.tsx
+4 -4
View File
@@ -8,22 +8,22 @@ import {
import { ReactNode } from 'react';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Hooks
import { useCreateRoom } from '../useCreateRoom';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
// Services
import { createRoom } from '@service/roomServices';
import { createRoom } from '@src/services/roomServices';
jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/roomServices', () => ({
jest.mock('@src/services/roomServices', () => ({
createRoom: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/rooms/__tests__/useRooms.test.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { renderHook } from '@testing-library/react';
import { URLSearchParams } from 'url';
// Services
import { getAllRooms } from '@service/roomServices';
import { getAllRooms } from '@src/services/roomServices';
// Hooks
import { useRooms } from '../useRooms';
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
useQuery: jest.fn(),
}));
jest.mock('@service/roomServices', () => ({
jest.mock('@src/services/roomServices', () => ({
getAllRooms: jest.fn(),
}));
@@ -69,7 +69,7 @@ describe('useRooms hook', () => {
});
test('Should prefetch the second page when in the first page', async () => {
const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 7 };
const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 11 };
(useSearchParams as jest.Mock).mockReturnValue([
new URLSearchParams('page=1'),
@@ -106,7 +106,7 @@ describe('useRooms hook', () => {
});
test('Should prefetch the previous page and next page when in the second page', async () => {
const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 12 };
const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 22 };
(useSearchParams as jest.Mock).mockReturnValue([
new URLSearchParams('page=2'),
hotel-management/src/hooks/rooms/__tests__/useSetIsDeleteRoom.test.tsx
+4 -4
View File
@@ -8,13 +8,13 @@ import {
import { ReactNode } from 'react';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Constants
import { DELETE_SUCCESS } from '@constant/messages';
import { DELETE_SUCCESS } from '@src/constants/messages';
// Services
import { setIsDeleteRoom } from '@service/roomServices';
import { setIsDeleteRoom } from '@src/services/roomServices';
// Hooks
import { useSetIsDeleteRoom } from '../useSetIsDeleteRoom';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/roomServices', () => ({
jest.mock('@src/services/roomServices', () => ({
setIsDeleteRoom: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/rooms/__tests__/useUpdateRoom.test.tsx
+4 -4
View File
@@ -8,13 +8,13 @@ import {
import { ReactNode } from 'react';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
// Services
import { updateRoom } from '@service/roomServices';
import { updateRoom } from '@src/services/roomServices';
// Hooks
import { useUpdateRoom } from '../useUpdateRoom';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/roomServices', () => ({
jest.mock('@src/services/roomServices', () => ({
updateRoom: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/rooms/useCreateRoom.ts
+3 -3
View File
@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { createRoom as createRoomFn } from '@service/roomServices';
import { createRoom as createRoomFn} from '@src/services/roomServices';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Create room on database
hotel-management/src/hooks/rooms/useRooms.ts
+2 -2
View File
@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
// Services
import { getAllRooms } from '@service/roomServices';
import { getAllRooms } from '@src/services/roomServices';
// Constants
import { DEFAULT_PAGE_SIZE } from '@constant/config';
import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
/**
* Fetch room from database
hotel-management/src/hooks/rooms/useSetIsDeleteRoom.ts
+4 -4
View File
@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { setIsDeleteRoom as setIsDeleteRoomFn } from '@service/roomServices';
import { setIsDeleteRoom as setIsDeleteRoomFn } from '@src/services/roomServices';
// Constants
import * as messages from '@constant/messages';
import { DELETE_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Delete the room from database
@@ -25,7 +25,7 @@ const useSetIsDeleteRoom = () => {
} = useMutation({
mutationFn: setIsDeleteRoomFn,
onSuccess: (room) => {
toast.success(messages.DELETE_SUCCESS);
toast.success(DELETE_SUCCESS);
queryClient.invalidateQueries({
queryKey: ['rooms'],
});
hotel-management/src/hooks/rooms/useUpdateRoom.ts
+3 -3
View File
@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { updateRoom as updateRoomFn } from '@service/roomServices';
import { updateRoom as updateRoomFn } from '@src/services/roomServices';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Update room from database
hotel-management/src/hooks/useOutsideClick.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { MutableRefObject, useEffect, useRef } from 'react';
// Types
import { Nullable } from '@type/common';
import { Nullable } from '@src/types/common';
/**
* Custom hook to call handler when click outside element
hotel-management/src/hooks/useUserRoomAvailable.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { useContext } from 'react';
// Contexts
import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
import { UserRoomAvailableContext } from '@src/contexts/UserRoomAvailableContext';
/**
* The hooks check the place call is in UserRoomAvailableProvider or not
hotel-management/src/hooks/users/__tests__/useCreateUser.test.tsx
+4 -4
View File
@@ -11,20 +11,20 @@ import { ReactNode } from 'react';
import { useCreateUser } from '../useCreateUser';
// Types
import { IUser } from '@type/user';
import { IUser } from '@src/types/user';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
// Services
import { createUser } from '@service/userServices';
import { createUser } from '@src/services/userServices';
// Mock the necessary dependencies
jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/userServices', () => ({
jest.mock('@src/services/userServices', () => ({
createUser: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/users/__tests__/useSetIsDeleteUser.test.tsx
+4 -4
View File
@@ -8,13 +8,13 @@ import {
import { ReactNode } from 'react';
// Types
import { IUser } from '@type/user';
import { IUser } from '@src/types/user';
// Constants
import { DELETE_SUCCESS } from '@constant/messages';
import { DELETE_SUCCESS } from '@src/constants/messages';
// Services
import { setIsDeleteUser } from '@service/userServices';
import { setIsDeleteUser } from '@src/services/userServices';
// Hooks
import { useIsDeleteUser } from '../useSetIsDeleteUser';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/userServices', () => ({
jest.mock('@src/services/userServices', () => ({
setIsDeleteUser: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/users/__tests__/useUpdateUser.test.tsx
+4 -4
View File
@@ -8,13 +8,13 @@ import {
import { ReactNode } from 'react';
// Types
import { IUser } from '@type/user';
import { IUser } from '@src/types/user';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
// Services
import { updateUser } from '@service/userServices';
import { updateUser } from '@src/services/userServices';
// Hooks
import { useUpdateUser } from '../useUpdateUser';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
...jest.requireActual('@tanstack/react-query'),
useQueryClient: jest.fn(),
}));
jest.mock('@service/userServices', () => ({
jest.mock('@src/services/userServices', () => ({
updateUser: jest.fn(),
}));
jest.mock('react-hot-toast');
hotel-management/src/hooks/users/__tests__/useUsers.test.tsx
+4 -4
View File
@@ -8,7 +8,7 @@ import { renderHook } from '@testing-library/react';
import { URLSearchParams } from 'url';
// Services
import { getAllUsers } from '@service/userServices';
import { getAllUsers } from '@src/services/userServices';
// Hooks
import { useUsers } from '../useUsers';
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
useQuery: jest.fn(),
}));
jest.mock('@service/userServices', () => ({
jest.mock('@src/services/userServices', () => ({
getAllUsers: jest.fn(),
}));
@@ -69,7 +69,7 @@ describe('useUsers hook', () => {
});
test('Should prefetch the second page when in the first page', async () => {
const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 7 };
const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 11 };
(useSearchParams as jest.Mock).mockReturnValue([
new URLSearchParams('page=1'),
@@ -106,7 +106,7 @@ describe('useUsers hook', () => {
});
test('Should prefetch the previous page and next page when in the second page', async () => {
const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 12 };
const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 22 };
(useSearchParams as jest.Mock).mockReturnValue([
new URLSearchParams('page=2'),
hotel-management/src/hooks/users/useCreateUser.ts
+3 -3
View File
@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { createUser as createUserFn } from '@service/userServices';
import { createUser as createUserFn } from '@src/services/userServices';
// Constants
import { ADD_SUCCESS } from '@constant/messages';
import { ADD_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Create user in database
hotel-management/src/hooks/users/useSetIsDeleteUser.ts
+6 -4
View File
@@ -2,11 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
import toast from 'react-hot-toast';
// Services
import { setIsDeleteUser as setIsDeleteUserFn } from '@service/userServices';
import { setIsDeleteUser as setIsDeleteUserFn } from '@src/services/userServices';
// Constants
import * as messages from '@constant/messages';
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { DELETE_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Delete the user from database
@@ -23,7 +25,7 @@ const useIsDeleteUser = () => {
} = useMutation({
mutationFn: setIsDeleteUserFn,
onSuccess: (user) => {
toast.success(messages.DELETE_SUCCESS);
toast.success(DELETE_SUCCESS);
queryClient.invalidateQueries({
queryKey: ['users'],
});
hotel-management/src/hooks/users/useUpdateUser.ts
+3 -3
View File
@@ -2,13 +2,13 @@ import toast from 'react-hot-toast';
import { useMutation, useQueryClient } from '@tanstack/react-query';
// Services
import { updateUser as updateUserFn } from '@service/userServices';
import { updateUser as updateUserFn } from '@src/services/userServices';
// Constants
import { UPDATE_SUCCESS } from '@constant/messages';
import { UPDATE_SUCCESS } from '@src/constants/messages';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '../useUserRoomAvailable';
/**
* Update user from database
hotel-management/src/hooks/users/useUsers.ts
+2 -2
View File
@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
import { useSearchParams } from 'react-router-dom';
// Services
import { getAllUsers } from '@service/userServices';
import { getAllUsers } from '@src/services/userServices';
// Constants
import { DEFAULT_PAGE_SIZE } from '@constant/config';
import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
/**
* Fetch data of users from database
hotel-management/src/pages/Account/AccountInforForm.tsx
+5 -5
View File
@@ -1,17 +1,17 @@
import { useForm } from 'react-hook-form';
// Styled
import Input from '@commonStyle/Input';
import Input from '@src/commons/styles/Input';
// Components
import Form from '@component/Form';
import Form from '@src/components/Form';
// Constants
import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage';
import { REQUIRED_FIELD_ERROR } from '@src/constants/formValidateMessage';
// Hooks
import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
import { useAccount } from '@hook/authentication/useAccount';
import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
interface IAccountForm {
fullName: string;
hotel-management/src/pages/Account/AccountPasswordForm.tsx
+6 -6
View File
@@ -3,24 +3,24 @@ import { useForm } from 'react-hook-form';
import toast from 'react-hot-toast';
// Styled
import Input from '@commonStyle/Input';
import Input from '@src/commons/styles/Input';
// Components
import Form from '@component/Form';
import Form from '@src/components/Form';
// Constants
import { REGEX } from '@constant/commons';
import { REGEX } from '@src/constants/commons';
import {
PASSWORD_CONDITION,
PASSWORD_NOT_MATCH,
PASSWORD_NOT_MATCH_REQUIREMENT,
} from '@constant/formValidateMessage';
} from '@src/constants/formValidateMessage';
// Helpers
import { isValidRegex } from '@helper/validators';
import { isValidRegex } from '@src/helpers/validators';
// Hooks
import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
interface IAccountPasswordForm {
password: string;
hotel-management/src/pages/Account/__tests__/AccountInforForm.test.tsx
+5 -5
View File
@@ -2,14 +2,14 @@ import { act, fireEvent, render, RenderResult, waitFor } from '@testing-library/
import '@testing-library/jest-dom';
// Components
import AccountInforForm from '@page/Account/AccountInforForm';
import AccountInforForm from '@src/pages/Account/AccountInforForm';
// Hooks
import { useAccount } from '@hook/authentication/useAccount';
import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
jest.mock('@hook/authentication/useUpdateAccount');
jest.mock('@hook/authentication/useAccount');
jest.mock('@src/hooks/authentication/useUpdateAccount');
jest.mock('@src/hooks/authentication/useAccount');
const mockAccount = {
email: 'admin@nezumi.site',
hotel-management/src/pages/Account/__tests__/AccountPasswordForm.test.tsx
+2 -2
View File
@@ -10,9 +10,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import AccountPasswordForm from '../AccountPasswordForm';
// Hooks
import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
jest.mock('@hook/authentication/useUpdateAccount');
jest.mock('@src/hooks/authentication/useUpdateAccount');
describe('AccountPasswordForm', () => {
let wrapper: RenderResult | null = null;
hotel-management/src/pages/Booking/BookingForm.tsx
+11 -11
View File
@@ -2,29 +2,29 @@ import { useCallback, useMemo, useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
// Styled
import Input from '@commonStyle/Input.ts';
import Input from '@src/commons/styles/Input';
// Constants
import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage.ts';
import { REQUIRED_FIELD_ERROR } from '@src/constants/formValidateMessage';
// Components
import Form from '@component/Form/index.tsx';
import Select, { ISelectOptions } from '@component/Select/index.tsx';
import Form from '@src/components/Form';
import Select, { ISelectOptions } from '@src/components/Select/index.tsx';
// Hooks
import { useCreateBooking } from '@hook/bookings/useCreateBooking.ts';
import { useUpdateBooking } from '@hook/bookings/useUpdateBooking.ts';
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable.ts';
import { useCreateBooking } from '@src/hooks/bookings/useCreateBooking';
import { useUpdateBooking } from '@src/hooks/bookings/useUpdateBooking';
import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
// Helpers
import { formatCurrency, getDayDiff } from '@helper/helper.ts';
import { formatCurrency, getDayDiff } from '@src/helpers/helper';
// Services
import { getRoomById, updateRoomStatus } from '@service/roomServices.ts';
import { updateUserBookedStatus } from '@service/userServices.ts';
import { getRoomById, updateRoomStatus } from '@src/services/roomServices';
import { updateUserBookedStatus } from '@src/services/userServices';
// Types
import { IBooking, TBookingResponse } from '@type/booking.ts';
import { IBooking, TBookingResponse } from '@src/types/booking';
interface IBookingFormProp {
onCloseModal?: () => void;
hotel-management/src/pages/Booking/BookingRow.tsx
+49 -40
View File
@@ -2,26 +2,26 @@ import toast from 'react-hot-toast';
import { useCallback, useMemo } from 'react';
// Helpers
import { formatCurrency } from '@helper/helper';
import { formatCurrency } from '@src/helpers/helper';
// Types
import { TBookingResponse } from '@type/booking';
import { TBookingResponse } from '@src/types/booking';
// Components
import Modal from '@component/Modal';
import Table from '@component/Table';
import Menus from '@component/Menus';
import Modal from '@src/components/Modal';
import Table from '@src/components/Table';
import Menus from '@src/components/Menus';
import { RiEditBoxFill } from 'react-icons/ri';
import { TbArrowNarrowRight } from 'react-icons/tb';
import { ImExit } from 'react-icons/im';
import BookingForm from './BookingForm';
import ConfirmMessage from '@component/ConfirmMessage';
import ConfirmMessage from '@src/components/ConfirmMessage';
// Hooks
import useCheckOut from '@hook/bookings/useCheckout';
import useCheckOut from '@src/hooks/bookings/useCheckout';
// Constants
import { FORM } from '@constant/commons';
import { FORM } from '@src/constants/commons';
interface IBookingRow {
booking: TBookingResponse;
@@ -29,38 +29,28 @@ interface IBookingRow {
const BookingRow = ({ booking }: IBookingRow) => {
const { checkOutBooking } = useCheckOut();
const {
id,
users,
startDate,
endDate,
rooms,
amount,
status
} = booking;
const { id, users, startDate, endDate, rooms, amount, status } = booking;
const formattedPrice = useMemo(() => formatCurrency(amount), [amount]);
const renderEditBtn = useCallback(
(onCloseModal: () => void) => (
(onOpenModal: () => void) => (
<Menus.Button
onClick={onCloseModal}
onClick={onOpenModal}
icon={<RiEditBoxFill />}
disabled={!status}
>
Edit
</Menus.Button>
label={'Edit'}
/>
),
[status]
);
const renderCheckOutBtn = useCallback(
(onCloseModal: () => void) => (
(onOpenModal: () => void) => (
<Menus.Button
onClick={onCloseModal}
onClick={onOpenModal}
icon={<ImExit />}
disabled={!status}
>
Checkout
</Menus.Button>
label={'Check out'}
/>
),
[status]
);
@@ -77,6 +67,28 @@ const BookingRow = ({ booking }: IBookingRow) => {
}
}, [booking, checkOutBooking]);
const renderRow = useCallback(
(onCloseModal: () => void) => (
<BookingForm
booking={booking}
key={booking.id}
onCloseModal={onCloseModal}
/>
),
[booking]
);
const renderConfirmMessage = useCallback(
(onCloseModal: () => void) => (
<ConfirmMessage
message={`Are you sure to checkout this user? '${booking.users?.name}'`}
onConfirm={handleClickCheckOutBtn}
onCloseModal={onCloseModal}
/>
),
[booking.users?.name, handleClickCheckOutBtn]
);
return (
<Table.Row>
<div>{users?.name}</div>
@@ -86,11 +98,7 @@ const BookingRow = ({ booking }: IBookingRow) => {
</div>
<div>{rooms?.name}</div>
<div>{formattedPrice}</div>
<div>{
status
? 'Check in'
: 'Check out'
}</div>
<div>{status ? 'Check in' : 'Check out'}</div>
<div>
<Modal>
@@ -109,16 +117,17 @@ const BookingRow = ({ booking }: IBookingRow) => {
/>
</Menus.List>
<Modal.Window name={FORM.EDIT} title="Edit Booking">
<BookingForm booking={booking} key={booking.id} />
</Modal.Window>
<Modal.Window
name={FORM.EDIT}
title="Edit Booking"
renderChildren={renderRow}
/>
<Modal.Window name={FORM.CHECKOUT} title="Checkout">
<ConfirmMessage
message={`Are you sure to checkout this user? '${booking.users?.name}'`}
onConfirm={handleClickCheckOutBtn}
<Modal.Window
name={FORM.CHECKOUT}
title="Checkout"
renderChildren={renderConfirmMessage}
/>
</Modal.Window>
</Menus.Menu>
</Modal>
</div>
hotel-management/src/pages/Booking/BookingTable.tsx
+9 -9
View File
@@ -1,23 +1,23 @@
import { useCallback } from 'react';
// Components
import Menus from '@component/Menus';
import Table from '@component/Table';
import Message from '@component/Message';
import Search from '@component/Search';
import Pagination from '@component/Pagination';
import Menus from '@src/components/Menus';
import Table from '@src/components/Table';
import Message from '@src/components/Message';
import Search from '@src/components/Search';
import Pagination from '@src/components/Pagination';
import BookingRow from './BookingRow';
// Styled
import { StyledOperationTable } from './styled';
import Direction from '@commonStyle/Direction';
import Spinner from '@commonStyle/Spinner';
import Direction from '@src/commons/styles/Direction';
import Spinner from '@src/commons/styles/Spinner';
// Hooks
import { useBookings } from '@hook/bookings/useBookings';
import { useBookings } from '@src/hooks/bookings/useBookings';
// Types
import { TBookingResponse } from '@type/booking';
import { TBookingResponse } from '@src/types/booking';
const BookingTable = () => {
const columnName = [
hotel-management/src/pages/Booking/__tests__/BookingForm.test.tsx
+5 -5
View File
@@ -8,25 +8,25 @@ import {
} from '@testing-library/react';
// Types
import { TBookingResponse } from '@type/booking';
import { TBookingResponse } from '@src/types/booking';
// Components
import BookingForm from '../BookingForm';
// Hooks
import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
const mockUpdateBooking = jest.fn();
jest.mock('@hook/bookings/useUpdateBooking', () => ({
...jest.requireActual('@hook/bookings/useUpdateBooking'),
jest.mock('@src/hooks/bookings/useUpdateBooking', () => ({
...jest.requireActual('@src/hooks/bookings/useUpdateBooking'),
useUpdateBooking: jest.fn(() => ({
isUpdating: false,
updateBooking: mockUpdateBooking,
})),
}));
jest.mock('@hook/useUserRoomAvailable.ts');
jest.mock('@src/hooks/useUserRoomAvailable.ts');
const mockUseUserRoomAvailable = useUserRoomAvailable as jest.MockedFunction<
typeof useUserRoomAvailable
hotel-management/src/pages/Booking/__tests__/BookingRow.test.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react';
// Types
import { TBookingResponse } from '@type/booking';
import { TBookingResponse } from '@src/types/booking';
// Components
import BookingRow from '../BookingRow';
hotel-management/src/pages/Booking/__tests__/BookingTable.test.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
// Components
import BookingTable from '@page/Booking/BookingTable';
import BookingTable from '@src/pages/Booking/BookingTable';
describe('UserTable', () => {
const queryClient = new QueryClient();
hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingForm.test.tsx.snap
+2 -2
View File
@@ -79,7 +79,7 @@ exports[`BookingForm Should render correctly 1`] = `
<input
class="sc-bdnyFh gXSWSo"
id="startDate"
min="2023-12-04"
min="2023-12-06"
name="startDate"
type="date"
/>
@@ -223,7 +223,7 @@ exports[`BookingForm Should render correctly 1`] = `
<input
class="sc-bdnyFh gXSWSo"
id="startDate"
min="2023-12-04"
min="2023-12-06"
name="startDate"
type="date"
/>
hotel-management/src/pages/Booking/index.tsx
+11 -7
View File
@@ -1,15 +1,15 @@
// Styled
import Direction from '@commonStyle/Direction';
import Direction from '@src/commons/styles/Direction';
import { StyledBooking, Title } from './styled';
import Button from '@commonStyle/Button';
import Button from '@src/commons/styles/Button';
// Components
import Modal from '@component/Modal';
import Modal from '@src/components/Modal';
import BookingTable from './BookingTable';
import BookingForm from './BookingForm';
// Constants
import { FORM } from '@constant/commons';
import { FORM } from '@src/constants/commons';
const Booking = () => {
return (
@@ -24,9 +24,13 @@ const Booking = () => {
<Button onClick={onCloseModal}>Add booking</Button>
)}
/>
<Modal.Window name={FORM.BOOKING} title="Add form">
<BookingForm />
</Modal.Window>
<Modal.Window
name={FORM.BOOKING}
title="Add form"
renderChildren={(onCloseModal) => (
<BookingForm onCloseModal={onCloseModal} />
)}
/>
</Modal>
</Direction>
hotel-management/src/pages/Login/LoginForm.tsx
+7 -7
View File
@@ -1,29 +1,29 @@
import { useForm } from 'react-hook-form';
// Components
import Form from '@component/Form';
import Form from '@src/components/Form';
// Styled
import { FieldInput, StyledLoginForm } from './styled';
import Button from '@commonStyle/Button';
import Button from '@src/commons/styles/Button';
// Constants
import {
INVALID_EMAIL,
REQUIRED_FIELD_ERROR,
} from '@constant/formValidateMessage';
} from '@src/constants/formValidateMessage';
// Types
import { ILogin } from '@type/common';
import { ILogin } from '@src/types/common';
// Hooks
import { useLogin } from '@hook/authentication/useLogin';
import { useLogin } from '@src/hooks/authentication/useLogin';
// Helpers
import { isValidRegex } from '@helper/validators';
import { isValidRegex } from '@src/helpers/validators';
// Constants
import { REGEX } from '@constant/commons';
import { REGEX } from '@src/constants/commons';
const LoginForm = () => {
const {
hotel-management/src/pages/Login/__tests__/LoginForm.test.tsx
+3 -3
View File
@@ -1,10 +1,10 @@
import { useLogin } from "@hook/authentication/useLogin";
import LoginForm from "@page/Login/LoginForm";
import { useLogin } from "@src/hooks/authentication/useLogin";
import LoginForm from "@src/pages/Login/LoginForm";
import { fireEvent, render, waitFor } from "@testing-library/react";
// Mock the useLogin hook
jest.mock('@hook/authentication/useLogin', () => ({
jest.mock('@src/hooks/authentication/useLogin', () => ({
useLogin: jest.fn(),
}));
hotel-management/src/pages/Login/index.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { LoginLayout, StyledLogo, TitleStyled } from './styled';
import LoginForm from './LoginForm';
// Hooks
import { useAccount } from '@hook/authentication/useAccount';
import { useAccount } from '@src/hooks/authentication/useAccount';
const Login = () => {
const { account } = useAccount();
hotel-management/src/pages/Login/styled.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import styled from 'styled-components';
// Styled
import CommonInput from '@commonStyle/CommonInput';
import CommonInput from '@src/commons/styles/CommonInput';
const LoginLayout = styled.main`
height: 100vh;
hotel-management/src/pages/NotFound/__tests__/index.test.tsx
+6 -6
View File
@@ -1,4 +1,4 @@
import { fireEvent, render, screen } from "@testing-library/react";
import { fireEvent, render } from "@testing-library/react";
import NotFound from "..";
import { useNavigate } from "react-router-dom";
@@ -9,18 +9,18 @@ jest.mock('react-router-dom', () => ({
describe('NotFound', () => {
test('Should render correctly', () => {
render(<NotFound />);
const wrapper = render(<NotFound />);
expect(screen.getByText('The page not found!')).toBeInTheDocument();
expect(screen.getByText('Go back!')).toBeInTheDocument();
expect(wrapper.getByText('The page not found!')).toBeInTheDocument();
expect(wrapper.getByText('Go back!')).toBeInTheDocument();
});
test('Should call navigate correctly when click button', () => {
const mockNavigate = jest.fn();
(useNavigate as jest.Mock).mockReturnValue(mockNavigate);
render(<NotFound />);
const wrapper = render(<NotFound />);
fireEvent.click(screen.getByText('Go back!'));
fireEvent.click(wrapper.getByText('Go back!'));
expect(mockNavigate).toHaveBeenCalledTimes(1);
expect(mockNavigate).toHaveBeenCalledWith(-1);
hotel-management/src/pages/Room/RoomForm.tsx
+7 -7
View File
@@ -1,27 +1,27 @@
import { useForm } from 'react-hook-form';
// Styled
import Input from '@commonStyle/Input.ts';
import Input from '@src/commons/styles/Input.ts';
// Types
import { IRoom } from '@type/room.ts';
import { IRoom } from '@src/types/room.ts';
// Constants
import {
INVALID_FIELD,
REQUIRED_FIELD_ERROR,
} from '@constant/formValidateMessage.ts';
} from '@src/constants/formValidateMessage.ts';
import { REGEX } from '../../constants/commons.ts';
// Helpers
import { isValidRegex, isValidString } from '@helper/validators.ts';
import { isValidRegex, isValidString } from '@src/helpers/validators.ts';
// Components
import Form from '@component/Form/index.tsx';
import Form from '@src/components/Form/index.tsx';
// Hooks
import { useCreateRoom } from '@hook/rooms/useCreateRoom.ts';
import { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts';
import { useCreateRoom } from '@src/hooks/rooms/useCreateRoom.ts';
import { useUpdateRoom } from '@src/hooks/rooms/useUpdateRoom.ts';
interface IRoomFormProp {
onCloseModal?: () => void;
hotel-management/src/pages/Room/RoomRow.tsx
+50 -35
View File
@@ -1,66 +1,80 @@
import { useCallback, useMemo } from 'react';
// Helpers
import { formatCurrency } from '@helper/helper';
import { formatCurrency } from '@src/helpers/helper';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Components
import RoomForm from './RoomForm';
import Modal from '@component/Modal';
import Table from '@component/Table';
import Menus from '@component/Menus';
import Modal from '@src/components/Modal';
import Table from '@src/components/Table';
import Menus from '@src/components/Menus';
import { RiEditBoxFill } from 'react-icons/ri';
import { HiTrash } from 'react-icons/hi';
import ConfirmMessage from '@component/ConfirmMessage';
import ConfirmMessage from '@src/components/ConfirmMessage';
// Hooks
import { useSetIsDeleteRoom } from '@hook/rooms/useSetIsDeleteRoom';
import { useSetIsDeleteRoom } from '@src/hooks/rooms/useSetIsDeleteRoom';
// Constants
import { FORM } from '@constant/commons';
import { FORM } from '@src/constants/commons';
interface IRoomRow {
room: IRoom;
}
const RoomRow = ({ room }: IRoomRow) => {
const {
id,
name,
price,
status
} = room;
const { id, name, price, status } = room;
const { setIsDeleteRoom } = useSetIsDeleteRoom();
const formattedPrice = useMemo(() => formatCurrency(price), [price]);
const renderEditBtn = useCallback(
(onCloseModal: () => void) => (
<Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
Edit
</Menus.Button>
(onOpenModal: () => void) => (
<Menus.Button
onClick={onOpenModal}
icon={<RiEditBoxFill />}
label={'Edit'}
/>
),
[]
);
const renderDeleteBtn = useCallback(
(onCloseModal: () => void) => (
<Menus.Button icon={<HiTrash />} onClick={onCloseModal} disabled={status}>
Delete
</Menus.Button>
(onOpenModal: () => void) => (
<Menus.Button
icon={<HiTrash />}
onClick={onOpenModal}
disabled={status}
label={'Delete'}
/>
),
[status]
);
const renderRow = useCallback(
(onCloseModal: () => void) => (
<RoomForm room={room} onCloseModal={onCloseModal} />
),
[room]
);
const renderConfirmMessage = useCallback(
(onCloseModal: () => void) => (
<ConfirmMessage
message={`Are you sure to delete ${name}?`}
onConfirm={() => setIsDeleteRoom(id)}
onCloseModal={onCloseModal}
/>
),
[id, name, setIsDeleteRoom]
);
return (
<Table.Row>
<div>{id}</div>
<div>{name}</div>
<div>{formattedPrice}</div>
<div>{
status
? 'Unavailable'
: 'Available'
}</div>
<div>{status ? 'Unavailable' : 'Available'}</div>
<div>
<Modal>
@@ -78,16 +92,17 @@ const RoomRow = ({ room }: IRoomRow) => {
/>
</Menus.List>
<Modal.Window name={FORM.EDIT} title="Edit Room">
<RoomForm room={room} />
</Modal.Window>
<Modal.Window
name={FORM.EDIT}
title="Edit Room"
renderChildren={renderRow}
/>
<Modal.Window name={FORM.DELETE} title="Delete Room">
<ConfirmMessage
message={`Are you sure to delete ${name}?`}
onConfirm={() => setIsDeleteRoom(id)}
<Modal.Window
name={FORM.DELETE}
title="Delete Room"
renderChildren={renderConfirmMessage}
/>
</Modal.Window>
</Menus.Menu>
</Modal>
</div>
hotel-management/src/pages/Room/RoomTable.tsx
+12 -12
View File
@@ -1,28 +1,28 @@
import { useCallback } from 'react';
// Components
import Menus from '@component/Menus';
import Table from '@component/Table';
import Message from '@component/Message';
import Search from '@component/Search';
import SortBy from '@component/SortBy';
import OrderBy from '@component/OrderBy';
import Menus from '@src/components/Menus';
import Table from '@src/components/Table';
import Message from '@src/components/Message';
import Search from '@src/components/Search';
import SortBy from '@src/components/SortBy';
import OrderBy from '@src/components/OrderBy';
import RoomRow from './RoomRow';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Constants
import { ORDERBY_OPTIONS, ROOM_PAGE } from '@constant/commons';
import { ORDERBY_OPTIONS, ROOM_PAGE } from '@src/constants/commons';
// Styled
import { StyledOperationTable } from './styled';
import Direction from '@commonStyle/Direction';
import Spinner from '@commonStyle/Spinner';
import Direction from '@src/commons/styles/Direction';
import Spinner from '@src/commons/styles/Spinner';
// Hooks
import { useRooms } from '@hook/rooms/useRooms';
import Pagination from '@component/Pagination';
import { useRooms } from '@src/hooks/rooms/useRooms';
import Pagination from '@src/components/Pagination';
const RoomTable = () => {
const columnName = ['Id', 'Name', 'Price', 'Status'];
hotel-management/src/pages/Room/__tests__/RoomForm.test.tsx
+5 -5
View File
@@ -8,7 +8,7 @@ import {
} from '@testing-library/react';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Components
import RoomForm from '../RoomForm';
@@ -16,16 +16,16 @@ import RoomForm from '../RoomForm';
const mockCreateRoom = jest.fn();
const mockUpdateRoom = jest.fn();
jest.mock('@hook/rooms/useCreateRoom.ts', () => ({
...jest.requireActual('@hook/rooms/useCreateRoom.ts'),
jest.mock('@src/hooks/rooms/useCreateRoom.ts', () => ({
...jest.requireActual('@src/hooks/rooms/useCreateRoom.ts'),
useCreateRoom: jest.fn(() => ({
isCreating: false,
createRoom: mockCreateRoom,
})),
}));
jest.mock('@hook/rooms/useUpdateRoom', () => ({
...jest.requireActual('@hook/rooms/useUpdateRoom'),
jest.mock('@src/hooks/rooms/useUpdateRoom', () => ({
...jest.requireActual('@src/hooks/rooms/useUpdateRoom'),
useUpdateRoom: jest.fn(() => ({
isUpdating: false,
updateRoom: mockUpdateRoom,
hotel-management/src/pages/Room/__tests__/RoomRow.test.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { render } from '@testing-library/react';
// Types
import { IRoom } from '@type/room';
import { IRoom } from '@src/types/room';
// Components
import RoomRow from '../RoomRow';
hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx
+1 -1
View File
@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
// Components
import RoomTable from '@page/Room/RoomTable';
import RoomTable from '@src/pages/Room/RoomTable';
describe('UserTable', () => {
const queryClient = new QueryClient();
hotel-management/src/pages/Room/index.tsx
+10 -6
View File
@@ -1,12 +1,12 @@
// Components
import RoomTable from './RoomTable';
import RoomForm from './RoomForm';
import Modal from '@component/Modal';
import Modal from '@src/components/Modal';
// Styled
import { StyledRoom, Title } from './styled';
import Direction from '@commonStyle/Direction.ts';
import Button from '@commonStyle/Button';
import Direction from '@src/commons/styles/Direction';
import Button from '@src/commons/styles/Button';
const Room = () => {
return (
@@ -21,9 +21,13 @@ const Room = () => {
<Button onClick={onCloseModal}>Add room</Button>
)}
/>
<Modal.Window name="room-form" title="Add form">
<RoomForm />
</Modal.Window>
<Modal.Window
name="room-form"
title="Add form"
renderChildren={(onCloseModal) => (
<RoomForm onCloseModal={onCloseModal} />
)}
/>
</Modal>
</Direction>

Some files were not shown because too many files have changed in this diff Show More