From d7e39f39127861caf476f4804e88ea76053dd1f4 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 22 Jan 2023 14:41:09 -0800 Subject: [PATCH] Send transcendence stage back to server --- components/CharacterGrid/index.tsx | 97 ++++++++++++++++++++++++++++-- components/CharacterUnit/index.tsx | 12 +++- 2 files changed, 103 insertions(+), 6 deletions(-) diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index 3532caf0..f6757f15 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -62,6 +62,11 @@ const CharacterGrid = (props: Props) => { [key: number]: number | undefined }>({}) + const [previousTranscendenceStages, setPreviousTranscendenceStages] = + useState<{ + [key: number]: number | undefined + }>({}) + // Set the editable flag only on first load useEffect(() => { // If user is logged in and matches @@ -298,21 +303,21 @@ const CharacterGrid = (props: Props) => { accountState.account.user && party.user.id === accountState.account.user.id ) { - memoizeAction(id, position, uncapLevel) + memoizeUncapAction(id, position, uncapLevel) // Optimistically update UI updateUncapLevel(position, uncapLevel) } } - const memoizeAction = useCallback( + const memoizeUncapAction = useCallback( (id: string, position: number, uncapLevel: number) => { - debouncedAction(id, position, uncapLevel) + debouncedUncapAction(id, position, uncapLevel) }, [props, previousUncapValues] ) - const debouncedAction = useMemo( + const debouncedUncapAction = useMemo( () => debounce((id, position, number) => { saveUncap(id, position, number) @@ -341,6 +346,89 @@ const CharacterGrid = (props: Props) => { } } + // Methods: Updating transcendence stage + // Note: Saves, but debouncing is not working properly + async function saveTranscendence( + id: string, + position: number, + stage: number + ) { + storePreviousTranscendenceStage(position) + + try { + if (stage != previousTranscendenceStages[position]) + // TODO: We can use the update character API + await api.endpoints.grid_characters + .update(id, { character: { transcendence_step: stage } }) + .then((response) => { + storeGridCharacter(response.data) + }) + } catch (error) { + console.error(error) + + // Revert optimistic UI + updateTranscendenceStage(position, previousTranscendenceStages[position]) + + // Remove optimistic key + let newPreviousValues = { ...previousTranscendenceStages } + delete newPreviousValues[position] + setPreviousTranscendenceStages(newPreviousValues) + } + } + + function initiateTranscendenceUpdate( + id: string, + position: number, + uncapLevel: number + ) { + if ( + party.user && + accountState.account.user && + party.user.id === accountState.account.user.id + ) { + memoizeTranscendenceAction(id, position, uncapLevel) + + // Optimistically update UI + updateTranscendenceStage(position, uncapLevel) + } + } + + const memoizeTranscendenceAction = useCallback( + (id: string, position: number, stage: number) => { + debouncedTranscendenceAction(id, position, stage) + }, + [props, previousTranscendenceStages] + ) + + const debouncedTranscendenceAction = useMemo( + () => + debounce((id, position, number) => { + saveTranscendence(id, position, number) + }, 500), + [props, saveTranscendence] + ) + + const updateTranscendenceStage = ( + position: number, + uncapLevel: number | undefined + ) => { + const character = appState.grid.characters[position] + if (character && uncapLevel) { + character.uncap_level = uncapLevel + appState.grid.characters[position] = character + } + } + + function storePreviousTranscendenceStage(position: number) { + // Save the current value in case of an unexpected result + let newPreviousValues = { ...previousUncapValues } + + if (grid.characters[position]) { + newPreviousValues[position] = grid.characters[position]?.uncap_level + setPreviousTranscendenceStages(newPreviousValues) + } + } + function cancelAlert() { setErrorMessage('') } @@ -380,6 +468,7 @@ const CharacterGrid = (props: Props) => { position={i} updateObject={receiveCharacterFromSearch} updateUncap={initiateUncapUpdate} + updateTranscendence={initiateTranscendenceUpdate} removeCharacter={removeCharacter} /> diff --git a/components/CharacterUnit/index.tsx b/components/CharacterUnit/index.tsx index 5f046605..d917f77b 100644 --- a/components/CharacterUnit/index.tsx +++ b/components/CharacterUnit/index.tsx @@ -40,6 +40,7 @@ interface Props { removeCharacter: (id: string) => void updateObject: (object: SearchableObject, position: number) => void updateUncap: (id: string, position: number, uncap: number) => void + updateTranscendence: (id: string, position: number, stage: number) => void } const CharacterUnit = ({ @@ -49,6 +50,7 @@ const CharacterUnit = ({ removeCharacter: sendCharacterToRemove, updateObject, updateUncap, + updateTranscendence, }: Props) => { // Translations and locale const { t } = useTranslation('common') @@ -156,6 +158,10 @@ const CharacterUnit = ({ if (gridCharacter) updateUncap(gridCharacter.id, position, uncap) } + function passTranscendenceData(stage: number) { + if (gridCharacter) updateTranscendence(gridCharacter.id, position, stage) + } + function removeCharacter() { if (gridCharacter) sendCharacterToRemove(gridCharacter.id) } @@ -169,8 +175,8 @@ const CharacterUnit = ({ // Change the image based on the uncap level let suffix = '01' - if (gridCharacter.uncap_level == 6) suffix = '04' - else if (gridCharacter.uncap_level == 5) suffix = '03' + if (gridCharacter.transcendence_step > 0) suffix = '04' + else if (gridCharacter.uncap_level >= 5) suffix = '03' else if (gridCharacter.uncap_level > 2) suffix = '02' // Special casing for Lyria (and Young Cat eventually) @@ -308,7 +314,9 @@ const CharacterUnit = ({ flb={character.uncap.flb || false} ulb={character.uncap.ulb || false} uncapLevel={gridCharacter.uncap_level} + transcendenceStep={gridCharacter.transcendence_step} updateUncap={passUncapData} + updateTranscendence={passTranscendenceData} special={character.special} /> ) : (