Add id to context so state can be shared across tabs
This commit is contained in:
parent
789104cb76
commit
2bf1c75364
5 changed files with 29 additions and 24 deletions
|
|
@ -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 { setEditable: setEditableContext } = useContext(AppContext)
|
||||
const { id, setId } = useContext(PartyContext)
|
||||
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))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 { setEditable: setEditableContext } = useContext(AppContext)
|
||||
const { editable, setEditable } = 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))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in a new issue