From ecfc62900d0eb951e4a0a6efe096983ff7d27191 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Wed, 2 Feb 2022 19:07:10 -0800 Subject: [PATCH] Trading working uncap indicators for working party creation We start storing the party ID here so that we know (and can come to know) when we are working with an existing party. Updating the weapon grid based on `weapons` the state vs `props.weapons` makes saving items to a party work properly. Unfortunately, it sends us back to square one with debouncing the uncap indicators. --- components/CharacterGrid/index.tsx | 22 ++++++++++++++++------ components/SummonGrid/index.tsx | 19 ++++++++++++++----- components/WeaponGrid/index.tsx | 14 ++++++++++---- 3 files changed, 40 insertions(+), 15 deletions(-) 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) }