From af415ac901c28b6110eed9f3474b09b98663a748 Mon Sep 17 00:00:00 2001 From: cgerrard-pass <187540148+cgerrard-pass@users.noreply.github.com> Date: Thu, 9 Jan 2025 18:29:18 +0100 Subject: [PATCH] (PC-33882) fix(achievements): modals now wait for queries to finish --- ...ShowAchievementSuccessModal.native.test.ts | 6 ++--- .../useShouldShowAchievementSuccessModal.ts | 14 +++++++++-- .../useBookingsReactionHelpers.native.test.ts | 16 +++++++++---- .../helpers/useBookingsReactionHelpers.ts | 5 ++-- .../useWhichModalToShow.native.test.ts | 16 ++++++------- .../home/helpers/useWhichModalToShow.ts | 24 +++++++++++-------- src/features/home/pages/Home.tsx | 11 ++++----- 7 files changed, 56 insertions(+), 36 deletions(-) diff --git a/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts b/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts index 6ccb8a86aef..bd8f10f3c09 100644 --- a/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts +++ b/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts @@ -98,7 +98,7 @@ describe('useShouldShowAchievementSuccessModal', () => { ) }) - it('should return shouldNotShow if the achievements are undefined', () => { + it('should return pending if the achievements are undefined', () => { mockAuthContextWithUser({ ...beneficiaryUser, achievements: undefined as unknown as AchievementResponse[], @@ -106,9 +106,7 @@ describe('useShouldShowAchievementSuccessModal', () => { const { result } = renderHook(useShouldShowAchievementSuccessModal) - expect(result.current.shouldShowAchievementSuccessModal).toEqual( - ModalDisplayState.SHOULD_NOT_SHOW - ) + expect(result.current.shouldShowAchievementSuccessModal).toEqual(ModalDisplayState.PENDING) }) it('should return an empty array if there are no achievements to show to the user', () => { diff --git a/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.ts b/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.ts index 235f5610138..84957338b49 100644 --- a/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.ts +++ b/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.ts @@ -11,7 +11,7 @@ export const useShouldShowAchievementSuccessModal = (): { } => { const areAchievementsEnabled = useFeatureFlag(RemoteStoreFeatureFlags.ENABLE_ACHIEVEMENTS) const { displayAchievements } = useRemoteConfigContext() - const { user } = useAuthContext() + const { user, isUserLoading } = useAuthContext() const unseenAchievements = user?.achievements?.filter((achievement) => !achievement.seenDate) @@ -19,10 +19,20 @@ export const useShouldShowAchievementSuccessModal = (): { (achievement) => !achievement.seenDate ) + if ( + user === undefined || + !user?.achievements || + isThereAtLeastOneUnseenAchievement === undefined || + isUserLoading + ) + return { + shouldShowAchievementSuccessModal: ModalDisplayState.PENDING, + achievementsToShow: [], + } + if ( !areAchievementsEnabled || !displayAchievements || - !user?.achievements || user?.achievements.length === 0 || !isThereAtLeastOneUnseenAchievement ) diff --git a/src/features/home/components/helpers/useBookingsReactionHelpers.native.test.ts b/src/features/home/components/helpers/useBookingsReactionHelpers.native.test.ts index 0d52fc294c7..278548b6ddb 100644 --- a/src/features/home/components/helpers/useBookingsReactionHelpers.native.test.ts +++ b/src/features/home/components/helpers/useBookingsReactionHelpers.native.test.ts @@ -33,7 +33,9 @@ describe('useBookingsReactionHelpers', () => { it('should return false when FF wipReactionFeature is false', () => { setFeatureFlags() - const { result } = renderHook(() => useBookingsReactionHelpers(endedBookingWithoutReaction)) + const { result } = renderHook(() => + useBookingsReactionHelpers(endedBookingWithoutReaction, false) + ) expect(result.current.shouldShowReactionModal).toEqual(ModalDisplayState.SHOULD_NOT_SHOW) }) @@ -44,7 +46,9 @@ describe('useBookingsReactionHelpers', () => { }) it('should return shouldNotShow if the bookings already have reactions', () => { - const { result } = renderHook(() => useBookingsReactionHelpers(endedBookingWithReaction)) + const { result } = renderHook(() => + useBookingsReactionHelpers(endedBookingWithReaction, false) + ) expect(result.current.shouldShowReactionModal).toEqual(ModalDisplayState.SHOULD_NOT_SHOW) }) @@ -53,13 +57,17 @@ describe('useBookingsReactionHelpers', () => { it.skip('should return shouldNotShow if cookies where not accepted', () => { cookiesNotAccepted() - const { result } = renderHook(() => useBookingsReactionHelpers(endedBookingWithoutReaction)) + const { result } = renderHook(() => + useBookingsReactionHelpers(endedBookingWithoutReaction, false) + ) expect(result.current.shouldShowReactionModal).toEqual(ModalDisplayState.SHOULD_NOT_SHOW) }) it('should return true if there are bookings to react to', () => { - const { result } = renderHook(() => useBookingsReactionHelpers(endedBookingWithoutReaction)) + const { result } = renderHook(() => + useBookingsReactionHelpers(endedBookingWithoutReaction, false) + ) expect(result.current.shouldShowReactionModal).toEqual(ModalDisplayState.SHOULD_SHOW) expect(result.current.bookingsEligibleToReaction).toEqual( diff --git a/src/features/home/components/helpers/useBookingsReactionHelpers.ts b/src/features/home/components/helpers/useBookingsReactionHelpers.ts index 23ca84e2cbd..6079ff9f2e3 100644 --- a/src/features/home/components/helpers/useBookingsReactionHelpers.ts +++ b/src/features/home/components/helpers/useBookingsReactionHelpers.ts @@ -9,7 +9,8 @@ export enum ModalDisplayState { } export const useBookingsReactionHelpers = ( - bookings: BookingsResponse | undefined = undefined + bookings: BookingsResponse | undefined = undefined, + isBookingsLoading: boolean ): { shouldShowReactionModal: ModalDisplayState bookingsEligibleToReaction: Array | undefined @@ -23,7 +24,7 @@ export const useBookingsReactionHelpers = ( const firstBookingWithoutReaction = bookingsEligibleToReaction[0] - if (bookings === undefined) { + if (isBookingsLoading || bookings === undefined) { return { shouldShowReactionModal: ModalDisplayState.PENDING, bookingsEligibleToReaction: [], diff --git a/src/features/home/helpers/useWhichModalToShow.native.test.ts b/src/features/home/helpers/useWhichModalToShow.native.test.ts index dba9537562a..c3266fdb0e8 100644 --- a/src/features/home/helpers/useWhichModalToShow.native.test.ts +++ b/src/features/home/helpers/useWhichModalToShow.native.test.ts @@ -44,9 +44,9 @@ describe('useWhichModalToShow', () => { achievements: achievements, }) - const { result } = renderHook(() => useWhichModalToShow(endedBookingWithReaction)) + const { result } = renderHook(() => useWhichModalToShow(endedBookingWithReaction, false)) - expect(result.current.showModal).toEqual(ModalToShow.ACHIEVEMENT) + expect(result.current.modalToShow).toEqual(ModalToShow.ACHIEVEMENT) }) it('should return reaction if the reaction modal should be shown and the achievement modal should not be shown', () => { @@ -55,9 +55,9 @@ describe('useWhichModalToShow', () => { achievements: [], }) - const { result } = renderHook(() => useWhichModalToShow(endedBookingWithoutReaction)) + const { result } = renderHook(() => useWhichModalToShow(endedBookingWithoutReaction, false)) - expect(result.current.showModal).toEqual(ModalToShow.REACTION) + expect(result.current.modalToShow).toEqual(ModalToShow.REACTION) }) it('should return reaction if the reaction modal should be show, even if the achievement modal should be shown', () => { @@ -66,9 +66,9 @@ describe('useWhichModalToShow', () => { achievements: achievements, }) - const { result } = renderHook(() => useWhichModalToShow(endedBookingWithoutReaction)) + const { result } = renderHook(() => useWhichModalToShow(endedBookingWithoutReaction, false)) - expect(result.current.showModal).toEqual(ModalToShow.REACTION) + expect(result.current.modalToShow).toEqual(ModalToShow.REACTION) }) it('should return none if the reaction and achievement both should not be shown', () => { @@ -77,9 +77,9 @@ describe('useWhichModalToShow', () => { achievements: [], }) - const { result } = renderHook(() => useWhichModalToShow(endedBookingWithReaction)) + const { result } = renderHook(() => useWhichModalToShow(endedBookingWithReaction, false)) - expect(result.current.showModal).toEqual(ModalToShow.NONE) + expect(result.current.modalToShow).toEqual(ModalToShow.NONE) }) }) diff --git a/src/features/home/helpers/useWhichModalToShow.ts b/src/features/home/helpers/useWhichModalToShow.ts index e782b4f3d04..ba19861b1aa 100644 --- a/src/features/home/helpers/useWhichModalToShow.ts +++ b/src/features/home/helpers/useWhichModalToShow.ts @@ -14,25 +14,29 @@ export enum ModalToShow { NONE = 'none', } -export const useWhichModalToShow = (bookings: BookingsResponse | undefined = undefined) => { - const [showModal, setShowModal] = useState(ModalToShow.PENDING) - const { shouldShowReactionModal, bookingsEligibleToReaction } = - useBookingsReactionHelpers(bookings) +export const useWhichModalToShow = ( + bookings: BookingsResponse | undefined = undefined, + isBookingsLoading: boolean +) => { + const [modalToShow, setModalToShow] = useState(ModalToShow.PENDING) + const { shouldShowReactionModal, bookingsEligibleToReaction } = useBookingsReactionHelpers( + bookings, + isBookingsLoading + ) const { shouldShowAchievementSuccessModal, achievementsToShow } = useShouldShowAchievementSuccessModal() - - if (bookings !== undefined && showModal === ModalToShow.PENDING) { + if (!isBookingsLoading && modalToShow === ModalToShow.PENDING) { if (shouldShowReactionModal === ModalDisplayState.SHOULD_SHOW) { - setShowModal(ModalToShow.REACTION) + setModalToShow(ModalToShow.REACTION) } else if (shouldShowAchievementSuccessModal === ModalDisplayState.SHOULD_SHOW) { - setShowModal(ModalToShow.ACHIEVEMENT) + setModalToShow(ModalToShow.ACHIEVEMENT) } else if ( shouldShowReactionModal === ModalDisplayState.SHOULD_NOT_SHOW && shouldShowAchievementSuccessModal === ModalDisplayState.SHOULD_NOT_SHOW ) { - setShowModal(ModalToShow.NONE) + setModalToShow(ModalToShow.NONE) } } - return { showModal, bookingsEligibleToReaction, achievementsToShow } + return { modalToShow, bookingsEligibleToReaction, achievementsToShow } } diff --git a/src/features/home/pages/Home.tsx b/src/features/home/pages/Home.tsx index 19957e943bb..45b0a7b437a 100644 --- a/src/features/home/pages/Home.tsx +++ b/src/features/home/pages/Home.tsx @@ -56,13 +56,12 @@ export const Home: FunctionComponent = () => { userStatus: user?.status?.statusType, showOnboardingSubscriptionModal, }) - const { data: bookings } = useBookings() + const { data: bookings, isLoading } = useBookings() - const { - achievementsToShow, - bookingsEligibleToReaction, - showModal: modalToShow, - } = useWhichModalToShow(bookings) + const { achievementsToShow, bookingsEligibleToReaction, modalToShow } = useWhichModalToShow( + bookings, + isLoading + ) const { visible: visibleAchievementModal,