Final updates removing context and replacing with state

components/BottomHeader/index.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useContext, useEffect, useState } from 'react'
+import React from 'react'
 import { useRouter } from 'next/router'
 import { useSnapshot } from 'valtio'
 

components/CharacterGrid/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useCookies } from 'react-cookie'
 import { useSnapshot } from 'valtio'
 

components/TopHeader/index.tsx

@@ -1,35 +1,22 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useEffect } from 'react'
 import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
 import clonedeep from 'lodash.clonedeep'
+import { useSnapshot } from 'valtio'
 
-import AppContext from '~context/AppContext'
+import { accountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
 
 import Header from '~components/Header'
 import Button from '~components/Button'
 import HeaderMenu from '~components/HeaderMenu'
 
-
 const TopHeader = () => {
-    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
-
-    const [username, setUsername] = useState(undefined)
     const [cookies, _, removeCookie] = useCookies(['user'])
 
+    const accountSnap = useSnapshot(accountState)
     const router = useRouter()
 
-    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, setUsername, setAuthenticated])
-
     function copyToClipboard() {
         const el = document.createElement('input')
         el.value = window.location.href
@@ -58,8 +45,8 @@ const TopHeader = () => {
     function logout() {
         removeCookie('user')
 
-        setAuthenticated(false)
-        if (editable) setEditable(false)
+        accountState.authorized = false
+        appState.party.editable = false
 
         // TODO: How can we log out without navigating to root
         router.push('/')
@@ -70,9 +57,9 @@ const TopHeader = () => {
         return (
             <div className="dropdown">
                 <Button icon="menu">Menu</Button>
-                { (username) ? 
-                    <HeaderMenu authenticated={authenticated} username={username} logout={logout} /> :
-                    <HeaderMenu authenticated={authenticated} />
+                { (accountSnap.account.user) ? 
+                    <HeaderMenu authenticated={accountSnap.account.authorized} username={accountSnap.account.user.username} logout={logout} /> :
+                    <HeaderMenu authenticated={accountSnap.account.authorized} />
                 }
             </div>
         )