better auth context stuff

Author: bradwestfall

src/auth/Login.js

@@ -3,20 +3,34 @@ import Panel from '../ui/Panel'
 import Card from '../ui/Card'
 import { useAuthUser } from '../utils/AuthUser'
 
+// Fake API Network Call
+const apiLogin = (username, password) => {
+  return new Promise((resolve, reject) => {
+    if (username === 'react' && password === 'react') {
+      resolve()
+    } else {
+      reject()
+    }
+  })
+}
+
 const Login = ({ history }) => {
-  const { login } = useAuthUser()
+  const { setLogged } = useAuthUser()
   const [errorMessage, setErrorMessage] = useState()
 
   function handleSubmit(e) {
     e.preventDefault()
     const [usernameNode, passwordNode] = e.target.elements
 
-    if (usernameNode.value === 'react' && passwordNode.value === 'react') {
-      login()
-      history.push('/projects')
-    } else {
-      setErrorMessage('Invalid')
-    }
+    apiLogin(usernameNode.value, passwordNode.value)
+      .then(() => {
+        setLogged(true)
+        history.push('/projects')
+      })
+      .catch(() => {
+        setLogged(false)
+        setErrorMessage('Invalid')
+      })
   }
 
   return (
@@ -31,7 +45,7 @@ const Login = ({ history }) => {
           The username is <strong>react</strong> and the password is <strong>react</strong>
         </p>
         {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
-        <form onSubmit={handleSubmit} className="spacing">
+        <form className="spacing" onSubmit={handleSubmit}>
           <input type="text" placeholder="Username" required />
           <input type="password" placeholder="Password" required />
           <button type="submit" className="button">

src/ui/AuthorizedPrimaryHeader.js

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { useAuthUser } from '../utils/AuthUser'
 
 const AuthorizedPrimaryHeader = () => {
-  const { logout } = useAuthUser()
+  const { setLogged } = useAuthUser()
 
   return (
     <header className="authorized-primary-header">
@@ -19,7 +19,7 @@ const AuthorizedPrimaryHeader = () => {
         )}
       />
       <nav className="primary-nav">
-        <button className="logout text-light-tint" onClick={logout}>
+        <button onClick={() => setLogged(false)} className="logout text-light-tint">
           Logout
         </button>
         <div className="avatar" />

src/utils/AuthUser.js

@@ -8,19 +8,19 @@ const cookieName = 'RR5CourseLogged'
 
 export const AuthUserProvider = ({ children }) => {
   const cookieLogged = Cookies.getJSON(cookieName)
-  const [logged, setLogged] = useState(cookieLogged ? cookieLogged.logged : false)
+  const [logged, setLoggedState] = useState(cookieLogged ? cookieLogged.logged : false)
 
-  function login() {
-    Cookies.set(cookieName, { logged: true })
-    setLogged(true)
-  }
+  const setLogged = logged => {
+    if (logged) {
+      Cookies.set(cookieName, { logged: true })
+    } else {
+      Cookies.remove(cookieName)
+    }
 
-  function logout() {
-    Cookies.remove(cookieName)
-    setLogged(false)
+    setLoggedState(logged)
   }
 
-  return <AuthUserContext.Provider value={{ logged, login, logout }}>{children}</AuthUserContext.Provider>
+  return <AuthUserContext.Provider value={{ logged, setLogged }}>{children}</AuthUserContext.Provider>
 }
 
 export const useAuthUser = () => {