Skip to content

Commit 2372f71

Browse files
author
Du Thanh Duoc
committed
Update package and eslint
1 parent 9c50560 commit 2372f71

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+4314
-3680
lines changed

‎.eslintrc

-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
{
2-
"env": {
3-
"browser": true,
4-
"es6": true
5-
},
62
"extends": ["react-app", "prettier"],
73
"plugins": ["react", "prettier"],
8-
"parserOptions": {
9-
"ecmaVersion": 2018
10-
},
114
"rules": {
125
"prettier/prettier": [
136
"warn",
@@ -16,7 +9,6 @@
169
"semi": false,
1710
"trailingComma": "none",
1811
"endOfLine": "lf",
19-
"singleQuote": true,
2012
"tabWidth": 2,
2113
"printWidth": 80,
2214
"useTabs": false

‎.prettierrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "avoid",
3+
"semi": false,
4+
"trailingComma": "none",
5+
"endOfLine": "lf",
6+
"tabWidth": 2,
7+
"printWidth": 80,
8+
"useTabs": false
9+
}

‎.vscode/settings.json

-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,6 @@
11
{
22
"editor.defaultFormatter": "esbenp.prettier-vscode",
3-
"[javascript]": {
4-
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
5-
},
6-
"[javascriptreact]": {
7-
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
8-
},
9-
"[typescript]": {
10-
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
11-
},
12-
"[typescriptreact]": {
13-
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
14-
},
153
"editor.formatOnSave": true,
16-
"eslint.format.enable": true,
174
"editor.codeActionsOnSave": {
185
"source.fixAll.eslint": true
196
}

‎package.json

+30-25
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,45 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@testing-library/jest-dom": "^4.2.4",
7-
"@testing-library/react": "^9.3.2",
8-
"@testing-library/user-event": "^7.1.2",
9-
"@types/jest": "^24.0.0",
10-
"@types/node": "^12.0.0",
11-
"@types/react": "^16.9.0",
12-
"@types/react-dom": "^16.9.0",
13-
"@types/react-redux": "^7.1.9",
14-
"@types/react-router-dom": "^5.1.5",
15-
"@types/redux": "^3.6.0",
16-
"@types/redux-thunk": "^2.1.0",
17-
"@types/styled-components": "^5.1.3",
186
"bootstrap": "5.0.0-alpha1",
19-
"eslint-config-prettier": "^6.11.0",
20-
"eslint-plugin-prettier": "^3.1.4",
21-
"immer": "^7.0.8",
22-
"node-sass": "^4.14.1",
23-
"prettier": "^2.1.1",
24-
"react": "^16.13.1",
25-
"react-dom": "^16.13.1",
26-
"react-redux": "^7.2.1",
7+
"immer": "^7.0.14",
8+
"react": "^17.0.1",
9+
"react-dom": "^17.0.1",
10+
"react-redux": "^7.2.2",
2711
"react-router-dom": "^5.2.0",
28-
"react-scripts": "3.4.3",
12+
"react-scripts": "4.0.0",
2913
"redux": "^4.0.5",
30-
"styled-components": "^5.2.0",
31-
"typescript": "~3.7.2"
14+
"redux-thunk": "^2.3.0",
15+
"styled-components": "^5.2.1",
16+
"typescript": "~4.0.5"
17+
},
18+
"devDependencies": {
19+
"@testing-library/jest-dom": "^5.11.5",
20+
"@testing-library/react": "^11.1.1",
21+
"@testing-library/user-event": "^12.2.0",
22+
"@types/jest": "^26.0.15",
23+
"@types/node": "^14.14.7",
24+
"@types/react": "^16.9.56",
25+
"@types/react-dom": "^16.9.9",
26+
"@types/react-redux": "^7.1.11",
27+
"@types/react-router-dom": "^5.1.6",
28+
"@types/redux": "^3.6.31",
29+
"@types/redux-thunk": "^2.1.32",
30+
"@types/styled-components": "^5.1.4",
31+
"eslint-config-prettier": "^6.15.0",
32+
"eslint-plugin-prettier": "^3.1.4",
33+
"node-sass": "^4.14.1",
34+
"prettier": "^2.1.2"
3235
},
3336
"scripts": {
3437
"start": "react-scripts start",
3538
"build": "react-scripts build",
3639
"test": "react-scripts test",
3740
"eject": "react-scripts eject",
38-
"lint": "eslint --ext js,jsx,.ts,.tsx .",
39-
"lint:fix": "eslint --fix --ext js,jsx,.ts,.tsx ."
41+
"lint": "eslint --ext js,jsx,ts,tsx src/",
42+
"lint:fix": "eslint --fix --ext js,jsx,ts,tsx src/",
43+
"prettier": "prettier --check \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\"",
44+
"prettier:fix": "prettier --write \"src/**/(*.tsx|*.ts|*.jsx|*.js|*.scss|*.css)\""
4045
},
4146
"eslintConfig": {
4247
"extends": "react-app"

‎src/@types/reducer.d.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import rootReducer from 'src/reducer/reducer'
1+
import rootReducer from "src/reducer/reducer"
22

33
declare global {
44
type AppState = ReturnType<typeof rootReducer>

‎src/App/App.actions.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import * as types from './App.constants'
1+
import * as types from "./App.constants"
22

33
export const logout = () => ({
44
type: types.LOGOUT

‎src/App/App.constants.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export const LOGOUT = 'app/LOGOUT'
2-
export const CLOSE_SIDE_NAV = 'app/CLOSE_SIDE_NAV'
1+
export const LOGOUT = "app/LOGOUT"
2+
export const CLOSE_SIDE_NAV = "app/CLOSE_SIDE_NAV"

‎src/App/App.reducer.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import * as types from './App.constants'
2-
import { LOGIN_SUCCESS } from 'src/pages/Login/Login.constants'
3-
import produce from 'immer'
1+
import * as types from "./App.constants"
2+
import { LOGIN_SUCCESS } from "src/pages/Login/Login.constants"
3+
import produce from "immer"
44

55
const initialState = {
66
isAuthenticated: false,
@@ -11,7 +11,7 @@ export const AppReducer = (state = initialState, action) =>
1111
produce(state, draft => {
1212
switch (action.type) {
1313
case types.LOGOUT:
14-
localStorage.removeItem('token')
14+
localStorage.removeItem("token")
1515
draft.isAuthenticated = false
1616
break
1717
case LOGIN_SUCCESS:

‎src/App/App.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from 'react'
2-
import Routes from 'src/routes/routes'
1+
import React from "react"
2+
import Routes from "src/routes/routes"
33

44
function App() {
55
return <Routes />

‎src/apis/product.api.ts

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
11
const mockProducts = [
22
{
3-
id: '1',
4-
name: 'Iphone',
3+
id: "1",
4+
name: "Iphone",
55
quantity: 100,
66
price: 27000000
77
},
88
{
9-
id: '2',
10-
name: 'Samsung',
9+
id: "2",
10+
name: "Samsung",
1111
quantity: 28,
1212
price: 22000000
1313
},
1414
{
15-
id: '3',
16-
name: 'Nokia',
15+
id: "3",
16+
name: "Nokia",
1717
quantity: 10,
1818
price: 15000000
1919
},
2020
{
21-
id: '4',
22-
name: 'Sony',
21+
id: "4",
22+
name: "Sony",
2323
quantity: 44,
2424
price: 25000000
2525
}
@@ -32,7 +32,7 @@ export const getProductListApi = (): Promise<ResGetProductApi> =>
3232
data: {
3333
products: mockProducts
3434
},
35-
message: 'Lấy sản phẩm thành công'
35+
message: "Lấy sản phẩm thành công"
3636
})
3737
}, 100)
3838
})
@@ -46,10 +46,10 @@ export const getProductItemApi = (id: string): Promise<ResGetProductItemApi> =>
4646
data: {
4747
product
4848
},
49-
message: 'Lấy sản phẩm thành công'
49+
message: "Lấy sản phẩm thành công"
5050
})
5151
} else {
52-
reject(new Error('Không tìm thấy sản phẩm'))
52+
reject(new Error("Không tìm thấy sản phẩm"))
5353
}
5454
}, 100)
5555
})

‎src/apis/user.api.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ export const loginApi = ({
44
}: ReqLogin): Promise<ResLoginApi> =>
55
new Promise((resolve, reject) => {
66
setTimeout(() => {
7-
if (username === 'admin' && password === '123') {
7+
if (username === "admin" && password === "123") {
88
resolve({
99
data: {
10-
access_token: '82jdu82193yh90sad83hxfgsd'
10+
access_token: "82jdu82193yh90sad83hxfgsd"
1111
},
12-
message: 'Login thành công'
12+
message: "Login thành công"
1313
})
1414
} else {
15-
reject(new Error('Login thất bại'))
15+
reject(new Error("Login thất bại"))
1616
}
1717
}, 100)
1818
})

‎src/components/Header/Header.styles.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
import styled from 'styled-components'
1+
import styled from "styled-components"
22

33
export const LogoutIcon = styled.span``

‎src/components/Header/Header.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { useEffect } from 'react'
2-
import { connect } from 'react-redux'
3-
import { logout, toggleSideNav } from 'src/App/App.actions'
4-
import { useHistory } from 'react-router-dom'
5-
import { LogoutIcon } from './Header.styles'
6-
import { PATH } from 'src/constants/paths'
1+
import React, { useEffect } from "react"
2+
import { connect } from "react-redux"
3+
import { logout, toggleSideNav } from "src/App/App.actions"
4+
import { useHistory } from "react-router-dom"
5+
import { LogoutIcon } from "./Header.styles"
6+
import { PATH } from "src/constants/paths"
77

88
interface ReduxProps {
99
logout(): { type: string }
@@ -34,19 +34,19 @@ const Header = (props: Props) => {
3434
<path
3535
d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
3636
data-original="#000000"
37-
style={{ fill: '#FFFFFF' }}
37+
style={{ fill: "#FFFFFF" }}
3838
data-old_color="#000000"
3939
/>
4040
<path
4141
d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
4242
data-original="#000000"
43-
style={{ fill: '#FFFFFF' }}
43+
style={{ fill: "#FFFFFF" }}
4444
data-old_color="#000000"
4545
/>
4646
<path
4747
d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"
4848
data-original="#000000"
49-
style={{ fill: '#FFFFFF' }}
49+
style={{ fill: "#FFFFFF" }}
5050
data-old_color="#000000"
5151
/>
5252
</g>

‎src/components/SideNav/SideNav.styles.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import styled from 'styled-components'
2-
import { BREAKPOINT, COLOR } from 'src/constants/styles'
1+
import styled from "styled-components"
2+
import { BREAKPOINT, COLOR } from "src/constants/styles"
33

44
export const Footer = styled.div`
55
padding: 0 30px;

‎src/components/SideNav/SideNav.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import React from 'react'
2-
import { NavLink } from 'react-router-dom'
3-
import { Footer, Logo, Menu, Nav } from './SideNav.styles'
4-
import { PATH } from 'src/constants/paths'
5-
import home from 'src/assets/images/home.svg'
6-
import list from 'src/assets/images/list.svg'
7-
import { connect } from 'react-redux'
1+
import React from "react"
2+
import { NavLink } from "react-router-dom"
3+
import { Footer, Logo, Menu, Nav } from "./SideNav.styles"
4+
import { PATH } from "src/constants/paths"
5+
import home from "src/assets/images/home.svg"
6+
import list from "src/assets/images/list.svg"
7+
import { connect } from "react-redux"
88

99
interface ReduxProps {
1010
closeSideNav: boolean
@@ -14,7 +14,7 @@ interface Props extends ReduxProps {}
1414
function SideNav(props: Props) {
1515
const { closeSideNav } = props
1616
return (
17-
<Nav className={closeSideNav ? 'close' : ''}>
17+
<Nav className={closeSideNav ? "close" : ""}>
1818
<h1>
1919
<Logo
2020
href="https://xdevclass.com/"

‎src/constants/paths.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const PATH = {
2-
HOME: '/',
3-
PRODUCT: '/product',
4-
LOGIN: '/login'
2+
HOME: "/",
3+
PRODUCT: "/product",
4+
LOGIN: "/login"
55
}

‎src/constants/styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@ export const BREAKPOINT = {
77
}
88

99
export const COLOR = {
10-
BLUE: '#0d6efd'
10+
BLUE: "#0d6efd"
1111
}

‎src/guards/AuthenticatedGuard.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react'
1+
import React from "react"
22
import {
33
Route,
44
RouteProps,
55
Redirect,
66
RouteComponentProps
7-
} from 'react-router-dom'
8-
import { connect } from 'react-redux'
7+
} from "react-router-dom"
8+
import { connect } from "react-redux"
99

1010
interface ReduxProps {
1111
isAuthenticated: boolean
@@ -20,7 +20,7 @@ function AuthenticatedGuard(props: Props) {
2020
<Route
2121
{...rest}
2222
render={props => {
23-
if (!isAuthenticated && !localStorage.getItem('token')) {
23+
if (!isAuthenticated && !localStorage.getItem("token")) {
2424
return <Redirect to="/login" />
2525
}
2626
return <Component {...props} />

‎src/helpers/string.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
export const handlePrice = (value: string | number) =>
2-
Number(value).toLocaleString('en') + ' đ'
2+
Number(value).toLocaleString("en") + " đ"

‎src/hooks/usePrevious.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useEffect } from 'react'
1+
import { useRef, useEffect } from "react"
22

33
export function usePrevious(value) {
44
const ref = useRef()

‎src/index.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import './index.scss'
4-
import App from './App/App'
5-
import * as serviceWorker from './serviceWorker'
6-
import { Provider } from 'react-redux'
7-
import { store } from './store/store'
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import "./index.scss"
4+
import App from "./App/App"
5+
import * as serviceWorker from "./serviceWorker"
6+
import { Provider } from "react-redux"
7+
import { store } from "./store/store"
88

99
ReactDOM.render(
1010
<React.StrictMode>
1111
<Provider store={store}>
1212
<App />
1313
</Provider>
1414
</React.StrictMode>,
15-
document.getElementById('root')
15+
document.getElementById("root")
1616
)
1717

1818
// If you want your app to work offline and load faster, you can change

0 commit comments

Comments
 (0)