usefeect
This commit is contained in:
Tyrel Souza
parent
9f1d7c9da9
commit
7d6072383d
|
|
@ -1 +1 @@
|
||||||
[{"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/index.js":"1","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/App.js":"2","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Home/Home.js":"3","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Login/Login.js":"4","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/MainHeader.js":"5","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/Navigation.js":"6","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Button/Button.js":"7","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Card/Card.js":"8"},{"size":206,"mtime":1648642446000,"results":"9","hashOfConfig":"10"},{"size":1092,"mtime":1663864772540,"results":"11","hashOfConfig":"10"},{"size":250,"mtime":1648642446000,"results":"12","hashOfConfig":"10"},{"size":2410,"mtime":1663869709929,"results":"13","hashOfConfig":"10"},{"size":368,"mtime":1648642446000,"results":"14","hashOfConfig":"10"},{"size":571,"mtime":1648642446000,"results":"15","hashOfConfig":"10"},{"size":353,"mtime":1648642446000,"results":"16","hashOfConfig":"10"},{"size":218,"mtime":1648642446000,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"vag9xb",{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"24"},"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/index.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/App.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Home/Home.js",[],["35","36"],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Login/Login.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/MainHeader.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/Navigation.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Button/Button.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Card/Card.js",[],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"]
|
[{"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/index.js":"1","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/App.js":"2","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Home/Home.js":"3","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Login/Login.js":"4","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/MainHeader.js":"5","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/Navigation.js":"6","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Button/Button.js":"7","/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Card/Card.js":"8"},{"size":206,"mtime":1648642446000,"results":"9","hashOfConfig":"10"},{"size":1092,"mtime":1663864772540,"results":"11","hashOfConfig":"10"},{"size":250,"mtime":1648642446000,"results":"12","hashOfConfig":"10"},{"size":2969,"mtime":1663870284057,"results":"13","hashOfConfig":"10"},{"size":368,"mtime":1648642446000,"results":"14","hashOfConfig":"10"},{"size":571,"mtime":1648642446000,"results":"15","hashOfConfig":"10"},{"size":353,"mtime":1648642446000,"results":"16","hashOfConfig":"10"},{"size":218,"mtime":1648642446000,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"vag9xb",{"filePath":"21","messages":"22","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"23","messages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"25","messages":"26","errorCount":0,"fatalErrorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"20"},"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/index.js",[],["35","36"],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/App.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Home/Home.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/Login/Login.js",["37","38"],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/MainHeader.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/MainHeader/Navigation.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Button/Button.js",[],"/Users/tyrel.souza/code/udemy/react-course/side-effects/src/components/UI/Card/Card.js",[],{"ruleId":"39","replacedBy":"40"},{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","severity":1,"message":"44","line":1,"column":27,"nodeType":"45","messageId":"46","endLine":1,"endColumn":36},{"ruleId":"43","severity":1,"message":"47","line":12,"column":25,"nodeType":"45","messageId":"46","endLine":12,"endColumn":39},"no-native-reassign",["48"],"no-negated-in-lhs",["49"],"no-unused-vars","'useEffect' is defined but never used.","Identifier","unusedVar","'setFormIsValid' is assigned a value but never used.","no-global-assign","no-unsafe-negation"]
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": false
|
||||||
|
}
|
||||||
|
|
@ -1,88 +1,92 @@
|
||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react"
|
||||||
|
|
||||||
import Card from "../UI/Card/Card";
|
import Card from "../UI/Card/Card"
|
||||||
import classes from "./Login.module.css";
|
import classes from "./Login.module.css"
|
||||||
import Button from "../UI/Button/Button";
|
import Button from "../UI/Button/Button"
|
||||||
|
|
||||||
const Login = (props) => {
|
const Login = (props) => {
|
||||||
const [enteredEmail, setEnteredEmail] = useState("");
|
const [enteredEmail, setEnteredEmail] = useState("")
|
||||||
const [emailIsValid, setEmailIsValid] = useState();
|
const [emailIsValid, setEmailIsValid] = useState()
|
||||||
const [enteredPassword, setEnteredPassword] = useState("");
|
const [enteredPassword, setEnteredPassword] = useState("")
|
||||||
const [passwordIsValid, setPasswordIsValid] = useState();
|
const [passwordIsValid, setPasswordIsValid] = useState()
|
||||||
const [formIsValid, setFormIsValid] = useState(false);
|
const [formIsValid, setFormIsValid] = useState(false)
|
||||||
|
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const identifier = setTimeout(() => {
|
// const identifier = setTimeout(() => {
|
||||||
setFormIsValid(
|
// setFormIsValid(
|
||||||
enteredEmail.includes("@") && enteredPassword.trim().length > 6
|
// enteredEmail.includes("@") && enteredPassword.trim().length > 6
|
||||||
);
|
// )
|
||||||
}, 500);
|
// }, 500)
|
||||||
|
|
||||||
return () => {
|
// return () => {
|
||||||
clearTimeout(identifier);
|
// clearTimeout(identifier)
|
||||||
};
|
// }
|
||||||
}, [enteredEmail, enteredPassword]);
|
// }, [enteredEmail, enteredPassword])
|
||||||
|
|
||||||
const emailChangeHandler = (event) => {
|
const emailChangeHandler = (event) => {
|
||||||
setEnteredEmail(event.target.value);
|
setEnteredEmail(event.target.value)
|
||||||
};
|
}
|
||||||
|
|
||||||
const passwordChangeHandler = (event) => {
|
const passwordChangeHandler = (event) => {
|
||||||
setEnteredPassword(event.target.value);
|
setEnteredPassword(event.target.value)
|
||||||
};
|
}
|
||||||
|
|
||||||
const validateEmailHandler = () => {
|
const validateEmailHandler = () => {
|
||||||
setEmailIsValid(enteredEmail.includes("@"));
|
setEmailIsValid(enteredEmail.includes("@"))
|
||||||
};
|
}
|
||||||
|
|
||||||
const validatePasswordHandler = () => {
|
const validatePasswordHandler = () => {
|
||||||
setPasswordIsValid(enteredPassword.trim().length > 6);
|
setPasswordIsValid(enteredPassword.trim().length > 6)
|
||||||
};
|
}
|
||||||
|
|
||||||
const submitHandler = (event) => {
|
const submitHandler = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault()
|
||||||
props.onLogin(enteredEmail, enteredPassword);
|
props.onLogin(enteredEmail, enteredPassword)
|
||||||
};
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={classes.login}>
|
<Card className={classes.login}>
|
||||||
<form onSubmit={submitHandler}>
|
<form onSubmit={submitHandler}>
|
||||||
<div
|
<div
|
||||||
className={`${classes.control} ${
|
className={`${classes.control} ${
|
||||||
emailIsValid === false ? classes.invalid : ""
|
emailIsValid === false ? classes.invalid : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<label htmlFor="email">E-Mail</label>
|
<label htmlFor="email">E-Mail</label>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
id="email"
|
id="email"
|
||||||
value={enteredEmail}
|
value={enteredEmail}
|
||||||
onChange={emailChangeHandler}
|
onChange={emailChangeHandler}
|
||||||
onBlur={validateEmailHandler}
|
onBlur={validateEmailHandler}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={`${classes.control} ${
|
className={`${classes.control} ${
|
||||||
passwordIsValid === false ? classes.invalid : ""
|
passwordIsValid === false ? classes.invalid : ""
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<label htmlFor="password">Password</label>
|
<label htmlFor="password">Password</label>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
id="password"
|
id="password"
|
||||||
value={enteredPassword}
|
value={enteredPassword}
|
||||||
onChange={passwordChangeHandler}
|
onChange={passwordChangeHandler}
|
||||||
onBlur={validatePasswordHandler}
|
onBlur={validatePasswordHandler}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.actions}>
|
<div className={classes.actions}>
|
||||||
<Button type="submit" className={classes.btn} disabled={!formIsValid}>
|
<Button
|
||||||
Login
|
type="submit"
|
||||||
</Button>
|
className={classes.btn}
|
||||||
</div>
|
disabled={!formIsValid}
|
||||||
</form>
|
>
|
||||||
</Card>
|
Login
|
||||||
);
|
</Button>
|
||||||
};
|
</div>
|
||||||
|
</form>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export default Login;
|
export default Login
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue