From a21a66c8aee7d1e907de32fa6a978e9f08917f47 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 3 Feb 2022 19:46:26 -0800
Subject: [PATCH] Move PartyContext to Party component

---
 components/Party/index.tsx | 11 +++++++++--
 pages/_app.tsx             | 11 +++--------
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/components/Party/index.tsx b/components/Party/index.tsx
index 99a5ab17..f8c16ecc 100644
--- a/components/Party/index.tsx
+++ b/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>
     )
 }
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 5bee096a..0ad5f753 100644
--- a/pages/_app.tsx
+++ b/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>
     )