From 47ea796af4da4260699d525c5065f83ed4af7808 Mon Sep 17 00:00:00 2001 From: Matchu Date: Mon, 6 Nov 2023 12:54:23 -0800 Subject: [PATCH] Fix outfit saving infinite loop in error case Really don't know why this wasn't a problem with Apollo (or was it??), but yeah, don't save when there's a save error!! Then we reset the mutation state when the outfit state changes. --- .../WardrobePage/useOutfitSaving.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js b/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js index 0221a090..2db70218 100644 --- a/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js +++ b/app/javascript/wardrobe-2020/WardrobePage/useOutfitSaving.js @@ -12,10 +12,6 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { const navigate = useNavigate(); const toast = useToast(); - // There's not a way to reset an Apollo mutation state to clear out the error - // when the outfit changes… so we track the error state ourselves! - const [saveError, setSaveError] = React.useState(null); - // Whether this outfit is new, i.e. local-only, i.e. has _never_ been saved // to the server. const isNewOutfit = outfitState.id == null; @@ -62,6 +58,7 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { }, }); const isSaving = saveOutfitMutation.isPending; + const saveError = saveOutfitMutation.error; const saveOutfitFromProvidedState = React.useCallback( (outfitState) => { @@ -85,7 +82,6 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { }) .catch((e) => { console.error(e); - setSaveError(e); toast({ status: "error", title: "Sorry, there was an error saving this outfit!", @@ -131,6 +127,7 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { !isNewOutfit && canSaveOutfit && !isSaving && + !saveError && debouncedOutfitStateIsSaveable && !outfitStatesAreEqual(debouncedOutfitState, outfitState.savedOutfitState) ) { @@ -145,6 +142,7 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { isNewOutfit, canSaveOutfit, isSaving, + saveError, debouncedOutfitState, debouncedOutfitStateIsSaveable, outfitState.savedOutfitState, @@ -154,9 +152,11 @@ function useOutfitSaving(outfitState, dispatchToOutfit) { // When the outfit changes, clear out the error state from previous saves. // We'll send the mutation again after the debounce, and we don't want to // show the error UI in the meantime! - React.useEffect(() => { - setSaveError(null); - }, [outfitState.outfitStateWithoutExtras]); + const resetMutation = saveOutfitMutation.reset; + React.useEffect( + () => resetMutation(), + [outfitState.outfitStateWithoutExtras, resetMutation], + ); return { canSaveOutfit,