diff --git a/usereducer-starting-project/.eslintcache b/usereducer-starting-project/.eslintcache index 5841366..87ba14f 100644 --- a/usereducer-starting-project/.eslintcache +++ b/usereducer-starting-project/.eslintcache @@ -1 +1 @@ -[{"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/index.js":"1","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/App.js":"2","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/Login/Login.js":"4","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"5","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8"},{"size":206,"mtime":1648532752000,"results":"9","hashOfConfig":"10"},{"size":1093,"mtime":1616593928000,"results":"11","hashOfConfig":"10"},{"size":250,"mtime":1616593928000,"results":"12","hashOfConfig":"10"},{"size":3876,"mtime":1663871762917,"results":"13","hashOfConfig":"10"},{"size":368,"mtime":1616593928000,"results":"14","hashOfConfig":"10"},{"size":571,"mtime":1616593928000,"results":"15","hashOfConfig":"10"},{"size":218,"mtime":1616593928000,"results":"16","hashOfConfig":"10"},{"size":353,"mtime":1616593928000,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"4a8obe",{"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},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/index.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/App.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/Login/Login.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/Users/tyrel.souza/code/udemy/react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],["35","36"],{"ruleId":"37","replacedBy":"38"},{"ruleId":"39","replacedBy":"40"},"no-native-reassign",["41"],"no-negated-in-lhs",["42"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file +[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9"},{"size":322,"mtime":1663949419058,"results":"10","hashOfConfig":"11"},{"size":514,"mtime":1663949472127,"results":"12","hashOfConfig":"11"},{"size":458,"mtime":1663949557069,"results":"13","hashOfConfig":"11"},{"size":333,"mtime":1663948682144,"results":"14","hashOfConfig":"11"},{"size":3985,"mtime":1663949653304,"results":"15","hashOfConfig":"11"},{"size":828,"mtime":1663949120275,"results":"16","hashOfConfig":"11"},{"size":218,"mtime":1663942019122,"results":"17","hashOfConfig":"11"},{"size":353,"mtime":1663942019122,"results":"18","hashOfConfig":"11"},{"size":1036,"mtime":1663949348496,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"28"},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["39","40"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"no-global-assign","no-unsafe-negation"] \ No newline at end of file diff --git a/usereducer-starting-project/package-lock.json b/usereducer-starting-project/package-lock.json index 041cc65..0ea2d6b 100644 --- a/usereducer-starting-project/package-lock.json +++ b/usereducer-starting-project/package-lock.json @@ -4222,6 +4222,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/ansi-escapes/node_modules/type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -19209,9 +19220,11 @@ } }, "node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true, "engines": { "node": ">=10" }, @@ -24599,6 +24612,13 @@ "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", "requires": { "type-fest": "^0.21.3" + }, + "dependencies": { + "type-fest": { + "version": "0.21.3", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", + "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + } } }, "ansi-html": { @@ -36309,9 +36329,11 @@ "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" }, "type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==" + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", + "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "optional": true, + "peer": true }, "type-is": { "version": "1.6.18", diff --git a/usereducer-starting-project/src/App.js b/usereducer-starting-project/src/App.js index 7847f74..eb628f0 100644 --- a/usereducer-starting-project/src/App.js +++ b/usereducer-starting-project/src/App.js @@ -1,41 +1,22 @@ -import React, { useState, useEffect } from 'react'; +import React, {useContext} from "react" -import Login from './components/Login/Login'; -import Home from './components/Home/Home'; -import MainHeader from './components/MainHeader/MainHeader'; +import Login from "./components/Login/Login" +import Home from "./components/Home/Home" +import MainHeader from "./components/MainHeader/MainHeader" +import AuthContext from "./store/auth-context" function App() { - const [isLoggedIn, setIsLoggedIn] = useState(false); + const ctx = useContext(AuthContext) - useEffect(() => { - const storedUserLoggedInInformation = localStorage.getItem('isLoggedIn'); - - if (storedUserLoggedInInformation === '1') { - setIsLoggedIn(true); - } - }, []); - - const loginHandler = (email, password) => { - // We should of course check email and password - // But it's just a dummy/ demo anyways - localStorage.setItem('isLoggedIn', '1'); - setIsLoggedIn(true); - }; - - const logoutHandler = () => { - localStorage.removeItem('isLoggedIn'); - setIsLoggedIn(false); - }; - - return ( - - -
- {!isLoggedIn && } - {isLoggedIn && } -
- - ); + return ( + <> + +
+ {!ctx.isLoggedIn && } + {ctx.isLoggedIn && } +
+ + ) } -export default App; +export default App diff --git a/usereducer-starting-project/src/components/Home/Home.js b/usereducer-starting-project/src/components/Home/Home.js index 11742c7..a864733 100644 --- a/usereducer-starting-project/src/components/Home/Home.js +++ b/usereducer-starting-project/src/components/Home/Home.js @@ -1,12 +1,17 @@ -import React from 'react'; +import React, {useContext} from 'react'; import Card from '../UI/Card/Card'; +import Button from '../UI/Button/Button'; import classes from './Home.module.css'; +import AuthContext from '../../store/auth-context'; const Home = (props) => { + const authCtx = useContext(AuthContext) + return (

Welcome back!

+ ); }; diff --git a/usereducer-starting-project/src/components/Login/Login.js b/usereducer-starting-project/src/components/Login/Login.js index 5b4e78b..e01ac20 100644 --- a/usereducer-starting-project/src/components/Login/Login.js +++ b/usereducer-starting-project/src/components/Login/Login.js @@ -1,8 +1,9 @@ -import React, { useState, useEffect, useReducer } from "react" +import React, { useState, useEffect, useReducer, useContext } from "react" import Card from "../UI/Card/Card" import classes from "./Login.module.css" import Button from "../UI/Button/Button" +import AuthContext from "../../store/auth-context" const emailReducer = (state, action) => { if (action.type === "USER_INPUT") { @@ -26,6 +27,7 @@ const passwordReducer = (state, action) => { const Login = (props) => { const [formIsValid, setFormIsValid] = useState(false) + const authCtx = useContext(AuthContext) const [emailState, dispatchEmail] = useReducer(emailReducer, { value: "", @@ -73,7 +75,7 @@ const Login = (props) => { const submitHandler = (event) => { event.preventDefault() - props.onLogin(emailState.value, passwordState.value) + authCtx.onLogin(emailState.value, passwordState.value) } return ( diff --git a/usereducer-starting-project/src/components/MainHeader/MainHeader.js b/usereducer-starting-project/src/components/MainHeader/MainHeader.js index b9aa489..a65bc42 100644 --- a/usereducer-starting-project/src/components/MainHeader/MainHeader.js +++ b/usereducer-starting-project/src/components/MainHeader/MainHeader.js @@ -7,7 +7,7 @@ const MainHeader = (props) => { return (

A Typical Page

- +
); }; diff --git a/usereducer-starting-project/src/components/MainHeader/Navigation.js b/usereducer-starting-project/src/components/MainHeader/Navigation.js index 8975255..5a4a43b 100644 --- a/usereducer-starting-project/src/components/MainHeader/Navigation.js +++ b/usereducer-starting-project/src/components/MainHeader/Navigation.js @@ -1,29 +1,31 @@ -import React from 'react'; +import React, { useContext } from "react" +import AuthContext from "../../store/auth-context" -import classes from './Navigation.module.css'; +import classes from "./Navigation.module.css" -const Navigation = (props) => { - return ( - - ); -}; +const Navigation = () => { + const ctx = useContext(AuthContext) + return ( + + ) +} -export default Navigation; +export default Navigation diff --git a/usereducer-starting-project/src/index.js b/usereducer-starting-project/src/index.js index 9065e05..2c7a96d 100644 --- a/usereducer-starting-project/src/index.js +++ b/usereducer-starting-project/src/index.js @@ -1,8 +1,13 @@ -import React from 'react'; -import ReactDOM from 'react-dom/client'; +import React from "react" +import ReactDOM from "react-dom/client" -import './index.css'; -import App from './App'; +import "./index.css" +import App from "./App" +import { AuthContextProvider } from "./store/auth-context" -const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +const root = ReactDOM.createRoot(document.getElementById("root")) +root.render( + + + +) diff --git a/usereducer-starting-project/src/store/auth-context.js b/usereducer-starting-project/src/store/auth-context.js new file mode 100644 index 0000000..9f2221f --- /dev/null +++ b/usereducer-starting-project/src/store/auth-context.js @@ -0,0 +1,42 @@ +import React, { useState, useEffect } from "react" + +const AuthContext = React.createContext({ + isLoggedIn: false, + onLogout: () => {}, + onLogin: (email, password) => {}, +}) + +export const AuthContextProvider = (props) => { + const [isLoggedIn, setIsLoggedIn] = useState(false) + + useEffect(() => { + const storedUserLoggedInInformation = localStorage.getItem("isLoggedIn") + + if (storedUserLoggedInInformation === "1") { + setIsLoggedIn(true) + } + }, []) + + const logoutHandler = () => { + localStorage.removeItem("isLoggedIn") + setIsLoggedIn(false) + } + const loginHandler = () => { + localStorage.setItem("isLoggedIn", "1") + setIsLoggedIn(true) + } + + return ( + + {props.children} + + ) +} + +export default AuthContext