(PC-33882) fix(achievements): modals now wait for queries to finish

pass-culture · Jan 9, 2025 · af415ac · af415ac
1 parent cb18633
commit af415ac
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 36 deletions.
diff --git a/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts b/src/features/achievements/hooks/useShouldShowAchievementSuccessModal.native.test.ts
@@ -98,17 +98,15 @@ 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[],
       })
 
       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
@@ -11,18 +11,28 @@ 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)
 
   const isThereAtLeastOneUnseenAchievement = user?.achievements?.some(
     (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
@@ -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
@@ -9,7 +9,8 @@ export enum ModalDisplayState {
 }
 
 export const useBookingsReactionHelpers = (
-  bookings: BookingsResponse | undefined = undefined
+  bookings: BookingsResponse | undefined = undefined,
+  isBookingsLoading: boolean
 ): {
   shouldShowReactionModal: ModalDisplayState
   bookingsEligibleToReaction: Array<BookingReponse> | 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
@@ -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
@@ -14,25 +14,29 @@ export enum ModalToShow {
   NONE = 'none',
 }
 
-export const useWhichModalToShow = (bookings: BookingsResponse | undefined = undefined) => {
-  const [showModal, setShowModal] = useState<ModalToShow>(ModalToShow.PENDING)
-  const { shouldShowReactionModal, bookingsEligibleToReaction } =
-    useBookingsReactionHelpers(bookings)
+export const useWhichModalToShow = (
+  bookings: BookingsResponse | undefined = undefined,
+  isBookingsLoading: boolean
+) => {
+  const [modalToShow, setModalToShow] = useState<ModalToShow>(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
@@ -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,