Adding material-ui hooks to 14_FormValidation example

Author: Víctor Borrego Pérez

hooks/14_FormValidation/package.json

@@ -29,15 +29,15 @@
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
+    "typescript": "3.3.3",
     "url-loader": "^1.1.2",
     "webpack": "^4.29.3",
     "webpack-cli": "^3.2.3",
     "webpack-dev-server": "^3.1.14"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@material-ui/icons": "^3.0.2",
+    "@material-ui/core": "^4.0.1",
+    "@material-ui/icons": "^4.0.1",
     "lc-form-validation": "^2.0.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",

hooks/14_FormValidation/src/common/notification.tsx

@@ -1,25 +1,27 @@
 import * as React from "react";
-import Button from "@material-ui/core/Button";
 import Snackbar from "@material-ui/core/Snackbar";
 import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
-import { withStyles } from "@material-ui/core";
+import createStyles from "@material-ui/core/styles/createStyles";
+import makeStyles from "@material-ui/core/styles/makeStyles";
 
 interface Props {
-  classes?: any;
   message: string;
   show: boolean;
   onClose: () => void;
 }
 
-const styles = theme => ({
-  close: {
-    padding: theme.spacing.unit / 2
-  }
-});
+const useStyles = makeStyles(theme =>
+  createStyles({
+    close: {
+      padding: theme.spacing(0.5)
+    }
+  })
+);
 
-const NotificationComponentInner = (props: Props) => {
-  const { classes, message, show, onClose } = props;
+export const NotificationComponent = (props: Props) => {
+  const classes = useStyles();
+  const { message, show, onClose } = props;
 
   return (
     <Snackbar
@@ -48,7 +50,3 @@ const NotificationComponentInner = (props: Props) => {
     />
   );
 };
-
-export const NotificationComponent = withStyles(styles)(
-  NotificationComponentInner
-);

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

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
 import { withRouter, RouteComponentProps } from "react-router-dom";
-import { withStyles, createStyles, WithStyles } from "@material-ui/core/styles";
+import makeStyles from "@material-ui/styles/makeStyles";
+import createStyles from "@material-ui/styles/createStyles";
 import Card from "@material-ui/core/Card";
 import CardHeader from "@material-ui/core/CardHeader";
 import CardContent from "@material-ui/core/CardContent";
@@ -18,16 +19,17 @@ import {
 import { loginFormValidation } from "./loginPage.validation";
 import { TextFieldForm } from "../common";
 
-// https://material-ui.com/guides/typescript/
-const styles = theme =>
+// https://material-ui.com/styles/api/#makestyles-styles-options-hook
+const useStyles = makeStyles(theme =>
   createStyles({
     card: {
       maxWidth: 400,
       margin: "0 auto"
     }
-  });
+  })
+);
 
-interface Props extends RouteComponentProps, WithStyles<typeof styles> {}
+interface Props extends RouteComponentProps {}
 
 const LoginPageInner = (props: Props) => {
   const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
@@ -37,7 +39,7 @@ const LoginPageInner = (props: Props) => {
     createDefaultLoginFormErrors()
   );
   const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
-  const { classes } = props;
+  const classes = useStyles();
 
   const onLogin = () => {
     loginFormValidation.validateForm(loginInfo).then(formValidationResult => {
@@ -96,7 +98,7 @@ const LoginPageInner = (props: Props) => {
   );
 };
 
-export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
+export const LoginPage = withRouter<Props>(LoginPageInner);
 
 interface PropsForm {
   onLogin: () => void;
@@ -105,7 +107,19 @@ interface PropsForm {
   loginFormErrors: LoginFormErrors;
 }
 
+// https://material-ui.com/styles/api/#makestyles-styles-options-hook
+const useFormStyles = makeStyles(theme =>
+  createStyles({
+    formContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center"
+    }
+  })
+);
+
 const LoginForm = (props: PropsForm) => {
+  const classes = useFormStyles();
   const { onLogin, onUpdateField, loginInfo, loginFormErrors } = props;
 
   // TODO: Enhacement move this outside the stateless component discuss why is a good idea
@@ -114,13 +128,7 @@ const LoginForm = (props: PropsForm) => {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center"
-      }}
-    >
+    <div className={classes.formContainer}>
       <TextFieldForm
         label="Name"
         name="login"