Save User State on Client

components/Header/header.js

@@ -2,42 +2,32 @@ import {useState, useEffect} from 'react'
 import Link from 'next/link'
 import styles from './header.module.scss'
 import Router from 'next/router'
+import { useAuth } from '../../contexts/authContext'
+import { clientRedirect } from '../../lib/redirect'
 
 const Header = () => {
-    const [isAtuenticated, setIsAtuenticated] = useState(false)
-
-    useEffect(async () => {
-        if(localStorage.getItem('macebook-isauth')){
-            setIsAtuenticated(true)
-        }else{
-            setIsAtuenticated(false)
-        }
-    })
+    const [user, setUser] = useAuth()
 
     const handleLogout = async () => {
-        if(localStorage.getItem('macebook-isauth')){
-            localStorage.removeItem('macebook-isauth')
-        }
         const res = await fetch(`${process.env.API}/logout`, {
             method: 'GET',
             credentials: 'include'
         })
-        console.log(res)
-        Router.replace('/')
-        return
+        setUser()
+        clientRedirect('/')
     }
 
     return(
         <nav className={styles.navbar}>
             <Link href="/"><a className={styles.navbarBrand}>Logo</a></Link>
-            {isAtuenticated ? 
+            {user ? 
             <ul className={styles.navbarNav}>
                 <li className={styles.navbarLink}><Link href="/feeds"><a>Home</a></Link></li>
                 <li className={styles.navbarLink}><Link href="/messaging"><a>Messaging</a></Link></li>
                 <li className={styles.navbarLink}><Link href="/notifications"><a>Notifications</a></Link></li>
-                <li className={styles.navbarLink}><Link href="/profile"><a>User Icon</a></Link></li>
                 <li className={styles.navbarLink}><Link href="/settings"><a>Settings</a></Link></li>
-                <li className={styles.navbarLink} onClick={handleLogout}>Logout</li>
+                <li className={styles.navbarLink} onClick={handleLogout}><a>Logout</a></li>
+                <li className={styles.navbarLink}><Link href={`/user/${user.username}`}><a><img className={styles.picture} src={user.picture}/></a></Link></li>
             </ul> :
             <div>
                 <ul className={styles.navbarNav}>

components/Header/header.module.scss

@@ -7,15 +7,18 @@
     padding: 1rem;
     background-color: $color-primary;
     color: $color-white;
-
+    align-items: center;
+
     a{
         text-decoration: none;
+        cursor: pointer;
     }
 }
 
 .navbarNav{
     display: flex;
     flex-direction: row;
+    align-items: center;
     list-style-type: none;  
     padding: 0;
     margin: 0;
@@ -25,4 +28,9 @@
     &:not(:last-child){
         margin-right: 1rem;
     }
+}
+
+.picture{
+    border-radius: 50%;
+    height: 35px;
 }

contexts/authContext.js

@@ -0,0 +1,29 @@
+import React, { useContext, useEffect, useState } from 'react'
+
+const AuthContext = React.createContext()
+
+export const AuthProvider = ({children}) => {
+    const [user, setUser] = useState()
+
+    useEffect(() => {
+        if(!user){
+            fetch(`${process.env.API}/profile`, {
+                method: 'GET',
+                credentials: 'include'
+            })
+            .then(res => res.json())
+            .then(user => setUser(user))
+            .catch(err => console.log(err))
+        }
+    }, [user])
+
+    return(
+        <AuthContext.Provider value={[user, setUser]}>
+            {children}
+        </AuthContext.Provider>
+    )
+}
+
+export const useAuth = () => {
+    return useContext(AuthContext)
+}

lib/redirect.js

@@ -0,0 +1,10 @@
+import Router from "next/router"
+
+export const clientRedirect = (slug) => {
+    Router.replace(slug)
+}
+
+export const serverRedirect = (ctx, slug) => {
+    ctx.res.writeHead(301, {Location: slug})
+    ctx.res.end()
+}

mock/routes.js

@@ -68,7 +68,7 @@ router.post('/login', (req, res) => {
         domain: 'localhost',
         expires: new Date(Date.now() + 6.048e+8)
     }))
-    res.status(200).json({username})
+    res.status(200).json({user})
 })
 
 router.get('/profile', auth, (req, res) => {

pages/500.js

@@ -0,0 +1,11 @@
+import Layout from '../components/Layout/layout'
+import SEO from '../components/seo'
+
+export default function Custom500() {
+    return (
+      <Layout>
+        <SEO title="Internal Server Error | Macebook"/>
+        <h1>500 - Internal Server Error</h1>
+      </Layout>
+    )
+  }

pages/_app.js

@@ -1,8 +1,13 @@
 import '../styles/globals.scss'
 import 'bootstrap/dist/css/bootstrap-grid.min.css'
+import {AuthProvider} from '../contexts/authContext'
 
 function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+  return (
+    <AuthProvider>
+      <Component {...pageProps} />
+    </AuthProvider>
+  )
 }
 
 export default MyApp

pages/feeds.js

@@ -2,6 +2,7 @@ import Layout from '../components/Layout/layout'
 import SEO from '../components/seo'
 import Router from 'next/router'
 import styles from '../styles/pages/feeds.module.scss'
+import {clientRedirect, serverRedirect} from '../lib/redirect'
 
 const Feeds = ({feeds}) => {
     return(
@@ -21,13 +22,12 @@ Feeds.getInitialProps = async (ctx) => {
     })
 
     if(res.status === 401 && !ctx.req){
-        Router.replace('/login')
+        clientRedirect('/login')
         return {}
     }
 
     if(res.status === 401 && ctx.req){
-        ctx.res.writeHead(301, {Location: '/login'})
-        ctx.res.end()
+        serverRedirect(ctx, '/login')
         return {}
     }
 

pages/login.js

@@ -1,11 +1,15 @@
-import {useState} from 'react'
+import {useState, useEffect} from 'react'
 import SEO from '../components/seo'
 import Layout from '../components/Layout/layout'
-import Router from 'next/router'
+import {useAuth} from '../contexts/authContext'
+import {clientRedirect} from '../lib/redirect'
 
 const Login = () => {
     const [username, updateUsername] = useState("charlotteli")
     const [password, updatePassword] = useState("charlotteli") 
+    const [user, setUser] = useAuth()
+
+    useEffect(() => {if(user) clientRedirect('/feeds')}, [user])
 
     const handleClick = async (e) => {
         e.preventDefault()
@@ -21,11 +25,10 @@ const Login = () => {
                 return alert("Invalid Username or Password")
             }
 
-            if(res.status == 200){
-                console.log("You're Logged In!")
-                localStorage.setItem('macebook-isauth', true)
-                return Router.replace('/feeds')
-            }
+            console.log("You're Logged In!")
+            localStorage.setItem('macebook-isauth', true)
+            const data = await res.json()
+            setUser(data.user)
         } catch (error) {
             console.log("Server not responding!")
         }