diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index ba05648b..84ed5adb 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -41,6 +41,9 @@ const CharacterGrid = (props: Props) => { } } : {} + // Set up state for party + const [partyId, setPartyId] = useState('') + // Set up states for Grid data const [characters, setCharacters] = useState>({}) @@ -56,6 +59,7 @@ const CharacterGrid = (props: Props) => { // Set states from props useEffect(() => { + setPartyId(props.partyId || '') setCharacters(props.characters || {}) }, [props]) @@ -74,7 +78,7 @@ const CharacterGrid = (props: Props) => { function receiveCharacterFromSearch(object: Character | Weapon | Summon, position: number) { const character = object as Character - if (!props.partyId) { + if (!partyId) { props.createParty() .then(response => { const party = response.data.party @@ -83,7 +87,7 @@ const CharacterGrid = (props: Props) => { .then(response => storeGridCharacter(response.data.grid_character)) }) } else { - saveCharacter(props.partyId, character, position) + saveCharacter(partyId, character, position) .then(response => storeGridCharacter(response.data.grid_character)) } } @@ -147,7 +151,7 @@ const CharacterGrid = (props: Props) => { const initiateUncapUpdate = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel) + memoizeAction(id, position, uncapLevel) // Save the current value in case of an unexpected result let newPreviousValues = {...previousUncapValues} @@ -159,14 +163,20 @@ const CharacterGrid = (props: Props) => { }, [previousUncapValues, characters] ) + const memoizeAction = useCallback( + (id: string, position: number, uncapLevel: number) => { + debouncedAction(id, position, uncapLevel) + }, [props] + ) + const debouncedAction = useMemo(() => - debounce((id, position, number) => { + debounce((id, position, number) => { saveUncap(id, position, number) - }, 1000), [saveUncap] + }, 500), [props, saveUncap] ) const updateUncapLevel = (position: number, uncapLevel: number) => { - let newCharacters = Object.assign({}, characters) + let newCharacters = {...characters} newCharacters[position].uncap_level = uncapLevel setCharacters(newCharacters) } diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx index bce5de33..3533bed1 100644 --- a/components/SummonGrid/index.tsx +++ b/components/SummonGrid/index.tsx @@ -44,6 +44,9 @@ const SummonGrid = (props: Props) => { } } : {} + // Set up state for party + const [partyId, setPartyId] = useState('') + // Set up states for Grid data const [summons, setSummons] = useState>({}) const [mainSummon, setMainSummon] = useState() @@ -88,7 +91,7 @@ const SummonGrid = (props: Props) => { function receiveSummonFromSearch(object: Character | Weapon | Summon, position: number) { const summon = object as Summon - if (!props.partyId) { + if (!partyId) { props.createParty() .then(response => { const party = response.data.party @@ -97,7 +100,7 @@ const SummonGrid = (props: Props) => { .then(response => storeGridSummon(response.data.grid_summon)) }) } else { - saveSummon(props.partyId, summon, position) + saveSummon(partyId, summon, position) .then(response => storeGridSummon(response.data.grid_summon)) } } @@ -155,7 +158,7 @@ const SummonGrid = (props: Props) => { const initiateUncapUpdate = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel) + memoizeAction(id, position, uncapLevel) // Save the current value in case of an unexpected result let newPreviousValues = {...previousUncapValues} @@ -167,10 +170,16 @@ const SummonGrid = (props: Props) => { }, [previousUncapValues, summons] ) + const memoizeAction = useCallback( + (id: string, position: number, uncapLevel: number) => { + debouncedAction(id, position, uncapLevel) + }, [props] + ) + const debouncedAction = useMemo(() => - debounce((id, position, number) => { + debounce((id, position, number) => { saveUncap(id, position, number) - }, 1000), [saveUncap] + }, 500), [props, saveUncap] ) const updateUncapLevel = (position: number, uncapLevel: number) => { diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index 1af8b717..ba9fec97 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -44,6 +44,9 @@ const WeaponGrid = (props: Props) => { } } : {} + // Set up state for party + const [partyId, setPartyId] = useState('') + // Set up states for Grid data const [weapons, setWeapons] = useState>({}) const [mainWeapon, setMainWeapon] = useState() @@ -60,6 +63,7 @@ const WeaponGrid = (props: Props) => { // Set states from props useEffect(() => { + setPartyId(props.partyId || '') setWeapons(props.weapons || {}) setMainWeapon(props.mainhand) }, [props]) @@ -83,16 +87,18 @@ const WeaponGrid = (props: Props) => { function receiveWeaponFromSearch(object: Character | Weapon | Summon, position: number) { const weapon = object as Weapon - if (!props.partyId) { + if (!partyId) { props.createParty() .then(response => { const party = response.data.party + setPartyId(party.id) + if (props.pushHistory) props.pushHistory(`/p/${party.shortcode}`) saveWeapon(party.id, weapon, position) .then(response => storeGridWeapon(response.data.grid_weapon)) }) } else { - saveWeapon(props.partyId, weapon, position) + saveWeapon(partyId, weapon, position) .then(response => storeGridWeapon(response.data.grid_weapon)) } } @@ -118,7 +124,7 @@ const WeaponGrid = (props: Props) => { setMainWeapon(gridWeapon) } else { // Store the grid unit at the correct position - let newWeapons = Object.assign({}, props.weapons) + let newWeapons = Object.assign({}, weapons) newWeapons[gridWeapon.position] = gridWeapon setWeapons(newWeapons) } @@ -175,7 +181,7 @@ const WeaponGrid = (props: Props) => { mainWeapon.uncap_level = uncapLevel setMainWeapon(mainWeapon) } else { - let newWeapons = Object.assign({}, props.weapons) + let newWeapons = Object.assign({}, weapons) newWeapons[position].uncap_level = uncapLevel setWeapons(newWeapons) }