Fix Menu authenticated status

components/Header/index.tsx

@@ -12,7 +12,7 @@ import './index.scss'
 interface Props {}
 
 const Header = (props: Props) => {
-    const { editable, setEditable, setAuthenticated } = useContext(AppContext)
+    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
 
     const [username, setUsername] = useState(undefined)
     const [cookies, _, removeCookie] = useCookies(['user'])
@@ -21,12 +21,14 @@ const Header = (props: Props) => {
 
     useEffect(() => {
         if (cookies.user) {
+            setAuthenticated(true)
             setUsername(cookies.user.username)
             console.log(`Logged in as user "${cookies.user.username}"`)
         } else {
+            setAuthenticated(false)
             console.log('You are currently not logged in.')
         }
-    }, [cookies])
+    }, [cookies, setUsername, setAuthenticated])
 
     function copyToClipboard() {
         const el = document.createElement('input')
@@ -60,8 +62,8 @@ const Header = (props: Props) => {
                 <div className="dropdown">
                     <Button type="menu">Menu</Button>
                     { (username) ? 
-                        <HeaderMenu username={username} logout={logout} /> :
-                        <HeaderMenu logout={logout} />
+                        <HeaderMenu authenticated={authenticated} username={username} logout={logout} /> :
+                        <HeaderMenu authenticated={authenticated} />
                     }
                 </div>
             </div>

components/HeaderMenu/index.tsx

@@ -6,8 +6,6 @@ import Link from 'next/link'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
 
-import AppContext from '~context/AppContext'
-
 import { useModal as useSignupModal } from '~utils/useModal'
 import { useModal as useLoginModal } from '~utils/useModal'
 import { useModal as useAboutModal } from '~utils/useModal'
@@ -16,13 +14,12 @@ import AboutModal from '~components/AboutModal'
 
 
 interface Props {
+    authenticated: boolean,
     username?: string,
-    logout: () => void
+    logout?: () => void
 }
 
 const HeaderMenu = (props: Props) => {
-    const { authenticated } = useContext(AppContext)
-
     const { open: signupOpen, openModal: openSignupModal, closeModal: closeSignupModal } = useSignupModal()
     const { open: loginOpen, openModal: openLoginModal, closeModal: closeLoginModal } = useLoginModal()
     const { open: aboutOpen, openModal: openAboutModal, closeModal: closeAboutModal } = useAboutModal()
@@ -83,7 +80,7 @@ const HeaderMenu = (props: Props) => {
         )
     }
 
-    return (authenticated) ? authItems() : unauthItems()
+    return (props.authenticated) ? authItems() : unauthItems()
 }
 
 export default HeaderMenu