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

Merge pull request #7 from Nez27/feat/refactor-code

Browse Source 
Refactor code and update config project
This commit is contained in:
Loi Phan
2023-10-24 11:19:44 +07:00
committed by GitHub
parent 0345593a48 2b2ed6765f
commit 52c3e28fbc
12 changed files with 77 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hotel-management/index.html
+1
View File
@@ -4,6 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Hotel Management" />
<title>Hotel Management</title> <title>Hotel Management</title>
</head> </head>
<body> <body>
hotel-management/package.json
+1
View File
@@ -23,6 +23,7 @@
] ]
}, },
"dependencies": { "dependencies": {
"@emotion/is-prop-valid": "^1.2.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.11.0", "react-icons": "^4.11.0",
hotel-management/pnpm-lock.yaml
Generated
+19 -16
View File
@@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false excludeLinksFromLockfile: false
dependencies: dependencies:
'@emotion/is-prop-valid':
specifier: ^1.2.1
version: 1.2.1
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
@@ -24,10 +27,10 @@ dependencies:
devDependencies: devDependencies:
'@types/react': '@types/react':
specifier: ^18.2.15 specifier: ^18.2.15
version: 18.2.28 version: 18.2.29
'@types/react-dom': '@types/react-dom':
specifier: ^18.2.7 specifier: ^18.2.7
version: 18.2.13 version: 18.2.14
'@typescript-eslint/eslint-plugin': '@typescript-eslint/eslint-plugin':
specifier: ^6.0.0 specifier: ^6.0.0
version: 6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2) version: 6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2)
@@ -651,34 +654,34 @@ packages:
resolution: {integrity: sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==} resolution: {integrity: sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==}
dev: true dev: true
/@types/prop-types@15.7.8: /@types/prop-types@15.7.9:
resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==} resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
dev: true dev: true
/@types/react-dom@18.2.13: /@types/react-dom@18.2.14:
resolution: {integrity: sha512-eJIUv7rPP+EC45uNYp/ThhSpE16k22VJUknt5OLoH9tbXoi8bMhwLf5xRuWMywamNbWzhrSmU7IBJfPup1+3fw==} resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
dependencies: dependencies:
'@types/react': 18.2.28 '@types/react': 18.2.29
dev: true dev: true
/@types/react@18.2.28: /@types/react@18.2.29:
resolution: {integrity: sha512-ad4aa/RaaJS3hyGz0BGegdnSRXQBkd1CCYDCdNjBPg90UUpLgo+WlJqb9fMYUxtehmzF3PJaTWqRZjko6BRzBg==} resolution: {integrity: sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q==}
dependencies: dependencies:
'@types/prop-types': 15.7.8 '@types/prop-types': 15.7.9
'@types/scheduler': 0.16.4 '@types/scheduler': 0.16.5
csstype: 3.1.2 csstype: 3.1.2
dev: true dev: true
/@types/scheduler@0.16.4: /@types/scheduler@0.16.5:
resolution: {integrity: sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==} resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
dev: true dev: true
/@types/semver@7.5.3: /@types/semver@7.5.3:
resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==} resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
dev: true dev: true
/@types/stylis@4.2.1: /@types/stylis@4.2.2:
resolution: {integrity: sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg==} resolution: {integrity: sha512-Rm17MsTpQQP5Jq4BF7CdrxJsDufoiL/q5IbJZYZmOZAJALyijgF7BzLgobXUqraNcQdqFYLYGeglDp6QzaxPpg==}
dev: false dev: false
/@typescript-eslint/eslint-plugin@6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2): /@typescript-eslint/eslint-plugin@6.7.5(@typescript-eslint/parser@6.7.5)(eslint@8.51.0)(typescript@5.2.2):
@@ -1994,7 +1997,7 @@ packages:
dependencies: dependencies:
'@emotion/is-prop-valid': 1.2.1 '@emotion/is-prop-valid': 1.2.1
'@emotion/unitless': 0.8.1 '@emotion/unitless': 0.8.1
'@types/stylis': 4.2.1 '@types/stylis': 4.2.2
css-to-react-native: 3.2.0 css-to-react-native: 3.2.0
csstype: 3.1.2 csstype: 3.1.2
postcss: 8.4.31 postcss: 8.4.31
hotel-management/src/App.tsx
+28 -12
View File
@@ -1,7 +1,9 @@
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import isPropValid from '@emotion/is-prop-valid';
import { StyleSheetManager } from 'styled-components';
// Components // Components
import AppLayout from './ui/AppLayout'; import AppLayout from './components/AppLayout';
import User from './pages/User'; import User from './pages/User';
import Dashboard from './pages/Dashboard'; import Dashboard from './pages/Dashboard';
import Room from './pages/Room'; import Room from './pages/Room';
@@ -13,19 +15,33 @@ import * as PATH from './constants/path';
function App() { function App() {
return ( return (
<> <>
<BrowserRouter> <StyleSheetManager shouldForwardProp={shouldForwardProp}>
<Routes> <BrowserRouter>
<Route element={<AppLayout />}> <Routes>
<Route index element={<Navigate replace to={PATH.USER} />} /> <Route element={<AppLayout />}>
<Route path={PATH.DASHBOARD} element={<Dashboard />} /> <Route index element={<Navigate replace to={PATH.USER} />} />
<Route path={PATH.USER} element={<User />} /> <Route path={PATH.DASHBOARD} element={<Dashboard />} />
<Route path={PATH.ROOM} element={<Room />} /> <Route path={PATH.USER} element={<User />} />
</Route> <Route path={PATH.ROOM} element={<Room />} />
<Route path={PATH.OTHER_PATH} element={<NotFound />} /> </Route>
</Routes> <Route path={PATH.OTHER_PATH} element={<NotFound />} />
</BrowserRouter> </Routes>
</BrowserRouter>
</StyleSheetManager>
</> </>
); );
} }
// Fix the error 'React does not recognize the "someProp" prop on a DOM element'. Link ref: https://github.com/orgs/styled-components/discussions/4136
// This implements the default behavior from styled-components v5
function shouldForwardProp(propName: string, target: unknown) {
if (typeof target === 'string') {
// For HTML elements, forward the prop if it is a valid HTML attribute
return isPropValid(propName);
}
// For other elements, forward all props
return true;
}
export default App; export default App;
hotel-management/src/ui/ButtonIcon.tsx → hotel-management/src/commons/styles/ButtonIcon.ts
+1 -1
View File
@@ -5,7 +5,7 @@ const ButtonIcon = styled.button`
border: none; border: none;
padding: 8px; padding: 8px;
transition: all 0.2s; transition: all 0.2s;
border-radius: var(--radius-sm); border-radius: var(--radius-md);
&:hover { &:hover {
background-color: var(--hover-background-color); background-color: var(--hover-background-color);
hotel-management/src/ui/AppLayout.tsx → hotel-management/src/components/AppLayout.tsx
+2
View File
@@ -14,6 +14,8 @@ const StyledAppLayout = styled.div`
const Main = styled.main` const Main = styled.main`
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
overflow: scroll;
`; `;
const AppLayout = () => { const AppLayout = () => {
hotel-management/src/ui/Header.tsx → hotel-management/src/components/Header.tsx
View File
hotel-management/src/ui/HeaderMenu.tsx → hotel-management/src/components/HeaderMenu.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import styled from 'styled-components'; import styled from 'styled-components';
import { IoPersonCircleOutline } from 'react-icons/io5';
import { HiOutlineLogout } from 'react-icons/hi';
// Components // Components
import ButtonIcon from './ButtonIcon'; import { IoPersonCircleOutline } from 'react-icons/io5';
import { HiOutlineLogout } from 'react-icons/hi';
import ButtonIcon from '../commons/styles/ButtonIcon';
const StyledHeaderMenu = styled.ul` const StyledHeaderMenu = styled.ul`
display: flex; display: flex;
hotel-management/src/ui/Nav.tsx → hotel-management/src/components/Nav.tsx
+3 -1
View File
@@ -1,5 +1,7 @@
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
// Components
import { MdSpaceDashboard } from 'react-icons/md'; import { MdSpaceDashboard } from 'react-icons/md';
import { HiUsers } from 'react-icons/hi2'; import { HiUsers } from 'react-icons/hi2';
import { BsHouseDoorFill } from 'react-icons/bs'; import { BsHouseDoorFill } from 'react-icons/bs';
@@ -16,7 +18,7 @@ const StyledNavLink = styled(NavLink)`
align-items: center; align-items: center;
gap: 20px; gap: 20px;
padding: 15px; padding: 15px;
border-radius: var(--radius-sm); border-radius: var(--radius-md);
transition: all 0.3s; transition: all 0.3s;
& svg { & svg {
hotel-management/src/ui/Sidebar.tsx → hotel-management/src/components/Sidebar.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const StyledSidebar = styled.aside`
`; `;
const Heading = styled.h1` const Heading = styled.h1`
font-size: 30px; font-size: var(--fs-md);
text-transform: uppercase; text-transform: uppercase;
text-align: center; text-align: center;
color: var(--primary-color); color: var(--primary-color);
hotel-management/src/styles/abstracts/variables.css
+12 -1
View File
@@ -1,7 +1,18 @@
:root { :root {
--primary-color: #0010ba; --primary-color: #0010ba;
--header-table-color: #ebebeb;
--border-color: #8c8c8c; --border-color: #8c8c8c;
--radius-sm: 10px;
--hover-background-color: #f3f4f6; --hover-background-color: #f3f4f6;
--light-text: #fff; --light-text: #fff;
--dark-text: #787878;
--radius-sm: 5px;
--radius-md: 10px;
--shadow-sm: 0px 10px 20px rgba(0, 0, 0, 0.2);
--fs-md: 30px;
--fs-lg: 40px;
--fs-sm: 18px;
--fs-sm-x: 16px;
} }
hotel-management/vercel.json
+6
View File
@@ -0,0 +1,6 @@
{
"routes": [
{ "handle": "filesystem" },
{ "src": "/.*", "dest": "/index.html" }
]
}