feat: keep user logged in if they close the bro wser

this fixes #91

src/component/top-menu/top-menu.component.jsx

@@ -1,38 +1,49 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { StyledTopMenu, StyledLink, StyledButton } from './top-menu.style'
 import { WebInfoState } from '../web-info/web-info.context';
 import { auth, GitHubProvider } from '../data/firebase';
 
 const TopMenu = () => {
-  const { toggleChat, updateToggleChat } = WebInfoState()
-  const [ loggedIn, setLoggedIn ] = useState(false) 
+  const { toggleChat, updateToggleChat, user, updateUser } = WebInfoState()
 
   const handleToggleChat = () => {
     updateToggleChat({ type: 'TOGGLE_CHAT' });
   }
 
   const handleLogInAndOut = () => {
-    if (loggedIn) {
+    if (user) {
       auth.signOut();
+      updateUser({
+        type: 'USER_AUTHENTICATE',
+        user: null
+      })
     }
     else {
       auth
         .signInWithPopup(GitHubProvider)
-        .then(user => {
-          // console.log(user)
+        .then(({ user: { uid, displayName, photoURL }}) => {
+          updateUser({
+            type: 'USER_AUTHENTICATE',
+            user: {
+              uid,
+              displayName,
+              photoURL
+            }
+          })
         })
         .catch(error => {
           // console.error(error)
         })
     }
   }
 
-  const getLogInOutLabel = () => loggedIn ? 'Ba Bye' : 'Let me in!'
+  const getLogInOutLabel = () => user ? 'Ba Bye' : 'Let me in!'
 
   return (
     <StyledTopMenu>
       <StyledLink to="/">Home</StyledLink>
       <StyledLink to="/dashboard">Dashboard</StyledLink>
+      <div>{user && user.displayName}</div>
       <button onClick={handleLogInAndOut}>
         {getLogInOutLabel()}
       </button>

src/component/user/index.js

@@ -0,0 +1 @@
+export { userReducer, defaultUser } from './user.reducer'

src/component/user/user.reducer.js

@@ -0,0 +1,11 @@
+export const defaultUser = JSON.parse(window.localStorage.getItem('user'))
+
+export const userReducer = (state = defaultUser, action) => {
+  switch(action.type) {
+    case 'USER_AUTHENTICATE':
+      window.localStorage.setItem('user', JSON.stringify(action.user))
+      return action.user
+    default:
+      return state
+  }
+}

src/component/web-info/web-info.context.js

@@ -2,24 +2,35 @@ import React, { createContext, useContext, useReducer } from 'react'
 import { courseListReducer } from '../course-panel/course-panel.reducer'
 import { sectionListReducer } from '../course/section.reducer'
 import { topMenuReducer, intialToggleMenu } from '../top-menu/top-menu.reducer'
+import { userReducer, defaultUser } from '../user';
 
 const WebInfoContext = createContext()
 
 export const WebInfoProvider = ({ children }) => {
   const [ courseList, updateCourseList ] = useReducer(courseListReducer, []) 
   const [ sectionList, updateSectionList ] = useReducer(sectionListReducer, []) 
   const [ toggleChat, updateToggleChat ] = useReducer(topMenuReducer, intialToggleMenu)
+  const [ user, updateUser ] = useReducer(userReducer, defaultUser)
+
   return (
-  <WebInfoContext.Provider value={{
-    courseList,
-    sectionList,
-    updateCourseList,
-    updateSectionList,
-    toggleChat,
-    updateToggleChat
-  }}>
-    {children}
-  </WebInfoContext.Provider>
-)}
+    <WebInfoContext.Provider value={
+      {
+        user,
+        updateUser,
+
+        courseList,
+        sectionList,
+
+        updateCourseList,
+        updateSectionList,
+
+        toggleChat,
+        updateToggleChat
+      }
+    }>
+      {children}
+    </WebInfoContext.Provider>
+  )
+}
 
 export const WebInfoState = () => useContext(WebInfoContext)