granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update SummonGrid tree to use state management goodness

Browse source
This commit is contained in:
Justin Edmund 2022-02-23 02:50:17 -08:00
parent b284bf1f81
commit 99a2474cbb
4 changed files with 88 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/ExtraSummons/index.tsx
View file

@ -9,7 +9,7 @@ interface Props {
exists: boolean exists: boolean
found?: boolean found?: boolean
offset: number offset: number
onClick: (position: number) => void updateObject: (object: Character | Weapon | Summon, position: number) => void
updateUncap: (id: string, position: number, uncap: number) => void updateUncap: (id: string, position: number, uncap: number) => void
} }
@ -29,7 +29,7 @@ const ExtraSummons = (props: Props) => {
position={props.offset + i} position={props.offset + i}
unitType={1} unitType={1}
gridSummon={props.grid[props.offset + i]} gridSummon={props.grid[props.offset + i]}
onClick={() => { props.onClick(props.offset + i) }} updateObject={props.updateObject}
updateUncap={props.updateUncap} updateUncap={props.updateUncap}
/> />
</li> </li>

157
components/SummonGrid/index.tsx
View file

@ -1,19 +1,17 @@
/* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable react-hooks/exhaustive-deps */
import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react' import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
import { useCookies } from 'react-cookie' import { useCookies } from 'react-cookie'
import { useModal as useModal } from '~utils/useModal' import { useSnapshot } from 'valtio'
import { AxiosResponse } from 'axios' import { AxiosResponse } from 'axios'
import debounce from 'lodash.debounce' 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' import SummonUnit from '~components/SummonUnit'
import ExtraSummons from '~components/ExtraSummons' import ExtraSummons from '~components/ExtraSummons'
import api from '~utils/api' import api from '~utils/api'
import state from '~utils/state'
import './index.scss' import './index.scss'
// Props // Props
@ -36,55 +34,37 @@ const SummonGrid = (props: Props) => {
} : {} } : {}
// Set up state for view management // Set up state for view management
const { party, grid } = useSnapshot(state)
const [slug, setSlug] = useState()
const [found, setFound] = useState(false) const [found, setFound] = useState(false)
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
const { id, setId } = useContext(PartyContext)
const { slug, setSlug } = useContext(PartyContext)
const { editable, setEditable } = useContext(AppContext)
// Set up states for Grid data
const [summons, setSummons] = useState<GridArray<GridSummon>>({})
const [mainSummon, setMainSummon] = useState<GridSummon>()
const [friendSummon, setFriendSummon] = useState<GridSummon>()
// Set up states for Search
const { open, openModal, closeModal } = useModal()
const [itemPositionForSearch, setItemPositionForSearch] = useState(0)
// Create a temporary state to store previous weapon uncap value // Create a temporary state to store previous weapon uncap value
const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({}) const [previousUncapValues, setPreviousUncapValues] = useState<{[key: number]: number}>({})
// Create a state dictionary to store pure objects for Search
const [searchGrid, setSearchGrid] = useState<GridArray<Summon>>({})
// Fetch data from the server // Fetch data from the server
useEffect(() => { useEffect(() => {
const shortcode = (props.slug) ? props.slug : slug const shortcode = (props.slug) ? props.slug : slug
if (shortcode) fetchGrid(shortcode) if (shortcode) fetchGrid(shortcode)
else setEditable(true) else state.party.editable = true
}, [slug, props.slug]) }, [slug, props.slug])
// Initialize an array of current uncap values for each summon // Initialize an array of current uncap values for each summon
useEffect(() => { useEffect(() => {
let initialPreviousUncapValues: {[key: number]: number} = {} let initialPreviousUncapValues: {[key: number]: number} = {}
if (mainSummon) initialPreviousUncapValues[-1] = mainSummon.uncap_level
if (friendSummon) initialPreviousUncapValues[6] = friendSummon.uncap_level if (state.grid.summons.mainSummon)
Object.values(summons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level) initialPreviousUncapValues[-1] = state.grid.summons.mainSummon.uncap_level
if (state.grid.summons.friendSummon)
initialPreviousUncapValues[6] = state.grid.summons.friendSummon.uncap_level
Object.values(state.grid.summons.allSummons).map(o => initialPreviousUncapValues[o.position] = o.uncap_level)
setPreviousUncapValues(initialPreviousUncapValues) setPreviousUncapValues(initialPreviousUncapValues)
}, [summons, mainSummon, friendSummon]) }, [state.grid.summons.mainSummon, state.grid.summons.friendSummon, state.grid.summons.allSummons])
// Update search grid whenever any summon is updated
useEffect(() => {
let newSearchGrid = Object.values(summons).map((o) => o.summon)
if (mainSummon)
newSearchGrid.unshift(mainSummon.summon)
if (friendSummon)
newSearchGrid.unshift(friendSummon.summon)
setSearchGrid(newSearchGrid)
}, [summons, mainSummon, friendSummon])
// Methods: Fetching an object from the server // Methods: Fetching an object from the server
async function fetchGrid(shortcode: string) { async function fetchGrid(shortcode: string) {
@ -102,11 +82,12 @@ const SummonGrid = (props: Props) => {
const loggedInUser = (cookies.user) ? cookies.user.user_id : '' const loggedInUser = (cookies.user) ? cookies.user.user_id : ''
if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) { if (partyUser != undefined && loggedInUser != undefined && partyUser === loggedInUser) {
setEditable(true) state.party.editable = true
} }
// Store the important party and state-keeping values // Store the important party and state-keeping values
setId(party.id) state.party.id = party.id
setFound(true) setFound(true)
setLoading(false) setLoading(false)
@ -126,42 +107,34 @@ const SummonGrid = (props: Props) => {
} }
function populateSummons(list: [GridSummon]) { function populateSummons(list: [GridSummon]) {
let summons: GridArray<GridSummon> = {}
list.forEach((object: GridSummon) => { list.forEach((object: GridSummon) => {
if (object.main) if (object.main)
setMainSummon(object) state.grid.summons.mainSummon = object
else if (object.friend) else if (object.friend)
setFriendSummon(object) state.grid.summons.friendSummon = object
else if (!object.main && !object.friend && object.position != null) else if (!object.main && !object.friend && object.position != null)
summons[object.position] = object state.grid.summons.allSummons[object.position] = object
}) })
setSummons(summons)
} }
// Methods: Adding an object from search // Methods: Adding an object from search
function openSearchModal(position: number) {
setItemPositionForSearch(position)
openModal()
}
function receiveSummonFromSearch(object: Character | Weapon | Summon, position: number) { function receiveSummonFromSearch(object: Character | Weapon | Summon, position: number) {
const summon = object as Summon const summon = object as Summon
if (!id) { if (!party.id) {
props.createParty() props.createParty()
.then(response => { .then(response => {
const party = response.data.party const party = response.data.party
setId(party.id) state.party.id = party.id
setSlug(party.shortcode) setSlug(party.shortcode)
if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`) if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`)
saveSummon(party.id, summon, position) saveSummon(party.id, summon, position)
.then(response => storeGridSummon(response.data.grid_summon)) .then(response => storeGridSummon(response.data.grid_summon))
}) })
} else { } else {
saveSummon(id, summon, position) saveSummon(party.id, summon, position)
.then(response => storeGridSummon(response.data.grid_summon)) .then(response => storeGridSummon(response.data.grid_summon))
} }
} }
@ -184,16 +157,12 @@ const SummonGrid = (props: Props) => {
} }
function storeGridSummon(gridSummon: GridSummon) { function storeGridSummon(gridSummon: GridSummon) {
if (gridSummon.position == -1) { if (gridSummon.position == -1)
setMainSummon(gridSummon) state.grid.summons.mainSummon = gridSummon
} else if (gridSummon.position == 6) { else if (gridSummon.position == 6)
setFriendSummon(gridSummon) state.grid.summons.friendSummon = gridSummon
} else { else
// Store the grid unit at the correct position state.grid.summons.allSummons[gridSummon.position] = gridSummon
let newSummons = Object.assign({}, summons)
newSummons[gridSummon.position] = gridSummon
setSummons(newSummons)
}
} }
// Methods: Updating uncap level // Methods: Updating uncap level
@ -218,40 +187,41 @@ const SummonGrid = (props: Props) => {
} }
} }
const initiateUncapUpdate = useCallback( function initiateUncapUpdate(id: string, position: number, uncapLevel: number) {
(id: string, position: number, uncapLevel: number) => {
memoizeAction(id, position, uncapLevel) memoizeAction(id, position, uncapLevel)
// Optimistically update UI // Optimistically update UI
updateUncapLevel(position, uncapLevel) updateUncapLevel(position, uncapLevel)
}, [previousUncapValues, summons] }
)
const memoizeAction = useCallback( const memoizeAction = useCallback(
(id: string, position: number, uncapLevel: number) => { (id: string, position: number, uncapLevel: number) => {
debouncedAction(id, position, uncapLevel) debouncedAction(id, position, uncapLevel)
}, [summons, mainSummon, friendSummon] }, [props, previousUncapValues]
) )
const debouncedAction = useMemo(() => const debouncedAction = useMemo(() =>
debounce((id, position, number) => { debounce((id, position, number) => {
saveUncap(id, position, number) saveUncap(id, position, number)
}, 500), [summons, mainSummon, friendSummon, saveUncap] }, 500), [props, saveUncap]
) )
const updateUncapLevel = (position: number, uncapLevel: number) => { const updateUncapLevel = (position: number, uncapLevel: number) => {
let newSummons = Object.assign({}, summons) if (state.grid.summons.mainSummon && position == -1)
newSummons[position].uncap_level = uncapLevel state.grid.summons.mainSummon.uncap_level = uncapLevel
setSummons(newSummons) else if (state.grid.summons.friendSummon && position == 6)
state.grid.summons.friendSummon.uncap_level = uncapLevel
else
state.grid.summons.allSummons[position].uncap_level = uncapLevel
} }
function storePreviousUncapValue(position: number) { function storePreviousUncapValue(position: number) {
// Save the current value in case of an unexpected result // Save the current value in case of an unexpected result
let newPreviousValues = {...previousUncapValues} let newPreviousValues = {...previousUncapValues}
if (mainSummon && position == -1) newPreviousValues[position] = mainSummon.uncap_level if (state.grid.summons.mainSummon && position == -1) newPreviousValues[position] = state.grid.summons.mainSummon.uncap_level
else if (friendSummon && position == 6) newPreviousValues[position] = friendSummon.uncap_level else if (state.grid.summons.friendSummon && position == 6) newPreviousValues[position] = state.grid.summons.friendSummon.uncap_level
else newPreviousValues[position] = summons[position].uncap_level else newPreviousValues[position] = state.grid.summons.allSummons[position].uncap_level
setPreviousUncapValues(newPreviousValues) setPreviousUncapValues(newPreviousValues)
} }
@ -261,12 +231,12 @@ const SummonGrid = (props: Props) => {
<div className="LabeledUnit"> <div className="LabeledUnit">
<div className="Label">Main Summon</div> <div className="Label">Main Summon</div>
<SummonUnit <SummonUnit
gridSummon={mainSummon} gridSummon={grid.summons.mainSummon}
editable={editable} editable={party.editable}
key="grid_main_summon" key="grid_main_summon"
position={-1} position={-1}
unitType={0} unitType={0}
onClick={() => { openSearchModal(-1) }} updateObject={receiveSummonFromSearch}
updateUncap={initiateUncapUpdate} updateUncap={initiateUncapUpdate}
/> />
</div> </div>
@ -276,12 +246,12 @@ const SummonGrid = (props: Props) => {
<div className="LabeledUnit"> <div className="LabeledUnit">
<div className="Label">Friend Summon</div> <div className="Label">Friend Summon</div>
<SummonUnit <SummonUnit
gridSummon={friendSummon} gridSummon={grid.summons.friendSummon}
editable={editable} editable={party.editable}
key="grid_friend_summon" key="grid_friend_summon"
position={6} position={6}
unitType={2} unitType={2}
onClick={() => { openSearchModal(6) }} updateObject={receiveSummonFromSearch}
updateUncap={initiateUncapUpdate} updateUncap={initiateUncapUpdate}
/> />
</div> </div>
@ -293,11 +263,11 @@ const SummonGrid = (props: Props) => {
{Array.from(Array(numSummons)).map((x, i) => { {Array.from(Array(numSummons)).map((x, i) => {
return (<li key={`grid_unit_${i}`} > return (<li key={`grid_unit_${i}`} >
<SummonUnit <SummonUnit
gridSummon={summons[i]} gridSummon={grid.summons.allSummons[i]}
editable={editable} editable={party.editable}
position={i} position={i}
unitType={1} unitType={1}
onClick={() => { openSearchModal(i) }} updateObject={receiveSummonFromSearch}
updateUncap={initiateUncapUpdate} updateUncap={initiateUncapUpdate}
/> />
</li>) </li>)
@ -307,11 +277,11 @@ const SummonGrid = (props: Props) => {
) )
const subAuraSummonElement = ( const subAuraSummonElement = (
<ExtraSummons <ExtraSummons
grid={summons} grid={grid.summons.allSummons}
editable={editable} editable={party.editable}
exists={false} exists={false}
offset={numSummons} offset={numSummons}
onClick={openSearchModal} updateObject={receiveSummonFromSearch}
updateUncap={initiateUncapUpdate} updateUncap={initiateUncapUpdate}
/> />
) )
@ -324,17 +294,6 @@ const SummonGrid = (props: Props) => {
</div> </div>
{ subAuraSummonElement } { subAuraSummonElement }
{open ? (
<SearchModal
grid={searchGrid}
close={closeModal}
send={receiveSummonFromSearch}
fromPosition={itemPositionForSearch}
object="summons"
placeholderText="Search for a summon..."
/>
) : null}
</div> </div>
) )
} }

2
components/SummonResult/index.scss
View file

@ -12,7 +12,7 @@
background: #e9e9e9; background: #e9e9e9;
border-radius: 6px; border-radius: 6px;
display: inline-block; display: inline-block;
height: 72px; height: auto;
width: 120px; width: 120px;
} }

25
components/SummonUnit/index.tsx
View file

@ -1,18 +1,19 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import classnames from 'classnames' import classnames from 'classnames'
import SearchModal from '~components/SearchModal'
import UncapIndicator from '~components/UncapIndicator' import UncapIndicator from '~components/UncapIndicator'
import PlusIcon from '~public/icons/Add.svg' import PlusIcon from '~public/icons/Add.svg'
import './index.scss' import './index.scss'
interface Props { interface Props {
onClick: () => void
updateUncap: (id: string, position: number, uncap: number) => void
gridSummon: GridSummon | undefined gridSummon: GridSummon | undefined
unitType: 0 | 1 | 2
position: number position: number
editable: boolean editable: boolean
unitType: 0 | 1 | 2 updateObject: (object: Character | Weapon | Summon, position: number) => void
updateUncap: (id: string, position: number, uncap: number) => void
} }
const SummonUnit = (props: Props) => { const SummonUnit = (props: Props) => {
@ -57,19 +58,27 @@ const SummonUnit = (props: Props) => {
return ( return (
<div> <div>
<div className={classes}> <div className={classes}>
<div className="SummonImage" onClick={ (props.editable) ? props.onClick : () => {} }> <SearchModal
placeholderText="Search for a summon..."
fromPosition={props.position}
object="summons"
send={props.updateObject}>
<div className="SummonImage">
<img alt={summon?.name.en} className="grid_image" src={imageUrl} /> <img alt={summon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' } { (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div> </div>
</SearchModal>
{ (gridSummon) ? { (gridSummon) ?
<UncapIndicator <UncapIndicator
type="summon" type="summon"
ulb={summon?.uncap.ulb || false} ulb={gridSummon.summon.uncap.ulb || false}
flb={summon?.uncap.flb || false} flb={gridSummon.summon.uncap.flb || false}
uncapLevel={gridSummon?.uncap_level} uncapLevel={gridSummon.uncap_level}
updateUncap={passUncapData} updateUncap={passUncapData}
special={false} special={false}
/> : '' } /> : ''
}
<h3 className="SummonName">{summon?.name.en}</h3> <h3 className="SummonName">{summon?.name.en}</h3>
</div> </div>
</div> </div>