ref: #187 update 14 form validation

Author: lokeeto

hooks/14_FormValidation/package.json

@@ -15,32 +15,35 @@
   "author": "Braulio Diez Botella",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.1",
-    "@types/react-router-dom": "^4.3.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@types/node": "^14.0.24",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "@material-ui/core": "^4.0.1",
-    "@material-ui/icons": "^4.0.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "lc-form-validation": "^2.0.0",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2",
-    "react-router-dom": "^4.3.1"
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-router-dom": "^5.2.0"
   }
 }

hooks/14_FormValidation/src/pages/loginPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { withRouter, RouteComponentProps } from "react-router-dom";
+import { useHistory } from "react-router-dom";
 import makeStyles from "@material-ui/styles/makeStyles";
 import createStyles from "@material-ui/styles/createStyles";
 import Card from "@material-ui/core/Card";
@@ -29,9 +29,9 @@ const useStyles = makeStyles(theme =>
   })
 );
 
-interface Props extends RouteComponentProps {}
+interface Props {}
 
-const LoginPageInner = (props: Props) => {
+export const LoginPage = (props: Props) => {
   const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
     createEmptyLogin()
   );
@@ -40,12 +40,13 @@ const LoginPageInner = (props: Props) => {
   );
   const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
   const classes = useStyles();
+  const history = useHistory();
 
   const onLogin = () => {
     loginFormValidation.validateForm(loginInfo).then(formValidationResult => {
       if (formValidationResult.succeeded) {
         if (isValidLogin(loginInfo)) {
-          props.history.push("/pageB");
+          history.push("/pageB");
         } else {
           setShowLoginFailedMsg(true);
         }
@@ -98,8 +99,6 @@ const LoginPageInner = (props: Props) => {
   );
 };
 
-export const LoginPage = withRouter<Props>(LoginPageInner);
-
 interface PropsForm {
   onLogin: () => void;
   onUpdateField: (string, any) => void;

hooks/14_FormValidation/webpack.config.js

@@ -1,27 +1,27 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var webpack = require("webpack");
-var path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const path = require("path");
 
-var basePath = __dirname;
+const basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx"]
+    extensions: [".js", ".ts", ".tsx"],
   },
   entry: ["@babel/polyfill", "./index.tsx"],
   output: {
     path: path.join(basePath, "dist"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   devtool: "source-map",
   devServer: {
     contentBase: "./dist", // Content base
     inline: true, // Enable watch and live reload
     host: "localhost",
     port: 8080,
-    stats: "errors-only"
+    stats: "errors-only",
   },
   module: {
     rules: [
@@ -31,32 +31,33 @@ module.exports = {
         loader: "awesome-typescript-loader",
         options: {
           useBabel: true,
-          babelCore: "@babel/core" // needed for Babel v7
-        }
+          babelCore: "@babel/core", // needed for Babel v7
+        },
       },
       {
         test: /\.css$/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
-          name: "assets/img/[name].[ext]?[hash]"
-        }
-      }
-    ]
+          name: "assets/img/[name].[ext]?[hash]",
+          esModule: false,
+        },
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
+      hash: true,
     }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      chunkFilename: "[id].css",
+    }),
+  ],
 };