Add id to context so state can be shared across tabs

components/CharacterGrid/index.tsx

@@ -7,6 +7,7 @@ import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
 import AppContext from '~context/AppContext'
+import PartyContext from '~context/PartyContext'
 
 import CharacterUnit from '~components/CharacterUnit'
 import SearchModal from '~components/SearchModal'
@@ -33,14 +34,11 @@ const CharacterGrid = (props: Props) => {
         }
     } : {}
 
-    // Set up state for party
-    const [partyId, setPartyId] = useState('')
-
     // Set up state for view management
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
-    const [editable, setEditable] = useState(false)
+    const { id, setId } = useContext(PartyContext)
-    const { setEditable: setEditableContext } = useContext(AppContext)
+    const { editable, setEditable } = useContext(AppContext)
 
     // Set up states for Grid data
     const [characters, setCharacters] = useState<GridArray<GridCharacter>>({})
@@ -58,6 +56,7 @@ const CharacterGrid = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         if (props.slug) fetchGrid(props.slug)
+        else setEditable(true)
     }, [])
 
     // Initialize an array of current uncap values for each characters
@@ -90,11 +89,10 @@ const CharacterGrid = (props: Props) => {
 
         if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
             setEditable(true)
-            setEditableContext(true)
         }
         
         // Store the important party and state-keeping values
-        setPartyId(party.id)
+        setId(party.id)
         setFound(true)
         setLoading(false)
 
@@ -134,7 +132,7 @@ const CharacterGrid = (props: Props) => {
     function receiveCharacterFromSearch(object: Character | Weapon | Summon, position: number) {
         const character = object as Character
 
-        if (!partyId) {
+        if (!id) {
             props.createParty()
                 .then(response => {
                     const party = response.data.party
@@ -143,7 +141,7 @@ const CharacterGrid = (props: Props) => {
                         .then(response => storeGridCharacter(response.data.grid_character))
                 })
         } else {
-            saveCharacter(partyId, character, position)
+            saveCharacter(id, character, position)
                 .then(response => storeGridCharacter(response.data.grid_character))
         }
     }

components/Party/index.tsx

@@ -38,6 +38,7 @@ const Party = (props: Props) => {
 
     // Set up states
     const [currentTab, setCurrentTab] = useState<GridType>(GridType.Weapon)
+    const [id, setId] = useState('')
     const [element, setElement] = useState<TeamElement>(TeamElement.Any)
     const [editable, setEditable] = useState(false)
     const [hasExtra, setHasExtra] = useState(false)
@@ -126,7 +127,7 @@ const Party = (props: Props) => {
 
     return (
         <div>
-            <PartyContext.Provider value={{ element, setElement, editable, setEditable, hasExtra, setHasExtra }}>
+            <PartyContext.Provider value={{ id, setId, element, setElement, editable, setEditable, hasExtra, setHasExtra }}>
                 { navigation }
                 { currentGrid() }
             </PartyContext.Provider>

components/SummonGrid/index.tsx

@@ -7,6 +7,7 @@ import { AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
 
 import AppContext from '~context/AppContext'
+import PartyContext from '~context/PartyContext'
 
 import SearchModal from '~components/SearchModal'
 import SummonUnit from '~components/SummonUnit'
@@ -35,13 +36,13 @@ const SummonGrid = (props: Props) => {
     } : {}
 
     // Set up state for party
-    const [partyId, setPartyId] = useState('')
+    const { id, setId } = useContext(PartyContext)
+
 
     // Set up state for view management
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
-    const [editable, setEditable] = useState(false)
+    const { editable, setEditable } = useContext(AppContext)
-    const { setEditable: setEditableContext } = useContext(AppContext)
 
     // Set up states for Grid data
     const [summons, setSummons] = useState<GridArray<GridSummon>>({})
@@ -61,6 +62,7 @@ const SummonGrid = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         if (props.slug) fetchGrid(props.slug)
+        else setEditable(true)
     }, [])
 
     // Initialize an array of current uncap values for each summon
@@ -102,11 +104,10 @@ const SummonGrid = (props: Props) => {
 
         if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
             setEditable(true)
-            setEditableContext(true)
         }
         
         // Store the important party and state-keeping values
-        setPartyId(party.id)
+        setId(party.id)
         setFound(true)
         setLoading(false)
 
@@ -149,7 +150,7 @@ const SummonGrid = (props: Props) => {
     function receiveSummonFromSearch(object: Character | Weapon | Summon, position: number) {
         const summon = object as Summon
 
-        if (!partyId) {
+        if (!id) {
             props.createParty()
                 .then(response => {
                     const party = response.data.party
@@ -158,7 +159,7 @@ const SummonGrid = (props: Props) => {
                         .then(response => storeGridSummon(response.data.grid_summon))
                 })
         } else {
-            saveSummon(partyId, summon, position)
+            saveSummon(id, summon, position)
                 .then(response => storeGridSummon(response.data.grid_summon))
         }
     }

components/WeaponGrid/index.tsx

@@ -15,6 +15,7 @@ import ExtraWeapons from '~components/ExtraWeapons'
 
 import api from '~utils/api'
 import './index.scss'
+import Party from '~components/Party'
 
 // Props
 interface Props {
@@ -35,15 +36,13 @@ const WeaponGrid = (props: Props) => {
         }
     } : {}
 
-    // Set up state for party
-    const [partyId, setPartyId] = useState('')
-
     // Set up state for view management
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     
     // Set up the party context
     const { setEditable: setAppEditable } = useContext(AppContext)
+    const { id, setId } = useContext(PartyContext)
     const { editable, setEditable } = useContext(PartyContext)
     const { hasExtra, setHasExtra } = useContext(PartyContext)
     const { setElement } = useContext(PartyContext)
@@ -65,6 +64,10 @@ const WeaponGrid = (props: Props) => {
     // Fetch data from the server
     useEffect(() => {
         if (props.slug) fetchGrid(props.slug)
+        else {
+            setEditable(true)
+            setAppEditable(true)
+        }
     }, [props.slug])
 
     // Initialize an array of current uncap values for each weapon
@@ -106,7 +109,7 @@ const WeaponGrid = (props: Props) => {
         }
         
         // Store the important party and state-keeping values
-        setPartyId(party.id)
+        setId(party.id)
         setHasExtra(party.is_extra)
         setFound(true)
         setLoading(false)
@@ -151,18 +154,18 @@ const WeaponGrid = (props: Props) => {
         const weapon = object as Weapon
         setElement(weapon.element)
 
-        if (!partyId) {
+        if (!id) {
             props.createParty(hasExtra)
                 .then(response => {
                     const party = response.data.party
-                    setPartyId(party.id)
+                    setId(party.id)
 
                     if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
                     saveWeapon(party.id, weapon, position)
                         .then(response => storeGridWeapon(response.data.grid_weapon))
                 })
         } else {
-            saveWeapon(partyId, weapon, position)
+            saveWeapon(id, weapon, position)
                 .then(response => storeGridWeapon(response.data.grid_weapon))
         }
     }

context/PartyContext.tsx

@@ -2,6 +2,8 @@ import { createContext } from 'react'
 import { TeamElement } from '~utils/enums'
 
 const PartyContext = createContext({
+    id: '',
+    setId: (id: string) => {},
     element: TeamElement.Any,
     setElement: (element: TeamElement) => {},
     editable: false,