(PC-33018) fix(booking): refresh available reaction when change tab f…

…rom ended bookings

.reassure/baseline.perf

@@ -1,9 +1,9 @@
-{"metadata":{"branch":"PC-33459","commitHash":"de01ef6029f350ef5512599ac5492a3f31cbfbbf"}}
-{"name":"<Bookings /> Performance test for Bookings page","runs":10,"meanDuration":62.7,"stdevDuration":4.423422506008969,"durations":[71,68,66,63,63,61,60,59,58,58],"meanCount":11,"stdevCount":0,"counts":[11,11,11,11,11,11,11,11,11,11]}
-{"name":"<Favorites /> Performance test for Favorites page","runs":10,"meanDuration":36.3,"stdevDuration":2.110818693198342,"durations":[40,39,38,37,36,35,35,35,34,34],"meanCount":6,"stdevCount":0,"counts":[6,6,6,6,6,6,6,6,6,6]}
-{"name":"<Venue /> Performance test for Venue page","runs":10,"meanDuration":221.9,"stdevDuration":30.355120380807804,"durations":[238,237,237,237,230,229,226,224,224,137],"meanCount":13.5,"stdevCount":1.5811388300841898,"counts":[14,14,14,14,14,14,14,14,14,9]}
-{"name":"<Offer /> Performance test for Offer page","runs":10,"meanDuration":46.3,"stdevDuration":1.5670212364724212,"durations":[49,48,47,47,47,46,45,45,45,44],"meanCount":3,"stdevCount":0,"counts":[3,3,3,3,3,3,3,3,3,3]}
-{"name":"<EndedBookings /> Performance test for EndedBookings page","runs":10,"meanDuration":18.5,"stdevDuration":1.509230856356236,"durations":[21,20,20,19,18,18,18,18,17,16],"meanCount":7,"stdevCount":0,"counts":[7,7,7,7,7,7,7,7,7,7]}
-{"name":"<SearchLanding /> Search Landing Page - Performance test for Search Landing page","runs":10,"meanDuration":8.5,"stdevDuration":0.97182531580755,"durations":[10,9,9,9,9,9,8,8,7,7],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}
-{"name":"<SearchResults /> Search Results - Performance test for Search Results page","runs":10,"meanDuration":8.1,"stdevDuration":1.1972189997378646,"durations":[10,9,9,9,8,8,8,7,7,6],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}
-{"name":"<Profile /> Performance test for Profile page","runs":10,"meanDuration":3.7,"stdevDuration":0.6749485577105528,"durations":[5,4,4,4,4,4,3,3,3,3],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}
+{"metadata":{"branch":"PC-33018","commitHash":"a8dae3d0f2500f014dce1d4e03cbd35e116f3204"}}
+{"name":"<Bookings /> Performance test for Bookings page","runs":10,"meanDuration":53.7,"stdevDuration":2.869378562220979,"durations":[58,58,54,54,54,54,53,53,50,49],"meanCount":10,"stdevCount":0,"counts":[10,10,10,10,10,10,10,10,10,10]}
+{"name":"<Favorites /> Performance test for Favorites page","runs":10,"meanDuration":36.8,"stdevDuration":1.9321835661585915,"durations":[39,39,38,38,38,37,36,35,34,34],"meanCount":6,"stdevCount":0,"counts":[6,6,6,6,6,6,6,6,6,6]}
+{"name":"<Venue /> Performance test for Venue page","runs":10,"meanDuration":119.4,"stdevDuration":41.41443655967754,"durations":[137,136,136,135,134,130,129,128,127,2],"meanCount":7.3,"stdevCount":2.2135943621178655,"counts":[8,8,8,8,8,8,8,8,8,1]}
+{"name":"<Offer /> Performance test for Offer page","runs":10,"meanDuration":48.2,"stdevDuration":2.4855135843076335,"durations":[52,50,50,50,49,48,47,47,45,44],"meanCount":3,"stdevCount":0,"counts":[3,3,3,3,3,3,3,3,3,3]}
+{"name":"<EndedBookings /> Performance test for EndedBookings page","runs":10,"meanDuration":19.1,"stdevDuration":1.5238839267549946,"durations":[22,21,20,19,19,19,18,18,18,17],"meanCount":7,"stdevCount":0,"counts":[7,7,7,7,7,7,7,7,7,7]}
+{"name":"<SearchResults /> Search Results - Performance test for Search Results page","runs":10,"meanDuration":7.8,"stdevDuration":1.0327955589886444,"durations":[9,9,9,8,8,8,7,7,7,6],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}
+{"name":"<Profile /> Performance test for Profile page","runs":10,"meanDuration":3.4,"stdevDuration":0.5163977794943223,"durations":[4,4,4,4,3,3,3,3,3,3],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}
+{"name":"<SearchLanding /> Search Landing Page - Performance test for Search Landing page","runs":10,"meanDuration":7.6,"stdevDuration":1.0749676997731399,"durations":[9,9,9,8,7,7,7,7,7,6],"meanCount":5,"stdevCount":0,"counts":[5,5,5,5,5,5,5,5,5,5]}

src/features/bookings/pages/Bookings/Bookings.native.test.tsx

@@ -12,7 +12,7 @@ import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
 import { subcategoriesDataTest } from 'libs/subcategories/fixtures/subcategoriesResponse'
 import { mockServer } from 'tests/mswServer'
 import { reactQueryProviderHOC } from 'tests/reactQueryProviderHOC'
-import { act, fireEvent, render, screen } from 'tests/utils'
+import { act, render, screen, userEvent } from 'tests/utils'
 
 import { Bookings } from './Bookings'
 
@@ -50,6 +50,10 @@ mockUseAvailableReaction.mockReturnValue({
   data: { numberOfReactableBookings: 0, bookings: [] },
 })
 
+const user = userEvent.setup()
+
+jest.useFakeTimers()
+
 describe('Bookings', () => {
   beforeEach(() => {
     mockServer.getApi<SubcategoriesResponseModelv2>('/v1/subcategories/v2', subcategoriesDataTest)
@@ -109,7 +113,7 @@ describe('Bookings', () => {
     renderBookings()
 
     const cta = await screen.findByText('Réservations terminées')
-    fireEvent.press(cta)
+    await user.press(cta)
 
     expect(navigate).toHaveBeenCalledWith('EndedBookings', undefined)
   })
@@ -135,34 +139,39 @@ describe('Bookings', () => {
     it('should change on "Terminées" tab and have one ended booking', async () => {
       renderBookings()
 
-      fireEvent.press(await screen.findByText('Terminées'))
+      await user.press(await screen.findByText('Terminées'))
 
       expect(await screen.findAllByText('Avez-vous déjà vu\u00a0?')).toHaveLength(2)
     })
 
     it('should call updateReactions when switching from COMPLETED tab', async () => {
       renderBookings()
 
-      fireEvent.press(await screen.findByText('Terminées'))
+      await user.press(await screen.findByText('Terminées'))
 
-      fireEvent.press(await screen.findByText('En cours'))
+      await user.press(await screen.findByText('En cours'))
 
       expect(mockMutate).toHaveBeenCalledTimes(1)
     })
 
     it('should update reactions for ended bookings without user reaction', async () => {
       renderBookings()
 
-      fireEvent.press(await screen.findByText('Terminées'))
+      await user.press(await screen.findByText('Terminées'))
 
-      fireEvent.press(await screen.findByText('En cours'))
+      await user.press(await screen.findByText('En cours'))
 
-      expect(mockMutate).toHaveBeenCalledWith({
-        reactions: [
-          { offerId: 147874, reactionType: ReactionTypeEnum.NO_REACTION },
-          { offerId: 147875, reactionType: ReactionTypeEnum.NO_REACTION },
-        ],
-      })
+      expect(mockMutate).toHaveBeenCalledWith(
+        {
+          reactions: [
+            { offerId: 147874, reactionType: ReactionTypeEnum.NO_REACTION },
+            { offerId: 147875, reactionType: ReactionTypeEnum.NO_REACTION },
+          ],
+        },
+        {
+          onSuccess: expect.any(Function),
+        }
+      )
     })
 
     it('should display a pastille when there are bookings without user reaction if wipReactionFeature FF activated', async () => {

src/features/bookings/pages/Bookings/Bookings.tsx

@@ -1,5 +1,6 @@
 import { useFocusEffect, useRoute } from '@react-navigation/native'
 import React, { useCallback, useState } from 'react'
+import { useQueryClient } from 'react-query'
 import styled from 'styled-components/native'
 
 import { ReactionTypeEnum } from 'api/gen'
@@ -13,6 +14,7 @@ import { useReactionMutation } from 'features/reactions/api/useReactionMutation'
 import { TabLayout } from 'features/venue/components/TabLayout/TabLayout'
 import { useFeatureFlag } from 'libs/firebase/firestore/featureFlags/useFeatureFlag'
 import { RemoteStoreFeatureFlags } from 'libs/firebase/firestore/types'
+import { QueryKeys } from 'libs/queryKeys'
 import { createLabels } from 'shared/handleTooManyCount/countUtils'
 import { PageHeader } from 'ui/components/headers/PageHeader'
 import { ViewGap } from 'ui/components/ViewGap/ViewGap'
@@ -25,6 +27,7 @@ export function Bookings() {
   const [previousTab, setPreviousTab] = useState(activeTab)
   const { data: bookings } = useBookings()
   const { mutate: addReaction } = useReactionMutation()
+  const queryClient = useQueryClient()
 
   const { ended_bookings: endedBookings = [] } = bookings ?? {}
 
@@ -47,9 +50,16 @@ export function Bookings() {
       reactionType: ReactionTypeEnum.NO_REACTION,
     }))
     if (mutationPayload.length > 0) {
-      addReaction({ reactions: mutationPayload })
+      addReaction(
+        { reactions: mutationPayload },
+        {
+          onSuccess: () => {
+            queryClient.invalidateQueries([QueryKeys.AVAILABLE_REACTION])
+          },
+        }
+      )
     }
-  }, [addReaction, endedBookings])
+  }, [addReaction, endedBookings, queryClient])
 
   useFocusEffect(
     useCallback(() => {