Move PartyContext to Party component

components/Party/index.tsx

@@ -1,12 +1,16 @@
 import React, { useEffect, useState } from 'react'
 import { useCookies } from 'react-cookie'
 
+import PartyContext from '~context/PartyContext'
+
 import PartySegmentedControl from '~components/PartySegmentedControl'
 import WeaponGrid from '~components/WeaponGrid'
 import SummonGrid from '~components/SummonGrid'
 import CharacterGrid from '~components/CharacterGrid'
 
 import api from '~utils/api'
+import { TeamElement } from '~utils/enums'
+
 import './index.scss'
 
 // GridType
@@ -43,6 +47,7 @@ const Party = (props: Props) => {
     // Set up states
     const [extra, setExtra] = useState<boolean>(false)
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
+    const [element, setElement] = useState<TeamElement>(TeamElement.Any)
 
     // Set states from props
     useEffect(() => {
@@ -145,8 +150,10 @@ const Party = (props: Props) => {
 
     return (
         <div>
-            { navigation }
-            { currentGrid() }
+            <PartyContext.Provider value={{ element, setElement }}>
+                { navigation }
+                { currentGrid() }
+            </PartyContext.Provider>
         </div>
     )
 }

pages/_app.tsx

@@ -5,24 +5,19 @@ import { CookiesProvider } from 'react-cookie'
 
 import Layout from '~components/Layout'
 import AppContext from '~context/AppContext'
-import PartyContext from '~context/PartyContext'
 
 import type { AppProps } from 'next/app'
-import { TeamElement } from '~utils/enums'
 
 function MyApp({ Component, pageProps }: AppProps) {
     const [authenticated, setAuthenticated] = useState(false)
     const [editable, setEditable] = useState(false)
-    const [element, setElement] = useState<TeamElement>(TeamElement.Any)
 
     return (
         <CookiesProvider>
             <AppContext.Provider value={{ authenticated, setAuthenticated, editable, setEditable }}>
-                <PartyContext.Provider value={{ element, setElement }}>
-                    <Layout>
-                        <Component {...pageProps} />
-                    </Layout>
-                </PartyContext.Provider>
+                <Layout>
+                    <Component {...pageProps} />
+                </Layout>
             </AppContext.Provider>
         </CookiesProvider>
     )