(PC-33060) fix(android): multiple log consult offer events

__mocks__/@react-navigation/native.ts

@@ -47,7 +47,7 @@ export const createNavigationContainerRef = () => ({
   current: navigation,
 })
 
-export const useIsFocused = jest.fn()
+export const useIsFocused = jest.fn().mockReturnValue(true)
 export const useRoute = jest.fn().mockReturnValue({ params: {} })
 export const useFocusEffect = useEffect
 export const NavigationContainer = jest.fn()

src/features/bookings/components/EndedBookingItem.native.test.tsx

@@ -1,3 +1,4 @@
+import * as reactNavigationNative from '@react-navigation/native'
 import React, { ComponentProps } from 'react'
 import { Share } from 'react-native'
 
@@ -23,10 +24,10 @@ jest.mock('libs/firebase/remoteConfig/remoteConfig.services', () => ({
 jest.mock('libs/network/NetInfoWrapper')
 
 const mockNavigate = jest.fn()
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({ navigate: mockNavigate, push: jest.fn() }),
-}))
+jest.spyOn(reactNavigationNative, 'useNavigation').mockReturnValue({
+  navigate: mockNavigate,
+  push: jest.fn(),
+})
 
 jest.mock('libs/subcategories/useSubcategory')
 

src/features/navigation/TabBar/TabBar.tsx

@@ -75,7 +75,6 @@ export const TabBar: React.FC<Props> = ({ navigation, state }) => {
         return (
           <TabBarComponent
             navigateTo={{ screen: tabNavConfig[0], params: tabNavConfig[1] }}
-            enableNavigate={false}
             key={`key-tab-nav-${route.key}`}
             tabName={route.name}
             isSelected={route.isSelected}

src/features/navigation/TabBar/TabBarContainer.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components/native'
 
 import { useNetInfoContext } from 'libs/network/NetInfoWrapper'
-import { getShadow, getSpacing, Spacer } from 'ui/theme'
+import { getShadow, getSpacing } from 'ui/theme'
 
 import { useCustomSafeInsets } from '../../../ui/theme/useCustomSafeInsets'
 
@@ -11,32 +11,28 @@ export const TabBarContainer = ({ children }: { children: React.ReactNode }) =>
   const netInfo = useNetInfoContext()
   return (
     <MainContainer>
-      <RowContainer>
-        <Spacer.Row numberOfSpaces={4} />
-        {children}
-        <Spacer.Row numberOfSpaces={4} />
-      </RowContainer>
+      <RowContainer>{children}</RowContainer>
       <SafeAreaPlaceholder safeHeight={netInfo.isConnected ? bottom : 0} />
     </MainContainer>
   )
 }
 
 const RowContainer = styled.View({
   flexDirection: 'row',
-  width: '100%',
+  justifyContent: 'space-evenly',
+  paddingHorizontal: getSpacing(4),
 })
 
 const SafeAreaPlaceholder = styled.View<{ safeHeight: number }>(({ safeHeight }) => ({
   height: safeHeight,
 }))
 
 const MainContainer = styled.View(({ theme }) => ({
-  alignItems: 'center',
   borderTopStyle: 'solid',
   borderTopWidth: getSpacing(1 / 4),
   borderTopColor: theme.colors.greyMedium,
-  backgroundColor: theme.uniqueColors.tabBar,
   width: '100%',
+  backgroundColor: theme.uniqueColors.tabBar,
   position: 'absolute',
   bottom: 0,
   ...getShadow({

src/features/offer/components/OfferContent/ChronicleSection/ChronicleSection.native.test.tsx

@@ -1,3 +1,4 @@
+import * as reactNavigationNative from '@react-navigation/native'
 import React from 'react'
 
 import { chroniclesSnap } from 'features/chronicle/fixtures/chroniclesSnap'
@@ -6,10 +7,10 @@ import { render, screen, userEvent } from 'tests/utils'
 import { ChronicleSection } from './ChronicleSection'
 
 const mockNavigate = jest.fn()
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({ navigate: mockNavigate, push: jest.fn() }),
-}))
+jest.spyOn(reactNavigationNative, 'useNavigation').mockReturnValue({
+  navigate: mockNavigate,
+  push: jest.fn(),
+})
 
 describe('ChroniclesSection', () => {
   const user = userEvent.setup()

src/features/offer/components/OfferContent/ChronicleSection/ChronicleSection.web.test.tsx

@@ -1,3 +1,4 @@
+import * as reactNavigationNative from '@react-navigation/native'
 import React from 'react'
 
 import { chroniclesSnap } from 'features/chronicle/fixtures/chroniclesSnap'
@@ -6,12 +7,12 @@ import { fireEvent, render, screen } from 'tests/utils/web'
 import { ChronicleSection } from './ChronicleSection'
 
 const mockNavigate = jest.fn()
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({ navigate: mockNavigate, push: jest.fn() }),
-}))
+jest.spyOn(reactNavigationNative, 'useNavigation').mockReturnValue({
+  navigate: mockNavigate,
+  push: jest.fn(),
+})
 
-describe('ChroniclesSection', () => {
+describe('ChronicleSection', () => {
   it('should render correctly in mobile', () => {
     render(
       <ChronicleSection

src/features/venueMap/components/VenueMapView/VenueMapView.native.test.tsx

@@ -29,6 +29,7 @@ jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => ({ navigate: mockNavigate, push: jest.fn() }),
   useFocusEffect: jest.fn(),
+  useIsFocused: () => true,
 }))
 
 jest.mock('features/venueMap/useGetAllVenues')

src/ui/components/touchableLink/InternalTouchableLink.native.test.tsx

@@ -1,13 +1,20 @@
+import * as reactNavigationNative from '@react-navigation/native'
 import React from 'react'
 import { Text } from 'react-native'
 
-import { navigate, push } from '__mocks__/@react-navigation/native'
 import { navigateFromRef, pushFromRef } from 'features/navigation/navigationRef'
 import { render, screen, userEvent } from 'tests/utils'
 import { InternalTouchableLink } from 'ui/components/touchableLink/InternalTouchableLink'
 
 jest.mock('features/navigation/navigationRef')
 
+const mockPush = jest.fn()
+const mockNavigate = jest.fn()
+jest.spyOn(reactNavigationNative, 'useNavigation').mockReturnValue({
+  navigate: mockNavigate,
+  push: mockPush,
+})
+
 const navigateToItineraryMock = jest.fn()
 const useItinerary = () => ({
   navigateTo: navigateToItineraryMock,
@@ -39,7 +46,7 @@ describe('<InternalTouchableLink />', () => {
 
     await user.press(screen.getByText(linkText))
 
-    expect(navigate).toHaveBeenCalledWith('TabNavigator', { screen: 'Home', params: undefined })
+    expect(mockNavigate).toHaveBeenCalledWith('TabNavigator', { screen: 'Home', params: undefined })
   })
 
   it('should push right screen with expected params if withPush={true}', async () => {
@@ -52,13 +59,13 @@ describe('<InternalTouchableLink />', () => {
 
     await user.press(screen.getByText(linkText))
 
-    expect(push).toHaveBeenCalledWith('TabNavigator', {
+    expect(mockPush).toHaveBeenCalledWith('TabNavigator', {
       screen: 'Home',
       params: undefined,
     })
   })
 
-  it('should push screen only once in case of press spamming when withPush={true}', async () => {
+  it('should push screen only once in case of press spamming', async () => {
     render(
       <InternalTouchableLink
         navigateTo={{ screen: 'TabNavigator', params: { screen: 'Home' }, withPush: true }}>
@@ -70,7 +77,7 @@ describe('<InternalTouchableLink />', () => {
     await user.press(screen.getByText(linkText))
     await user.press(screen.getByText(linkText))
 
-    expect(push).toHaveBeenNthCalledWith(1, 'TabNavigator', {
+    expect(mockPush).toHaveBeenNthCalledWith(1, 'TabNavigator', {
       screen: 'Home',
       params: undefined,
     })
@@ -129,7 +136,7 @@ describe('<InternalTouchableLink />', () => {
 
     await user.press(screen.getByText(linkText))
 
-    expect(navigate).not.toHaveBeenCalledWith('TabNavigator', {
+    expect(mockNavigate).not.toHaveBeenCalledWith('TabNavigator', {
       screen: 'Home',
       params: undefined,
     })

src/ui/components/touchableLink/InternalTouchableLink.tsx

@@ -1,43 +1,43 @@
-import { useLinkProps, useNavigation } from '@react-navigation/native'
+import { useIsFocused, useLinkProps, useNavigation } from '@react-navigation/native'
 import React, { FunctionComponent, useCallback } from 'react'
 
 import { pushFromRef, navigateFromRef, resetFromRef } from 'features/navigation/navigationRef'
 import { UseNavigationType } from 'features/navigation/RootNavigator/types'
 import { TouchableLink } from 'ui/components/touchableLink/TouchableLink'
 import { InternalTouchableLinkProps } from 'ui/components/touchableLink/types'
 
-const PUSH_LINK_COOLDOWN = 1500
-
 export const InternalTouchableLink: FunctionComponent<InternalTouchableLinkProps> = ({
   navigateTo,
   enableNavigate = true,
+  onBeforeNavigate,
+  onAfterNavigate,
   ...rest
 }) => {
   // We use nullish operator here because TabBar uses InternalTouchableLink but navigateTo is undefined during launch
   const internalLinkProps = useLinkProps({ to: navigateTo ?? '' })
+  const isFocused = useIsFocused()
   const { navigate, push, reset } = useNavigation<UseNavigationType>()
   const { screen, params, fromRef, withPush, withReset } = navigateTo
 
+  // To avoid double tap issue, we define navigation functions only when component is focused
   const handleNavigation = useCallback(() => {
-    if (enableNavigate) {
-      if (withReset) {
-        fromRef
-          ? resetFromRef(screen, params)
-          : reset({ index: 0, routes: [{ name: screen, params }] })
-      } else if (withPush) {
-        fromRef ? pushFromRef(screen, params) : push(screen, params)
-      } else {
-        fromRef ? navigateFromRef(screen, params) : navigate(screen, params)
-      }
+    if (withReset) {
+      fromRef
+        ? resetFromRef(screen, params)
+        : reset({ index: 0, routes: [{ name: screen, params }] })
+    } else if (withPush) {
+      fromRef ? pushFromRef(screen, params) : push(screen, params)
+    } else {
+      fromRef ? navigateFromRef(screen, params) : navigate(screen, params)
     }
-  }, [enableNavigate, navigate, push, reset, fromRef, withPush, withReset, params, screen])
-  // For link in push mode, we want to avoid double tap. So we put a pretty large cooldown wait value
+  }, [navigate, push, reset, fromRef, withPush, withReset, params, screen])
   return (
     <TouchableLink
-      handleNavigation={handleNavigation}
+      handleNavigation={enableNavigate && isFocused ? handleNavigation : undefined}
+      onBeforeNavigate={isFocused ? onBeforeNavigate : undefined}
+      onAfterNavigate={isFocused ? onAfterNavigate : undefined}
       linkProps={internalLinkProps}
       {...rest}
-      pressCooldownDelay={withPush ? PUSH_LINK_COOLDOWN : undefined}
     />
   )
 }

src/ui/components/touchableLink/TouchableLink.native.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Text } from 'react-native'
 
 import { analytics } from 'libs/analytics/provider'
-import { act, render, screen, userEvent } from 'tests/utils'
+import { render, screen, userEvent } from 'tests/utils'
 import { ButtonPrimary } from 'ui/components/buttons/ButtonPrimary'
 
 import { TouchableLink } from './TouchableLink'
@@ -73,57 +73,6 @@ describe('<TouchableLink />', () => {
       expect(link.props.style).toEqual(expectedStyle)
     })
 
-    it('should trigger handleNavigation only once in case of press spamming with correct cooldown delay', async () => {
-      render(
-        <TouchableLink handleNavigation={handleNavigationMock} pressCooldownDelay={300}>
-          <TouchableLinkContent />
-        </TouchableLink>
-      )
-
-      await user.press(screen.getByText(linkText))
-      await user.press(screen.getByText(linkText))
-      await user.press(screen.getByText(linkText))
-
-      expect(handleNavigationMock).toHaveBeenCalledTimes(1)
-    })
-
-    it('should trigger handleNavigation multiple time if cooldown delay is respected', async () => {
-      render(
-        <TouchableLink handleNavigation={handleNavigationMock} pressCooldownDelay={300}>
-          <TouchableLinkContent />
-        </TouchableLink>
-      )
-
-      await act(async () => {
-        await user.press(screen.getByText(linkText))
-
-        jest.advanceTimersByTime(300)
-
-        await user.press(screen.getByText(linkText))
-
-        jest.advanceTimersByTime(300)
-
-        await user.press(screen.getByText(linkText))
-      })
-
-      expect(handleNavigationMock).toHaveBeenCalledTimes(3)
-    })
-
-    it('should trigger handleNavigation with multiple press when no cooldown delay is set', async () => {
-      jest.useFakeTimers()
-      render(
-        <TouchableLink handleNavigation={handleNavigationMock}>
-          <TouchableLinkContent />
-        </TouchableLink>
-      )
-
-      await user.press(screen.getByText(linkText))
-      await user.press(screen.getByText(linkText))
-      await user.press(screen.getByText(linkText))
-
-      expect(handleNavigationMock).toHaveBeenCalledTimes(3)
-    })
-
     it('should not trigger handleNavigation when Link is disabled', async () => {
       render(
         <TouchableLink handleNavigation={handleNavigationMock} disabled>

src/ui/components/touchableLink/TouchableLink.tsx

@@ -1,4 +1,3 @@
-import { throttle } from 'lodash'
 import React, { createRef, ElementType, useCallback, useEffect, useMemo } from 'react'
 import { NativeSyntheticEvent, Platform, TargetedEvent } from 'react-native'
 import styled from 'styled-components/native'
@@ -28,7 +27,6 @@ export function TouchableLink({
   hoverUnderlineColor,
   accessibilityLabel,
   testID,
-  pressCooldownDelay = 0,
   ...rest
 }: TouchableLinkProps) {
   const TouchableComponent = (
@@ -73,7 +71,7 @@ export function TouchableLink({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const pressFn = useMemo(
+  const handlePress = useMemo(
     () =>
       handleNavigationWrapper({
         onBeforeNavigate,
@@ -83,11 +81,6 @@ export function TouchableLink({
     [onBeforeNavigate, onAfterNavigate, handleNavigation]
   )
 
-  const throttledPressFn = useMemo(
-    () => throttle(pressFn, pressCooldownDelay, { leading: true, trailing: false }),
-    [pressCooldownDelay, pressFn]
-  )
-
   return (
     <TouchableLinkComponent
       {...touchableOpacityProps}
@@ -100,7 +93,7 @@ export function TouchableLink({
       onBlur={onLinkBlur}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      onPress={disabled ? undefined : throttledPressFn}
+      onPress={disabled ? undefined : handlePress}
       {...accessibilityAndTestId(accessibilityLabel, testID)}>
       {children}
     </TouchableLinkComponent>

src/ui/components/touchableLink/handleNavigationWrapper.ts

@@ -9,7 +9,7 @@ export const handleNavigationWrapper = ({
 }: HandleNavigationWrapperProps) => {
   const onClick = async (event: GestureResponderEvent) => {
     if (onBeforeNavigate) await onBeforeNavigate(event)
-    handleNavigation()
+    handleNavigation?.()
     if (onAfterNavigate) await onAfterNavigate(event)
   }
 

src/ui/components/touchableLink/handleNavigationWrapper.web.ts

@@ -11,7 +11,7 @@ export const handleNavigationWrapper = ({
     event.preventDefault()
 
     if (onBeforeNavigate) await onBeforeNavigate(event)
-    handleNavigation()
+    handleNavigation?.()
     if (onAfterNavigate) await onAfterNavigate(event)
   }