Skip to content

Commit 57d15cf

Browse files
lokeetolokeeto
committed
ref: #187 update 12, 13 refactor routes
1 parent bde0b83 commit 57d15cf

6 files changed

Lines changed: 98 additions & 89 deletions

File tree

‎hooks/12_ReactRouter/.babelrc‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
{
66
"useBuiltIns": "entry"
77
}
8-
]
8+
],
9+
"@babel/preset-typescript",
10+
"@babel/preset-react"
911
]
1012
}

‎hooks/12_ReactRouter/package.json‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,32 @@
1515
"author": "Braulio Diez Botella",
1616
"license": "MIT",
1717
"devDependencies": {
18-
"@babel/cli": "^7.2.3",
19-
"@babel/core": "^7.2.2",
20-
"@babel/polyfill": "^7.2.5",
21-
"@babel/preset-env": "^7.3.1",
22-
"@types/react": "^16.8.3",
23-
"@types/react-dom": "^16.8.1",
24-
"@types/react-router-dom": "^4.3.1",
18+
"@babel/cli": "^7.10.5",
19+
"@babel/core": "^7.10.5",
20+
"@babel/polyfill": "^7.10.4",
21+
"@babel/preset-env": "^7.10.4",
22+
"@babel/preset-react": "^7.10.4",
23+
"@babel/preset-typescript": "^7.10.4",
24+
"@types/node": "^14.0.24",
25+
"@types/react": "^16.9.43",
26+
"@types/react-dom": "^16.9.8",
27+
"@types/react-router-dom": "^5.1.5",
2528
"awesome-typescript-loader": "^5.2.1",
26-
"babel-loader": "^8.0.5",
27-
"css-loader": "^2.1.0",
28-
"file-loader": "^3.0.1",
29-
"html-webpack-plugin": "^3.2.0",
30-
"mini-css-extract-plugin": "^0.5.0",
31-
"style-loader": "^0.23.1",
32-
"typescript": "^3.3.3",
33-
"url-loader": "^1.1.2",
34-
"webpack": "^4.29.3",
35-
"webpack-cli": "^3.2.3",
36-
"webpack-dev-server": "^3.1.14"
29+
"babel-loader": "^8.1.0",
30+
"css-loader": "^3.6.0",
31+
"file-loader": "^6.0.0",
32+
"html-webpack-plugin": "^4.3.0",
33+
"mini-css-extract-plugin": "^0.9.0",
34+
"style-loader": "^1.2.1",
35+
"typescript": "^3.9.7",
36+
"url-loader": "^4.1.0",
37+
"webpack": "^4.43.0",
38+
"webpack-cli": "^3.3.12",
39+
"webpack-dev-server": "^3.11.0"
3740
},
3841
"dependencies": {
39-
"react": "^16.8.2",
40-
"react-dom": "^16.8.2",
41-
"react-router-dom": "^4.3.1"
42+
"react": "^16.13.1",
43+
"react-dom": "^16.13.1",
44+
"react-router-dom": "^5.2.0"
4245
}
4346
}

‎hooks/12_ReactRouter/webpack.config.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
var HtmlWebpackPlugin = require("html-webpack-plugin");
2-
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
3-
var webpack = require("webpack");
4-
var path = require("path");
1+
const HtmlWebpackPlugin = require("html-webpack-plugin");
2+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
const webpack = require("webpack");
4+
const path = require("path");
55

6-
var basePath = __dirname;
6+
const basePath = __dirname;
77

88
module.exports = {
99
context: path.join(basePath, "src"),
1010
resolve: {
11-
extensions: [".js", ".ts", ".tsx"]
11+
extensions: [".js", ".ts", ".tsx"],
1212
},
1313
entry: ["@babel/polyfill", "./index.tsx"],
1414
output: {
1515
path: path.join(basePath, "dist"),
16-
filename: "bundle.js"
16+
filename: "bundle.js",
1717
},
1818
devtool: "source-map",
1919
devServer: {
2020
contentBase: "./dist", // Content base
2121
inline: true, // Enable watch and live reload
2222
host: "localhost",
2323
port: 8080,
24-
stats: "errors-only"
24+
stats: "errors-only",
2525
},
2626
module: {
2727
rules: [
@@ -31,32 +31,33 @@ module.exports = {
3131
loader: "awesome-typescript-loader",
3232
options: {
3333
useBabel: true,
34-
babelCore: "@babel/core" // needed for Babel v7
35-
}
34+
babelCore: "@babel/core", // needed for Babel v7
35+
},
3636
},
3737
{
3838
test: /\.css$/,
39-
use: [MiniCssExtractPlugin.loader, "css-loader"]
39+
use: [MiniCssExtractPlugin.loader, "css-loader"],
4040
},
4141
{
4242
test: /\.(png|jpg|gif|svg)$/,
4343
loader: "file-loader",
4444
options: {
45-
name: "assets/img/[name].[ext]?[hash]"
46-
}
47-
}
48-
]
45+
name: "assets/img/[name].[ext]?[hash]",
46+
esModule: false,
47+
},
48+
},
49+
],
4950
},
5051
plugins: [
5152
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
5253
new HtmlWebpackPlugin({
5354
filename: "index.html", //Name of file in ./dist/
5455
template: "index.html", //Name of template in ./src
55-
hash: true
56+
hash: true,
5657
}),
5758
new MiniCssExtractPlugin({
5859
filename: "[name].css",
59-
chunkFilename: "[id].css"
60-
})
61-
]
60+
chunkFilename: "[id].css",
61+
}),
62+
],
6263
};

‎hooks/13_LoginForm/package.json‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,34 @@
1515
"author": "Braulio Diez Botella",
1616
"license": "MIT",
1717
"devDependencies": {
18-
"@babel/cli": "^7.2.3",
19-
"@babel/core": "^7.2.2",
20-
"@babel/polyfill": "^7.2.5",
21-
"@babel/preset-env": "^7.3.1",
22-
"@types/react": "^16.8.3",
23-
"@types/react-dom": "^16.8.1",
24-
"@types/react-router-dom": "^4.3.1",
18+
"@babel/cli": "^7.10.5",
19+
"@babel/core": "^7.10.5",
20+
"@babel/polyfill": "^7.10.4",
21+
"@babel/preset-env": "^7.10.4",
22+
"@babel/preset-react": "^7.10.4",
23+
"@babel/preset-typescript": "^7.10.4",
24+
"@types/node": "^14.0.24",
25+
"@types/react": "^16.9.43",
26+
"@types/react-dom": "^16.9.8",
27+
"@types/react-router-dom": "^5.1.5",
2528
"awesome-typescript-loader": "^5.2.1",
26-
"babel-loader": "^8.0.5",
27-
"css-loader": "^2.1.0",
28-
"file-loader": "^3.0.1",
29-
"html-webpack-plugin": "^3.2.0",
30-
"mini-css-extract-plugin": "^0.5.0",
31-
"style-loader": "^0.23.1",
32-
"typescript": "^3.3.3",
33-
"url-loader": "^1.1.2",
34-
"webpack": "^4.29.3",
35-
"webpack-cli": "^3.2.3",
36-
"webpack-dev-server": "^3.1.14"
29+
"babel-loader": "^8.1.0",
30+
"css-loader": "^3.6.0",
31+
"file-loader": "^6.0.0",
32+
"html-webpack-plugin": "^4.3.0",
33+
"mini-css-extract-plugin": "^0.9.0",
34+
"style-loader": "^1.2.1",
35+
"typescript": "^3.9.7",
36+
"url-loader": "^4.1.0",
37+
"webpack": "^4.43.0",
38+
"webpack-cli": "^3.3.12",
39+
"webpack-dev-server": "^3.11.0"
3740
},
3841
"dependencies": {
39-
"@material-ui/core": "^4.0.1",
40-
"@material-ui/icons": "^4.0.1",
41-
"react": "^16.8.2",
42-
"react-dom": "^16.8.2",
43-
"react-router-dom": "^4.3.1"
42+
"@material-ui/core": "^4.11.0",
43+
"@material-ui/icons": "^4.9.1",
44+
"react": "^16.13.1",
45+
"react-dom": "^16.13.1",
46+
"react-router-dom": "^5.2.0"
4447
}
4548
}

‎hooks/13_LoginForm/src/pages/loginPage.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { withRouter, RouteComponentProps } from "react-router-dom";
2+
import { useHistory } from "react-router-dom";
33
import makeStyles from "@material-ui/styles/makeStyles";
44
import createStyles from "@material-ui/styles/createStyles";
55
import Card from "@material-ui/core/Card";
@@ -21,18 +21,19 @@ const useStyles = makeStyles(theme =>
2121
})
2222
);
2323

24-
interface Props extends RouteComponentProps {}
24+
interface Props {};
2525

26-
const LoginPageInner = (props: Props) => {
26+
export const LoginPage = (props: Props) => {
2727
const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
2828
createEmptyLogin()
2929
);
30+
const history = useHistory();
3031
const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
3132
const classes = useStyles();
3233

3334
const onLogin = () => {
3435
if (isValidLogin(loginInfo)) {
35-
props.history.push("/pageB");
36+
history.push("/pageB");
3637
} else {
3738
setShowLoginFailedMsg(true);
3839
}
@@ -66,8 +67,6 @@ const LoginPageInner = (props: Props) => {
6667
);
6768
};
6869

69-
export const LoginPage = withRouter<Props>(LoginPageInner);
70-
7170
interface PropsForm {
7271
onLogin: () => void;
7372
onUpdateField: (name: string, value: any) => void;

‎hooks/13_LoginForm/webpack.config.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
1-
var HtmlWebpackPlugin = require("html-webpack-plugin");
2-
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
3-
var webpack = require("webpack");
4-
var path = require("path");
1+
const HtmlWebpackPlugin = require("html-webpack-plugin");
2+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
const webpack = require("webpack");
4+
const path = require("path");
55

6-
var basePath = __dirname;
6+
const basePath = __dirname;
77

88
module.exports = {
99
context: path.join(basePath, "src"),
1010
resolve: {
11-
extensions: [".js", ".ts", ".tsx"]
11+
extensions: [".js", ".ts", ".tsx"],
1212
},
1313
entry: ["@babel/polyfill", "./index.tsx"],
1414
output: {
1515
path: path.join(basePath, "dist"),
16-
filename: "bundle.js"
16+
filename: "bundle.js",
1717
},
1818
devtool: "source-map",
1919
devServer: {
2020
contentBase: "./dist", // Content base
2121
inline: true, // Enable watch and live reload
2222
host: "localhost",
2323
port: 8080,
24-
stats: "errors-only"
24+
stats: "errors-only",
2525
},
2626
module: {
2727
rules: [
@@ -31,32 +31,33 @@ module.exports = {
3131
loader: "awesome-typescript-loader",
3232
options: {
3333
useBabel: true,
34-
babelCore: "@babel/core" // needed for Babel v7
35-
}
34+
babelCore: "@babel/core", // needed for Babel v7
35+
},
3636
},
3737
{
3838
test: /\.css$/,
39-
use: [MiniCssExtractPlugin.loader, "css-loader"]
39+
use: [MiniCssExtractPlugin.loader, "css-loader"],
4040
},
4141
{
4242
test: /\.(png|jpg|gif|svg)$/,
4343
loader: "file-loader",
4444
options: {
45-
name: "assets/img/[name].[ext]?[hash]"
46-
}
47-
}
48-
]
45+
name: "assets/img/[name].[ext]?[hash]",
46+
esModule: false,
47+
},
48+
},
49+
],
4950
},
5051
plugins: [
5152
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
5253
new HtmlWebpackPlugin({
5354
filename: "index.html", //Name of file in ./dist/
5455
template: "index.html", //Name of template in ./src
55-
hash: true
56+
hash: true,
5657
}),
5758
new MiniCssExtractPlugin({
5859
filename: "[name].css",
59-
chunkFilename: "[id].css"
60-
})
61-
]
60+
chunkFilename: "[id].css",
61+
}),
62+
],
6263
};

0 commit comments

Comments
 (0)