This commit is contained in:
Tyrel Souza 2022-09-22 14:11:38 -04:00
parent 9f1d7c9da9
commit 7d6072383d
No known key found for this signature in database
GPG Key ID: F6582CF1308A2360
3 changed files with 87 additions and 77 deletions

View File

@ -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"]

View File

@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": false
}

View File

@ -1,48 +1,48 @@
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);
};
setEnteredEmail(event.target.value)
}
const passwordChangeHandler = (event) => {
setEnteredPassword(event.target.value);
};
setEnteredPassword(event.target.value)
}
const validateEmailHandler = () => {
setEmailIsValid(enteredEmail.includes("@"));
};
setEmailIsValid(enteredEmail.includes("@"))
}
const validatePasswordHandler = () => {
setPasswordIsValid(enteredPassword.trim().length > 6);
};
setPasswordIsValid(enteredPassword.trim().length > 6)
}
const submitHandler = (event) => {
event.preventDefault();
props.onLogin(enteredEmail, enteredPassword);
};
event.preventDefault()
props.onLogin(enteredEmail, enteredPassword)
}
return (
<Card className={classes.login}>
@ -76,13 +76,17 @@ const Login = (props) => {
/>
</div>
<div className={classes.actions}>
<Button type="submit" className={classes.btn} disabled={!formIsValid}>
<Button
type="submit"
className={classes.btn}
disabled={!formIsValid}
>
Login
</Button>
</div>
</form>
</Card>
);
};
)
}
export default Login;
export default Login