Skip to content

Commit d70b9dd

Browse files
minhphuc010194minhphuc010194
committed
integrated typescript
1 parent e3a6ff5 commit d70b9dd

File tree

9 files changed

+213
-67
lines changed

9 files changed

+213
-67
lines changed

‎.vscode/settings.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.exclude": {
3+
"**/.git": true,
4+
"**/.svn": true,
5+
"**/.hg": true,
6+
"**/CVS": true,
7+
"**/.DS_Store": true,
8+
"**/Thumbs.db": true,
9+
"**/node_modules": true
10+
}
11+
}

‎package.json

+8-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"web-vitals": "^3.0.0"
1818
},
1919
"scripts": {
20-
"start": "react-scripts start",
20+
"dev": "react-scripts start",
2121
"build": "react-scripts build",
2222
"test": "react-scripts test",
2323
"eject": "react-scripts eject"
@@ -39,5 +39,12 @@
3939
"last 1 firefox version",
4040
"last 1 safari version"
4141
]
42+
},
43+
"devDependencies": {
44+
"@types/jest": "^29.2.5",
45+
"@types/node": "^18.11.18",
46+
"@types/react": "^18.0.26",
47+
"@types/react-dom": "^18.0.10",
48+
"typescript": "^4.9.4"
4249
}
4350
}

‎src/components/MenuItems.jsx

+21-64
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { useState, useEffect, useRef } from "react";
2-
import { Link } from "react-router-dom";
3-
import { Box } from "@chakra-ui/react";
2+
import { Box, Link } from "@chakra-ui/react";
43
import Dropdown from "./Dropdown";
4+
import { RANGE } from "utils";
55

66
const MenuItems = ({ items, depthLevel }) => {
77
const [dropdown, setDropdown] = useState(false);
8-
9-
let ref = useRef();
8+
const ref = useRef();
109

1110
useEffect(() => {
1211
const handler = (event) => {
@@ -24,11 +23,11 @@ const MenuItems = ({ items, depthLevel }) => {
2423
}, [dropdown]);
2524

2625
const onMouseEnter = () => {
27-
window.innerWidth > 960 && setDropdown(true);
26+
window.innerWidth > RANGE && setDropdown(true);
2827
};
2928

3029
const onMouseLeave = () => {
31-
window.innerWidth > 960 && setDropdown(false);
30+
window.innerWidth > RANGE && setDropdown(false);
3231
};
3332

3433
const closeDropdown = () => {
@@ -43,61 +42,23 @@ const MenuItems = ({ items, depthLevel }) => {
4342
onMouseEnter={onMouseEnter}
4443
onMouseLeave={onMouseLeave}
4544
onClick={closeDropdown}
46-
px={2}
45+
px={13}
4746
>
4847
{items.url && items.submenu ? (
4948
<>
50-
<Box
51-
as="button"
52-
display="flex"
53-
alignItems="center"
54-
color="inherit"
55-
fontSize="inherit"
56-
border="none"
57-
backgroundColor="transparent"
58-
cursor="pointer"
59-
width="100%"
60-
onClick={() => setDropdown((prev) => !prev)}
61-
_hover={{
62-
bg: "#f2f2f2",
63-
}}
64-
65-
// aria-haspopup="menu"
66-
// aria-expanded={dropdown ? "true" : "false"}
67-
>
68-
{window.innerWidth < 960 && depthLevel === 0 ? (
49+
<Box _hover={{ bg: "gray.300" }}>
50+
{window.innerWidth < RANGE && depthLevel === 0 ? (
6951
items.title
7052
) : (
71-
<Link
72-
to={items.url}
73-
style={{
74-
display: "block",
75-
fontSize: "inherit",
76-
color: "inherit",
77-
textDecoration: "none",
78-
}}
79-
>
80-
{items.title}
81-
</Link>
53+
<Link to={items.url}>{items.title}</Link>
8254
)}
8355

8456
{depthLevel > 0 &&
85-
window.innerWidth < 960 ? null : depthLevel > 0 &&
86-
window.innerWidth > 960 ? (
57+
window.innerWidth < RANGE ? null : depthLevel > 0 &&
58+
window.innerWidth > RANGE ? (
8759
<span>&raquo;</span>
8860
) : (
89-
<Box
90-
as="span"
91-
_after={{
92-
content: `""`,
93-
display: "inline-block",
94-
marginLeft: "0.28em",
95-
verticalAlign: "0.09em",
96-
borderTop: "0.42em solid",
97-
borderRight: "0.32em solid transparent",
98-
borderLeft: "0.32em solid transparent",
99-
}}
100-
/>
61+
<Box />
10162
)}
10263
</Box>
10364
<Dropdown
@@ -109,21 +70,15 @@ const MenuItems = ({ items, depthLevel }) => {
10970
) : !items.url && items.submenu ? (
11071
<>
11172
<Box
112-
as="button"
113-
display="flex"
11473
alignItems="center"
115-
color="inherit"
116-
fontSize="inherit"
11774
border="none"
11875
backgroundColor="transparent"
11976
cursor="pointer"
12077
width="100%"
12178
_hover={{
122-
bg: "#f2f2f2",
79+
bg: "gray.300",
12380
}}
12481
onClick={() => setDropdown((prev) => !prev)}
125-
// aria-expanded={dropdown ? "true" : "false"}
126-
// aria-haspopup="menu"
12782
>
12883
{items.title}{" "}
12984
{depthLevel > 0 ? (
@@ -151,12 +106,14 @@ const MenuItems = ({ items, depthLevel }) => {
151106
</>
152107
) : (
153108
<Link
154-
to={items.url}
155-
style={{
156-
display: "block",
157-
fontSize: "inherit",
158-
color: "inherit",
159-
textDecoration: "none",
109+
href={items.url}
110+
display="block"
111+
fontSize="inherit"
112+
color="inherit"
113+
textDecoration="none"
114+
cursor="pointer"
115+
_hover={{
116+
bg: "gray.300",
160117
}}
161118
>
162119
{items.title}

‎src/index.js renamed to ‎src/index.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const colors = {
1414
},
1515
};
1616
const theme = extendTheme({ colors });
17-
const root = ReactDOM.createRoot(document.getElementById("root"));
17+
const root = ReactDOM.createRoot(
18+
document.getElementById("root") as HTMLAreaElement
19+
);
1820
root.render(
1921
<ChakraProvider theme={theme}>
2022
<BrowserRouter>

‎src/menuItems.js renamed to ‎src/menuItems.ts

File renamed without changes.

‎src/utils/constant.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const RANGE = 960;

‎src/utils/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./constant";

‎tsconfig.json

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES6",
4+
"lib": [
5+
"DOM",
6+
"ES6",
7+
"DOM.Iterable",
8+
"ScriptHost",
9+
"ES2016.Array.Include"
10+
],
11+
"baseUrl": "./src",
12+
"allowJs": true,
13+
"strictNullChecks": true,
14+
"skipLibCheck": true,
15+
"esModuleInterop": true,
16+
"allowSyntheticDefaultImports": true,
17+
"strict": true,
18+
"forceConsistentCasingInFileNames": true,
19+
"noFallthroughCasesInSwitch": true,
20+
"module": "esnext",
21+
"moduleResolution": "node",
22+
"resolveJsonModule": true,
23+
"isolatedModules": true,
24+
"noEmit": true,
25+
"noImplicitAny": false,
26+
"jsx": "react-jsx"
27+
},
28+
"typeRoots": ["./node_modules/@types", "./index.d.ts"],
29+
"include": ["src/**/*", "**/*.ts", "**/*.tsx"],
30+
"exclude": ["node_modules"]
31+
}

0 commit comments

Comments
 (0)