Skip to content

Commit d14cad3

Browse files
lokeetolokeeto
committed
ref:#187 13, 14, 15 making continue and improve the container
1 parent 87b2a98 commit d14cad3

6 files changed

Lines changed: 146 additions & 115 deletions

File tree

‎hooks/13_LoginForm/src/pages/login.component.tsx‎

Lines changed: 22 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,6 @@ import makeStyles from "@material-ui/styles/makeStyles";
33
import createStyles from "@material-ui/styles/createStyles";
44
import TextField from "@material-ui/core/TextField";
55
import Button from "@material-ui/core/Button";
6-
import Card from "@material-ui/core/Card";
7-
import CardHeader from "@material-ui/core/CardHeader";
8-
import CardContent from "@material-ui/core/CardContent";
96
import { LoginEntity, createEmptyLogin } from "../model/login";
107

118
interface PropsForm {
@@ -20,10 +17,6 @@ const useFormStyles = makeStyles((theme) =>
2017
flexDirection: "column",
2118
justifyContent: "center",
2219
},
23-
card: {
24-
maxWidth: 400,
25-
margin: "0 auto",
26-
},
2720
})
2821
);
2922

@@ -41,32 +34,27 @@ export const LoginComponent: React.FC<PropsForm> = (props) => {
4134
};
4235

4336
return (
44-
<Card className={classes.card}>
45-
<CardHeader title="Login" />
46-
<CardContent>
47-
<div className={classes.formContainer}>
48-
<TextField
49-
label="Name"
50-
margin="normal"
51-
value={loginInfo.login}
52-
onChange={onTexFieldChange("login")}
53-
/>
54-
<TextField
55-
label="Password"
56-
type="password"
57-
margin="normal"
58-
value={loginInfo.password}
59-
onChange={onTexFieldChange("password")}
60-
/>
61-
<Button
62-
variant="contained"
63-
color="primary"
64-
onClick={() => onLogin(loginInfo)}
65-
>
66-
Login
67-
</Button>
68-
</div>
69-
</CardContent>
70-
</Card>
37+
<div className={classes.formContainer}>
38+
<TextField
39+
label="Name"
40+
margin="normal"
41+
value={loginInfo.login}
42+
onChange={onTexFieldChange("login")}
43+
/>
44+
<TextField
45+
label="Password"
46+
type="password"
47+
margin="normal"
48+
value={loginInfo.password}
49+
onChange={onTexFieldChange("password")}
50+
/>
51+
<Button
52+
variant="contained"
53+
color="primary"
54+
onClick={() => onLogin(loginInfo)}
55+
>
56+
Login
57+
</Button>
58+
</div>
7159
);
7260
};

‎hooks/13_LoginForm/src/pages/login.container.tsx‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,29 @@ import { useHistory } from "react-router-dom";
33
import { LoginEntity } from "../model/login";
44
import { isValidLogin } from "../api/login";
55
import { LoginComponent } from "./login.component";
6+
import Card from "@material-ui/core/Card";
7+
import CardHeader from "@material-ui/core/CardHeader";
8+
import CardContent from "@material-ui/core/CardContent";
9+
import createStyles from "@material-ui/styles/createStyles";
10+
import makeStyles from "@material-ui/styles/makeStyles";
611
import { NotificationComponent } from "../common";
712

13+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
14+
const useFormStyles = makeStyles((theme) =>
15+
createStyles({
16+
card: {
17+
maxWidth: 400,
18+
margin: "0 auto",
19+
},
20+
})
21+
);
22+
823
interface Props {}
924

1025
export const LoginContainer: React.FC<Props> = (props) => {
1126
const history = useHistory();
1227
const [isShowAlert, setShowAlert] = React.useState(false);
28+
const classes = useFormStyles();
1329

1430
const loginSucceeded = (isValid: boolean) => {
1531
if (isValid) {
@@ -25,12 +41,17 @@ export const LoginContainer: React.FC<Props> = (props) => {
2541

2642
return (
2743
<>
28-
<LoginComponent onLogin={handleLogin} />
29-
<NotificationComponent
30-
show={isShowAlert}
31-
message="Invalid Form"
32-
onClose={() => setShowAlert(false)}
33-
/>
44+
<Card className={classes.card}>
45+
<CardHeader title="Login" />
46+
<CardContent>
47+
<LoginComponent onLogin={handleLogin} />
48+
<NotificationComponent
49+
show={isShowAlert}
50+
message="Invalid Form"
51+
onClose={() => setShowAlert(false)}
52+
/>
53+
</CardContent>
54+
</Card>
3455
</>
3556
);
3657
};

‎hooks/14_FormValidation/src/pages/login.component.tsx‎

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ import { Form } from "formik";
55
import createStyles from "@material-ui/styles/createStyles";
66
import makeStyles from "@material-ui/styles/makeStyles";
77
import Button from "@material-ui/core/Button";
8-
import Card from "@material-ui/core/Card";
9-
import CardHeader from "@material-ui/core/CardHeader";
10-
import CardContent from "@material-ui/core/CardContent";
118
import { loginFormValidation } from "./login.validation";
129
import { Formik } from "formik";
1310

@@ -23,10 +20,6 @@ const useFormStyles = makeStyles((theme) =>
2320
flexDirection: "column",
2421
justifyContent: "center",
2522
},
26-
card: {
27-
maxWidth: 400,
28-
margin: "0 auto",
29-
},
3023
})
3124
);
3225

@@ -35,31 +28,26 @@ export const LoginComponent: React.FC<PropsForm> = (props) => {
3528
const { onLogin } = props;
3629

3730
return (
38-
<Card className={classes.card}>
39-
<CardHeader title="Login" />
40-
<CardContent>
41-
<Formik
42-
onSubmit={onLogin}
43-
initialValues={createEmptyLogin()}
44-
validate={loginFormValidation.validateForm}
45-
>
46-
{() => (
47-
<Form>
48-
<div className={classes.formContainer}>
49-
<TextFieldComponent label="Name" name="login" />
50-
<TextFieldComponent
51-
label="Password"
52-
type="password"
53-
name="password"
54-
/>
55-
<Button type="submit" variant="contained" color="primary">
56-
Login
57-
</Button>
58-
</div>
59-
</Form>
60-
)}
61-
</Formik>
62-
</CardContent>
63-
</Card>
31+
<Formik
32+
onSubmit={onLogin}
33+
initialValues={createEmptyLogin()}
34+
validate={loginFormValidation.validateForm}
35+
>
36+
{() => (
37+
<Form>
38+
<div className={classes.formContainer}>
39+
<TextFieldComponent label="Name" name="login" />
40+
<TextFieldComponent
41+
label="Password"
42+
type="password"
43+
name="password"
44+
/>
45+
<Button type="submit" variant="contained" color="primary">
46+
Login
47+
</Button>
48+
</div>
49+
</Form>
50+
)}
51+
</Formik>
6452
);
6553
};

‎hooks/14_FormValidation/src/pages/login.container.tsx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,30 @@ import { useHistory } from "react-router-dom";
33
import { LoginEntity } from "../model/login";
44
import { isValidLogin } from "../api/login";
55
import { LoginComponent } from "./login.component";
6+
import Card from "@material-ui/core/Card";
7+
import CardHeader from "@material-ui/core/CardHeader";
8+
import CardContent from "@material-ui/core/CardContent";
9+
import createStyles from "@material-ui/styles/createStyles";
10+
import makeStyles from "@material-ui/styles/makeStyles";
611
import { NotificationComponent } from "../common";
712

13+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
14+
const useFormStyles = makeStyles((theme) =>
15+
createStyles({
16+
card: {
17+
maxWidth: 400,
18+
margin: "0 auto",
19+
},
20+
})
21+
);
22+
23+
interface Props {}
824
interface Props {}
925

1026
export const LoginContainer: React.FC<Props> = (props) => {
1127
const history = useHistory();
1228
const [isShowAlert, setShowAlert] = React.useState(false);
29+
const classes = useFormStyles();
1330

1431
const loginSucceeded = (isValid: boolean) => {
1532
if (isValid) {
@@ -25,12 +42,17 @@ export const LoginContainer: React.FC<Props> = (props) => {
2542

2643
return (
2744
<>
28-
<LoginComponent onLogin={handleLogin} />
29-
<NotificationComponent
30-
show={isShowAlert}
31-
message="Invalid Form"
32-
onClose={() => setShowAlert(false)}
33-
/>
45+
<Card className={classes.card}>
46+
<CardHeader title="Login" />
47+
<CardContent>
48+
<LoginComponent onLogin={handleLogin} />
49+
<NotificationComponent
50+
show={isShowAlert}
51+
message="Invalid Form"
52+
onClose={() => setShowAlert(false)}
53+
/>
54+
</CardContent>
55+
</Card>
3456
</>
3557
);
3658
};

‎hooks/15_Context/src/pages/login.component.tsx‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,6 @@ import { Form } from "formik";
55
import createStyles from "@material-ui/styles/createStyles";
66
import makeStyles from "@material-ui/styles/makeStyles";
77
import Button from "@material-ui/core/Button";
8-
import Card from "@material-ui/core/Card";
9-
import CardHeader from "@material-ui/core/CardHeader";
10-
import CardContent from "@material-ui/core/CardContent";
118
import { loginFormValidation } from "./login.validation";
129
import { Formik } from "formik";
1310

@@ -35,31 +32,26 @@ export const LoginComponent: React.FC<PropsForm> = (props) => {
3532
const { onLogin } = props;
3633

3734
return (
38-
<Card className={classes.card}>
39-
<CardHeader title="Login" />
40-
<CardContent>
41-
<Formik
42-
onSubmit={onLogin}
43-
initialValues={createEmptyLogin()}
44-
validate={loginFormValidation.validateForm}
45-
>
46-
{() => (
47-
<Form>
48-
<div className={classes.formContainer}>
49-
<TextFieldComponent label="Name" name="login" />
50-
<TextFieldComponent
51-
label="Password"
52-
type="password"
53-
name="password"
54-
/>
55-
<Button type="submit" variant="contained" color="primary">
56-
Login
57-
</Button>
58-
</div>
59-
</Form>
60-
)}
61-
</Formik>
62-
</CardContent>
63-
</Card>
35+
<Formik
36+
onSubmit={onLogin}
37+
initialValues={createEmptyLogin()}
38+
validate={loginFormValidation.validateForm}
39+
>
40+
{() => (
41+
<Form>
42+
<div className={classes.formContainer}>
43+
<TextFieldComponent label="Name" name="login" />
44+
<TextFieldComponent
45+
label="Password"
46+
type="password"
47+
name="password"
48+
/>
49+
<Button type="submit" variant="contained" color="primary">
50+
Login
51+
</Button>
52+
</div>
53+
</Form>
54+
)}
55+
</Formik>
6456
);
6557
};

‎hooks/15_Context/src/pages/login.container.tsx‎

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,30 @@ import { useHistory } from "react-router-dom";
33
import { LoginEntity } from "../model/login";
44
import { isValidLogin } from "../api/login";
55
import { LoginComponent } from "./login.component";
6+
import Card from "@material-ui/core/Card";
7+
import CardHeader from "@material-ui/core/CardHeader";
8+
import CardContent from "@material-ui/core/CardContent";
9+
import createStyles from "@material-ui/styles/createStyles";
10+
import makeStyles from "@material-ui/styles/makeStyles";
611
import { NotificationComponent, SessionContext } from "../common";
7-
import { light } from "@material-ui/core/styles/createPalette";
12+
13+
// https://material-ui.com/styles/api/#makestyles-styles-options-hook
14+
const useFormStyles = makeStyles((theme) =>
15+
createStyles({
16+
card: {
17+
maxWidth: 400,
18+
margin: "0 auto",
19+
},
20+
})
21+
);
822

923
interface Props {}
1024

1125
export const LoginContainer: React.FC<Props> = (props) => {
1226
const loginContext = React.useContext(SessionContext);
1327
const history = useHistory();
1428
const [isShowAlert, setShowAlert] = React.useState(false);
29+
const classes = useFormStyles();
1530

1631
const loginSucceeded = (isValid: boolean, login: LoginEntity) => {
1732
if (isValid) {
@@ -28,12 +43,17 @@ export const LoginContainer: React.FC<Props> = (props) => {
2843

2944
return (
3045
<>
31-
<LoginComponent onLogin={handleLogin} />
32-
<NotificationComponent
33-
show={isShowAlert}
34-
message="Invalid Form"
35-
onClose={() => setShowAlert(false)}
36-
/>
46+
<Card className={classes.card}>
47+
<CardHeader title="Login" />
48+
<CardContent>
49+
<LoginComponent onLogin={handleLogin} />
50+
<NotificationComponent
51+
show={isShowAlert}
52+
message="Invalid Form"
53+
onClose={() => setShowAlert(false)}
54+
/>
55+
</CardContent>
56+
</Card>
3757
</>
3858
);
3959
};

0 commit comments

Comments
 (0)