Auth Fixes

components/Header/header.js

@@ -2,6 +2,7 @@ import Link from 'next/link'
 import styles from './header.module.scss'
 import { useAuth } from '../../contexts/authContext'
 import { clientRedirect } from '../../lib/redirect'
+import { isValidUser } from '../../lib/user'
 
 const Header = () => {
     const [user, setUser] = useAuth()
@@ -11,14 +12,14 @@ const Header = () => {
             method: 'GET',
             credentials: 'include'
         })
-        setUser()
+        setUser({})
         clientRedirect('/')
     }
 
     return(
         <nav className={styles.navbar}>
             <Link href="/"><a className={styles.navbarBrand}>Logo</a></Link>
-            {user ? 
+            {isValidUser(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>

contexts/authContext.js

@@ -1,12 +1,13 @@
 import React, { useContext, useEffect, useState } from 'react'
+import { isValidUser } from '../lib/user'
 
 const AuthContext = React.createContext()
 
 export const AuthProvider = ({children}) => {
-    const [user, setUser] = useState()
+    const [user, setUser] = useState({})
 
     useEffect(() => {
-        if(!user){
+        if(!isValidUser(user)){
             fetch(`${process.env.API}/profile`, {
                 method: 'GET',
                 credentials: 'include'

lib/user.js

@@ -0,0 +1,3 @@
+export const isValidUser = (user) => {
+    return Object.keys(user).length != 0
+}

pages/feeds.js

@@ -1,13 +1,38 @@
 import Layout from '../components/Layout/layout'
 import SEO from '../components/seo'
+import { useAuth } from '../contexts/authContext'
 import {clientRedirect, serverRedirect} from '../lib/redirect'
+import styles from '../styles/pages/feeds.module.scss'
 
 const Feeds = ({feeds}) => {
+    const [user, setUser] = useAuth()
+
     return(
         <Layout>
             <SEO title="Feeds | Macebook"/>
-            <h1>Feeds</h1>
-            {feeds.map((f, idx) => <div key={idx}>{f}</div>)}
+            <div className={`row ${styles.container}`}>
+
+                <div className="col-2">
+                    <div className={styles.profile}>
+                        <img src={user.picture}/>
+                        <h3>{user.username}</h3>
+                        <p>My Description</p>
+                    </div>
+                </div>
+
+                <div className="col-8">
+                    <div className={styles.feeds}>
+                        {feeds.map((f, idx) => <div className={styles.feed} key={idx}>{f}</div>)}
+                    </div>
+                </div>
+
+                <div className="col-2">
+                    <div className={styles.ads}>
+                        Ads
+                    </div>
+                </div>
+
+            </div>
         </Layout>
     )
 }
@@ -39,6 +64,8 @@ const handleFetch = async (ctx, route) => {
             "feed 2",
             "feed 3",
             "feed 4",
+            "feed 5",
+            "feed 6",
         ]
     }
 }

pages/login.js

@@ -3,14 +3,15 @@ import SEO from '../components/seo'
 import Layout from '../components/Layout/layout'
 import {useAuth} from '../contexts/authContext'
 import {clientRedirect, serverRedirect} from '../lib/redirect'
+import { isValidUser } from '../lib/user'
 
 const Login = () => {
     const [username, updateUsername] = useState("charlotteli")
     const [password, updatePassword] = useState("charlotteli") 
     const [user, setUser] = useAuth()
 
     useEffect(() => {
-        if(user) clientRedirect('/feeds')
+        if(isValidUser(user)) clientRedirect('/feeds')
     }, [user])
 
     const handleClick = async (e) => {

styles/pages/feeds.module.scss

@@ -0,0 +1,30 @@
+.container{
+    margin-top: 1rem;
+}
+
+.profile{
+    border: 1px solid black;
+    min-height: 250px;
+    text-align: center;
+    padding: 1rem 0;
+
+    img{
+        display: block;
+        width: 50%;
+        border-radius: 50%;
+        margin: 0 auto;
+    }
+}
+
+.ads{
+    border: 1px solid black;
+    min-height: 250px;
+}
+
+.feed{
+    border: 1px solid black;
+    padding: 1rem 0.5rem;
+    &:not(:last-child){
+        margin-bottom: 1rem;
+    }
+}