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 classes from "./Login.module.css";
|
||||
import Button from "../UI/Button/Button";
|
||||
import Card from "../UI/Card/Card"
|
||||
import classes from "./Login.module.css"
|
||||
import Button from "../UI/Button/Button"
|
||||
|
||||
const Login = (props) => {
|
||||
const [enteredEmail, setEnteredEmail] = useState("");
|
||||
const [emailIsValid, setEmailIsValid] = useState();
|
||||
const [enteredPassword, setEnteredPassword] = useState("");
|
||||
const [passwordIsValid, setPasswordIsValid] = useState();
|
||||
const [formIsValid, setFormIsValid] = useState(false);
|
||||
const [enteredEmail, setEnteredEmail] = useState("")
|
||||
const [emailIsValid, setEmailIsValid] = useState()
|
||||
const [enteredPassword, setEnteredPassword] = useState("")
|
||||
const [passwordIsValid, setPasswordIsValid] = useState()
|
||||
const [formIsValid, setFormIsValid] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const identifier = setTimeout(() => {
|
||||
setFormIsValid(
|
||||
enteredEmail.includes("@") && enteredPassword.trim().length > 6
|
||||
);
|
||||
}, 500);
|
||||
// useEffect(() => {
|
||||
// const identifier = setTimeout(() => {
|
||||
// setFormIsValid(
|
||||
// enteredEmail.includes("@") && enteredPassword.trim().length > 6
|
||||
// )
|
||||
// }, 500)
|
||||
|
||||
return () => {
|
||||
clearTimeout(identifier);
|
||||
};
|
||||
}, [enteredEmail, enteredPassword]);
|
||||
// return () => {
|
||||
// clearTimeout(identifier)
|
||||
// }
|
||||
// }, [enteredEmail, enteredPassword])
|
||||
|
||||
const emailChangeHandler = (event) => {
|
||||
setEnteredEmail(event.target.value);
|
||||
};
|
||||
const emailChangeHandler = (event) => {
|
||||
setEnteredEmail(event.target.value)
|
||||
}
|
||||
|
||||
const passwordChangeHandler = (event) => {
|
||||
setEnteredPassword(event.target.value);
|
||||
};
|
||||
const passwordChangeHandler = (event) => {
|
||||
setEnteredPassword(event.target.value)
|
||||
}
|
||||
|
||||
const validateEmailHandler = () => {
|
||||
setEmailIsValid(enteredEmail.includes("@"));
|
||||
};
|
||||
const validateEmailHandler = () => {
|
||||
setEmailIsValid(enteredEmail.includes("@"))
|
||||
}
|
||||
|
||||
const validatePasswordHandler = () => {
|
||||
setPasswordIsValid(enteredPassword.trim().length > 6);
|
||||
};
|
||||
const validatePasswordHandler = () => {
|
||||
setPasswordIsValid(enteredPassword.trim().length > 6)
|
||||
}
|
||||
|
||||
const submitHandler = (event) => {
|
||||
event.preventDefault();
|
||||
props.onLogin(enteredEmail, enteredPassword);
|
||||
};
|
||||
const submitHandler = (event) => {
|
||||
event.preventDefault()
|
||||
props.onLogin(enteredEmail, enteredPassword)
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className={classes.login}>
|
||||
<form onSubmit={submitHandler}>
|
||||
<div
|
||||
className={`${classes.control} ${
|
||||
emailIsValid === false ? classes.invalid : ""
|
||||
}`}
|
||||
>
|
||||
<label htmlFor="email">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={enteredEmail}
|
||||
onChange={emailChangeHandler}
|
||||
onBlur={validateEmailHandler}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${classes.control} ${
|
||||
passwordIsValid === false ? classes.invalid : ""
|
||||
}`}
|
||||
>
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={enteredPassword}
|
||||
onChange={passwordChangeHandler}
|
||||
onBlur={validatePasswordHandler}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.actions}>
|
||||
<Button type="submit" className={classes.btn} disabled={!formIsValid}>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
return (
|
||||
<Card className={classes.login}>
|
||||
<form onSubmit={submitHandler}>
|
||||
<div
|
||||
className={`${classes.control} ${
|
||||
emailIsValid === false ? classes.invalid : ""
|
||||
}`}
|
||||
>
|
||||
<label htmlFor="email">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={enteredEmail}
|
||||
onChange={emailChangeHandler}
|
||||
onBlur={validateEmailHandler}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${classes.control} ${
|
||||
passwordIsValid === false ? classes.invalid : ""
|
||||
}`}
|
||||
>
|
||||
<label htmlFor="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={enteredPassword}
|
||||
onChange={passwordChangeHandler}
|
||||
onBlur={validatePasswordHandler}
|
||||
/>
|
||||
</div>
|
||||
<div className={classes.actions}>
|
||||
<Button
|
||||
type="submit"
|
||||
className={classes.btn}
|
||||
disabled={!formIsValid}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login;
|
||||
export default Login
|
||||
|
|
|
|||
Loading…
Reference in New Issue