Skip to content

Commit 23350d7

Browse files
author
Víctor Borrego Pérez
committed
Changes for use material-ui hooks
1 parent ac12dbf commit 23350d7

File tree

4 files changed

+56
-53
lines changed

4 files changed

+56
-53
lines changed

‎hooks/13_LoginForm/Readme.md‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -121,26 +121,28 @@ _./src/pages/loginPage.tsx_
121121
```javascript
122122
import * as React from "react";
123123
import { withRouter, RouteComponentProps } from "react-router-dom";
124-
import { withStyles, createStyles, WithStyles } from "@material-ui/core/styles";
124+
import makeStyles from "@material-ui/styles/makeStyles";
125+
import createStyles from "@material-ui/styles/createStyles";
125126
import Card from "@material-ui/core/Card";
126127
import CardHeader from "@material-ui/core/CardHeader";
127128
import CardContent from "@material-ui/core/CardContent";
128129
import TextField from "@material-ui/core/TextField";
129130
import Button from "@material-ui/core/Button";
130131

131-
// https://material-ui.com/guides/typescript/
132-
const styles = theme =>
132+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
133+
const useStyles = makeStyles(theme =>
133134
createStyles({
134135
card: {
135136
maxWidth: 400,
136137
margin: "0 auto"
137138
}
138-
});
139+
})
140+
);
139141

140142
interface Props extends RouteComponentProps, WithStyles<typeof styles> {}
141143

142144
const LoginPageInner = (props: Props) => {
143-
const { classes } = props;
145+
const classes = useStyles();
144146

145147
return (
146148
<Card className={classes.card}>
@@ -164,7 +166,7 @@ const LoginPageInner = (props: Props) => {
164166
);
165167
};
166168

167-
export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
169+
export const LoginPage = withRouter < Props > LoginPageInner;
168170
```
169171

170172
- This can be ok, but if we take a deeper look to this component, we could break down into two, one is the card itself the other the form dialog, so it should finally look like:
@@ -248,16 +250,17 @@ _./src/pages/login/loginPage.tsx_
248250
```diff
249251
// ...
250252

251-
// https://material-ui.com/guides/typescript/
252-
const styles = theme => createStyles({
253-
card: {
254-
maxWidth: 400,
255-
margin: '0 auto',
256-
},
257-
});
253+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
254+
const useStyles = makeStyles(theme =>
255+
createStyles({
256+
card: {
257+
maxWidth: 400,
258+
margin: "0 auto"
259+
}
260+
})
261+
);
258262

259-
interface Props extends RouteComponentProps, WithStyles<typeof styles> {
260-
}
263+
interface Props extends RouteComponentProps {}
261264

262265
const LoginPageInner = (props) => {
263266
const { classes } = props;
@@ -277,7 +280,7 @@ const LoginPageInner = (props) => {
277280
)
278281
}
279282

280-
export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
283+
export const LoginPage = withRouter<Props>(LoginPageInner);
281284
```
282285

283286
- Let's add the navigation on button clicked (later on we will check for user and pwd) _form.tsx_.
@@ -462,23 +465,26 @@ import * as React from "react";
462465
import Snackbar from "@material-ui/core/Snackbar";
463466
import IconButton from "@material-ui/core/IconButton";
464467
import CloseIcon from "@material-ui/icons/Close";
465-
import { withStyles } from "@material-ui/core";
468+
import createStyles from "@material-ui/core/styles/createStyles";
469+
import makeStyles from "@material-ui/core/styles/makeStyles";
466470

467471
interface Props {
468-
classes?: any;
469472
message: string;
470473
show: boolean;
471474
onClose: () => void;
472475
}
473476

474-
const styles = theme => ({
475-
close: {
476-
padding: theme.spacing.unit / 2
477-
}
478-
});
477+
const useStyles = makeStyles(theme =>
478+
createStyles({
479+
close: {
480+
padding: theme.spacing(0.5)
481+
}
482+
})
483+
);
479484

480-
const NotificationComponentInner = (props: Props) => {
481-
const { classes, message, show, onClose } = props;
485+
export const NotificationComponent = (props: Props) => {
486+
const { message, show, onClose } = props;
487+
const classes = useStyles();
482488

483489
return (
484490
<Snackbar
@@ -507,10 +513,6 @@ const NotificationComponentInner = (props: Props) => {
507513
/>
508514
);
509515
};
510-
511-
export const NotificationComponent = withStyles(styles)(
512-
NotificationComponentInner
513-
);
514516
```
515517

516518
- Let's expose this common component via an _index_ file.
@@ -535,7 +537,7 @@ const LoginPageInner = (props: Props) => {
535537
createEmptyLogin()
536538
);
537539
+ const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
538-
const { classes } = props;
540+
const classes = useStyles();
539541

540542
const onLogin = () => {
541543
if (isValidLogin(loginInfo)) {

‎hooks/13_LoginForm/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@
2929
"html-webpack-plugin": "^3.2.0",
3030
"mini-css-extract-plugin": "^0.5.0",
3131
"style-loader": "^0.23.1",
32-
"typescript": "^3.3.3",
32+
"typescript": "3.3.3",
3333
"url-loader": "^1.1.2",
3434
"webpack": "^4.29.3",
3535
"webpack-cli": "^3.2.3",
3636
"webpack-dev-server": "^3.1.14"
3737
},
3838
"dependencies": {
39-
"@material-ui/core": "^3.9.3",
40-
"@material-ui/icons": "^3.0.2",
39+
"@material-ui/core": "^4.0.1",
40+
"@material-ui/icons": "^4.0.1",
4141
"react": "^16.8.2",
4242
"react-dom": "^16.8.2",
4343
"react-router-dom": "^4.3.1"

‎hooks/13_LoginForm/src/common/notification.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,26 @@ import * as React from "react";
22
import Snackbar from "@material-ui/core/Snackbar";
33
import IconButton from "@material-ui/core/IconButton";
44
import CloseIcon from "@material-ui/icons/Close";
5-
import { withStyles } from "@material-ui/core";
5+
import createStyles from "@material-ui/core/styles/createStyles";
6+
import makeStyles from "@material-ui/core/styles/makeStyles";
67

78
interface Props {
8-
classes?: any;
99
message: string;
1010
show: boolean;
1111
onClose: () => void;
1212
}
1313

14-
const styles = theme => ({
15-
close: {
16-
padding: theme.spacing.unit / 2
17-
}
18-
});
14+
const useStyles = makeStyles(theme =>
15+
createStyles({
16+
close: {
17+
padding: theme.spacing(0.5)
18+
}
19+
})
20+
);
1921

20-
const NotificationComponentInner = (props: Props) => {
21-
const { classes, message, show, onClose } = props;
22+
export const NotificationComponent = (props: Props) => {
23+
const { message, show, onClose } = props;
24+
const classes = useStyles();
2225

2326
return (
2427
<Snackbar
@@ -47,7 +50,3 @@ const NotificationComponentInner = (props: Props) => {
4750
/>
4851
);
4952
};
50-
51-
export const NotificationComponent = withStyles(styles)(
52-
NotificationComponentInner
53-
);

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from "react";
22
import { withRouter, RouteComponentProps } from "react-router-dom";
3-
import { withStyles, createStyles, WithStyles } from "@material-ui/core/styles";
3+
import makeStyles from "@material-ui/styles/makeStyles";
4+
import createStyles from "@material-ui/styles/createStyles";
45
import Card from "@material-ui/core/Card";
56
import CardHeader from "@material-ui/core/CardHeader";
67
import CardContent from "@material-ui/core/CardContent";
@@ -10,23 +11,24 @@ import { LoginEntity, createEmptyLogin } from "../model/login";
1011
import { isValidLogin } from "../api/login";
1112
import { NotificationComponent } from "../common";
1213

13-
// https://material-ui.com/guides/typescript/
14-
const styles = theme =>
14+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
15+
const useStyles = makeStyles(theme =>
1516
createStyles({
1617
card: {
1718
maxWidth: 400,
1819
margin: "0 auto"
1920
}
20-
});
21+
})
22+
);
2123

22-
interface Props extends RouteComponentProps, WithStyles<typeof styles> {}
24+
interface Props extends RouteComponentProps {}
2325

2426
const LoginPageInner = (props: Props) => {
2527
const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
2628
createEmptyLogin()
2729
);
2830
const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
29-
const { classes } = props;
31+
const classes = useStyles();
3032

3133
const onLogin = () => {
3234
if (isValidLogin(loginInfo)) {
@@ -64,7 +66,7 @@ const LoginPageInner = (props: Props) => {
6466
);
6567
};
6668

67-
export const LoginPage = withStyles(styles)(withRouter<Props>(LoginPageInner));
69+
export const LoginPage = withRouter<Props>(LoginPageInner);
6870

6971
interface PropsForm {
7072
onLogin: () => void;

0 commit comments

Comments
 (0)