Refactored UnauthMenu into HeaderMenu

Header also takes care of managing logged in state via cookies

src/components/Header/Header.tsx

@@ -1,10 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { RouteComponentProps, useLocation, withRouter } from 'react-router-dom'
 import { useCookies } from 'react-cookie'
-import history from '~utils/history'
 
 import Button from '~components/Button/Button'
-import UnauthMenu from '~components/UnauthMenu/UnauthMenu'
+import HeaderMenu from '~components/HeaderMenu/HeaderMenu'
 
 import './Header.css'
 
@@ -12,9 +11,16 @@ interface Props {}
 interface HeaderProps extends RouteComponentProps<Props> {}
 
 const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
-    const [cookies, setCookie] = useCookies(['user'])
+    const [username, setUsername] = useState(undefined)
+    const [cookies, setCookie, removeCookie] = useCookies(['user'])
     let location = useLocation()
 
+    useEffect(() => {
+        if (cookies.user) {
+            setUsername(cookies.user.username)
+        }
+    }, [])
+
     function copyToClipboard() {
         const el = document.createElement('input')
         el.value = window.location.href
@@ -35,6 +41,16 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
         }
     }
 
+    function route(pathname: string) {
+        props.history.push(pathname)
+    }
+
+    function logout() {
+        removeCookie('user')
+        window.history.replaceState(null, `Grid Tool`, `/`)
+        props.history.go(0)
+    }
+
     if (cookies.user != null) {
         console.log(`Logged in as user "${cookies.user.username}"`)
     }
@@ -44,7 +60,7 @@ const Header: React.FC<HeaderProps> = (props: HeaderProps) => {
             <div className="left">
                 <div className="dropdown">
                     <Button type="menu">Menu</Button>
-                    <UnauthMenu />
+                    <HeaderMenu username={username} navigate={route} logout={logout} />
                 </div>
             </div>
             <div className="push" />

src/components/HeaderMenu/HeaderMenu.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import './HeaderMenu.css'
+
+import LoginModal from '~components/LoginModal/LoginModal'
+import SignupModal from '~components/SignupModal/SignupModal'
+
+import { useModal as useSignupModal } from '~utils/useModal'
+import { useModal as useLoginModal } from '~utils/useModal'
+import { Route } from 'react-router'
+
+
+interface Props {
+    username?: string
+    navigate: (pathname: string) => void
+    logout: () => void
+}
+
+const HeaderMenu = (props: Props) => {
+    const { open: signupOpen, openModal: openSignupModal, closeModal: closeSignupModal } = useSignupModal()
+    const { open: loginOpen, openModal: openLoginModal, closeModal: closeLoginModal } = useLoginModal()
+
+    function authItems() {
+        return (
+            <ul className="Menu auth">
+                <div className="MenuGroup">
+                    <li className="MenuItem" onClick={ () => props.username ? props.navigate(props.username) : '' }>My Parties</li>
+                </div>
+                <div className="MenuGroup">
+                    <li className="MenuItem" onClick={ () => props.navigate('about') }>About</li>
+                    <li className="MenuItem" onClick={ () => props.navigate('guides') }>Guides</li>
+                </div>
+                <div className="MenuGroup">
+                    <li className="MenuItem" onClick={props.logout}>Logout</li>
+                </div>
+            </ul>
+        )
+    }
+
+    function unauthItems() {
+        return (
+            <ul className="Menu unauth">
+                <div className="MenuGroup">
+                    <li className="MenuItem" onClick={ () => props.navigate('about') }>About</li>
+                    <li className="MenuItem" onClick={ () => props.navigate('guides') }>Guides</li>
+                </div>
+                <div className="MenuGroup">
+                    <li className="MenuItem" onClick={openLoginModal}>Log in</li>
+                    {loginOpen ? (
+                        <LoginModal 
+                            close={closeLoginModal}
+                        />
+                    ) : null}
+                    <li className="MenuItem" onClick={openSignupModal}>Sign up</li>
+                    {signupOpen ? (
+                        <SignupModal 
+                            close={closeSignupModal}
+                        />
+                    ) : null}
+                </div>
+            </ul>
+        )
+    }
+
+    return (props.username !== undefined) ? authItems() : unauthItems()
+}
+
+export default HeaderMenu

src/components/UnauthMenu/UnauthMenu.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import './UnauthMenu.css'
-
-import LoginModal from '~components/LoginModal/LoginModal'
-import SignupModal from '~components/SignupModal/SignupModal'
-
-import { useModal as useSignupModal } from '~utils/useModal'
-import { useModal as useLoginModal } from '~utils/useModal'
-
-function UnauthMenu() {
-    const { open: signupOpen, openModal: openSignupModal, closeModal: closeSignupModal } = useSignupModal()
-    const { open: loginOpen, openModal: openLoginModal, closeModal: closeLoginModal } = useLoginModal()
-
-    return (
-        <ul className="Menu">
-            <div className="MenuGroup">
-                <li className="MenuItem">About</li>
-                <li className="MenuItem">Guides</li>
-            </div>
-            <div className="MenuGroup">
-                <li className="MenuItem" onClick={openLoginModal}>Log in</li>
-                {loginOpen ? (
-                    <LoginModal 
-                        close={closeLoginModal}
-                    />
-                ) : null}
-                <li className="MenuItem" onClick={openSignupModal}>Sign up</li>
-                {signupOpen ? (
-                    <SignupModal 
-                        close={closeSignupModal}
-                    />
-                ) : null}
-            </div>
-        </ul>
-    )
-}
-
-export default UnauthMenu
-
-// if (this.state.loggedIn) {
-//     return (
-//         <ul className="Menu">
-//             <div className="MenuGroup">
-//                 <li className="MenuItem">My Parties</li>
-//                 <li className="MenuItem">Guides</li>
-//                 <li className="MenuItem">About</li>
-//             </div>
-//             <div className="MenuGroup">
-//                 <li className="MenuItem">Log out</li>
-//             </div>
-//         </ul>
-//     )
-// } else {