Remove references to React context and replace with state where necessary

components/BottomHeader/index.tsx

@@ -1,35 +1,25 @@
 import React, { MouseEventHandler, useContext, useEffect, useState } from 'react'
-import { useCookies } from 'react-cookie'
 import { useRouter } from 'next/router'
-
+import { useSnapshot } from 'valtio'
-import AppContext from '~context/AppContext'
 
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 
 import Header from '~components/Header'
 import Button from '~components/Button'
 
+import { accountState } from '~utils/accountState'
+import { appState } from '~utils/appState'
+
 import { ButtonType } from '~utils/enums'
 import CrossIcon from '~public/icons/Cross.svg'
 
 
 const BottomHeader = () => {
-    const { editable, setEditable, authenticated, setAuthenticated } = useContext(AppContext)
+    const account = useSnapshot(accountState)
-
+    const app = useSnapshot(appState)
-    const [username, setUsername] = useState(undefined)
-    const [cookies, _, removeCookie] = useCookies(['user'])
 
     const router = useRouter()
 
-    useEffect(() => {
-        if (cookies.user) {
-            setAuthenticated(true)
-            setUsername(cookies.user.username)
-        } else {
-            setAuthenticated(false)
-        }
-    }, [cookies, setUsername, setAuthenticated])
-
     function deleteTeam(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) {
         // TODO: Implement deleting teams
         console.log("Deleting team...")
@@ -42,7 +32,7 @@ const BottomHeader = () => {
     }
 
     const rightNav = () => {
-        if (editable && router.route === '/p/[party]') {
+        if (app.party.editable && router.route === '/p/[party]') {
             return (
                 <AlertDialog.Root>
                 <AlertDialog.Trigger className="Button destructive">

components/HeaderMenu/index.tsx

@@ -1,6 +1,4 @@
-import './index.scss'
+import React from 'react'
-
-import React, { useContext } from 'react'
 import Link from 'next/link'
 
 import LoginModal from '~components/LoginModal'
@@ -12,6 +10,7 @@ import { useModal as useAboutModal } from '~utils/useModal'
 
 import AboutModal from '~components/AboutModal'
 
+import './index.scss'
 
 interface Props {
     authenticated: boolean,

components/LoginModal/index.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import { withCookies, Cookies } from 'react-cookie'
 import { createPortal } from 'react-dom'
 
-import AppContext from '~context/AppContext'
 import api from '~utils/api'
+import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
 import Fieldset from '~components/Fieldset'
@@ -12,8 +12,6 @@ import Overlay from '~components/Overlay'
 
 import './index.scss'
 
-// import New from '../../../assets/new'
-
 interface Props {
     cookies: Cookies
     close: () => void
@@ -28,8 +26,6 @@ interface ErrorMap {
 const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const LoginModal = (props: Props) => {
-    const { setAuthenticated } = useContext(AppContext)
-
     const emailInput: React.RefObject<HTMLInputElement> = React.createRef()
     const passwordInput: React.RefObject<HTMLInputElement> = React.createRef()
     const form: React.RefObject<HTMLInputElement>[] = [emailInput, passwordInput]
@@ -102,7 +98,11 @@ const LoginModal = (props: Props) => {
                     }
 
                     cookies.set('user', cookieObj, { path: '/'})
-                    setAuthenticated(true)
+                    accountState.account.authorized = true
+                    accountState.account.user = {
+                        id: cookieObj.user_id,
+                        username: cookieObj.username
+                    }
 
                     props.close()
                 }, (error) => {

components/PartySegmentedControl/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import React from 'react'
 import './index.scss'
 
 import { appState } from '~utils/appState'

components/SignupModal/index.tsx

@@ -1,9 +1,9 @@
-import React, { useContext, useState } from 'react'
+import React, { useState } from 'react'
 import { withCookies, Cookies } from 'react-cookie'
 import { createPortal } from 'react-dom'
 
-import AppContext from '~context/AppContext'
 import api from '~utils/api'
+import { accountState } from '~utils/accountState'
 
 import Button from '~components/Button'
 import Fieldset from '~components/Fieldset'
@@ -28,8 +28,6 @@ interface ErrorMap {
 const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
 
 const SignupModal = (props: Props) => {
-    const { setAuthenticated } = useContext(AppContext)
-
     const [formValid, setFormValid] = useState(false)
     const [errors, setErrors] = useState<ErrorMap>({
         username: '',
@@ -81,8 +79,12 @@ const SignupModal = (props: Props) => {
                 .then((response) => {
                     const cookies = props.cookies
                     cookies.set('user', response.data.user, { path: '/'})
-
+                    
-                    setAuthenticated(true)
+                    accountState.account.authorized = true
+                    accountState.account.user = {
+                        id: response.data.user.id,
+                        username: response.data.user.username
+                    }
 
                     props.close()
                 }, (error) => {

components/SummonGrid/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/WeaponGrid/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'
 

pages/_app.tsx

@@ -4,21 +4,15 @@ import { useState } from 'react'
 import { CookiesProvider } from 'react-cookie'
 
 import Layout from '~components/Layout'
-import AppContext from '~context/AppContext'
 
 import type { AppProps } from 'next/app'
 
 function MyApp({ Component, pageProps }: AppProps) {
-    const [authenticated, setAuthenticated] = useState(false)
-    const [editable, setEditable] = useState(false)
-
     return (
         <CookiesProvider>
-            <AppContext.Provider value={{ authenticated, setAuthenticated, editable, setEditable }}>
+            <Layout>
-                <Layout>
+                <Component {...pageProps} />
-                    <Component {...pageProps} />
+            </Layout>
-                </Layout>
-            </AppContext.Provider>
         </CookiesProvider>
     )
 }

pages/p/[party].tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React from 'react'
 import { useRouter } from 'next/router'
 
 import Party from '~components/Party'