Adding material-ui hooks to 15_Context example

Author: Víctor Borrego Pérez

hooks/13_LoginForm/Readme.md

@@ -111,7 +111,13 @@ _./src/index.html_
 - Let's build a proper _login_ layout, _loginPage.tsx_. To build a nice layout, we will install _@material-ui/core_ and _@material-ui/icons_
 
 ```bash
-npm install @material-ui/core @material-ui/icons --save
+npm install @material-ui/core@^4.0.1 @material-ui/icons@^4.0.1 --save
+```
+
+- However, we must be careful with the compatibility of certain versions of _typescript_ with the new _hooks_ of _material-ui_. For this example, we can install _typescript@3.3.3_ version.
+
+```bash
+npm install typescript@3.3.3 --save
 ```
 
 - Now we could create a login form it could look something like:

hooks/15_Context/Readme.md

@@ -32,7 +32,7 @@ export const createDefaultUser = (): SessionContextProps => ({
 });
 
 export const SessionContext =
-  React.createContext < SessionContextProps >(createDefaultUser());
+  React.createContext < SessionContextProps > createDefaultUser();
 ```
 
 - This session context will expose a _provider_ (it will serve us to set the login name in the context), and a _consumer_ (that will let us consume the login name from the context at any point of the application).
@@ -140,7 +140,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 => {

hooks/15_Context/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/15_Context/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/15_Context/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, SessionContext } 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 loginContext = React.useContext(SessionContext);
@@ -39,7 +41,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 => {
@@ -99,7 +101,7 @@ const LoginPageInner = (props: Props) => {
   );
 };
 
-export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
+export const LoginPage = withRouter<Props>(LoginPageInner);
 
 interface PropsForm {
   onLogin: () => void;
@@ -108,7 +110,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
@@ -117,13 +131,7 @@ const LoginForm = (props: PropsForm) => {
   };
 
   return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "center"
-      }}
-    >
+    <div className={classes.formContainer}>
       <TextFieldForm
         label="Name"
         name="login"