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

pass-culture · Feb 6, 2025 · 7caa5ba · 7caa5ba
1 parent 3ccd40e
commit 7caa5ba
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 34 deletions.
diff --git a/src/features/navigation/TabBar/TabBarContainer.tsx b/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({

diff --git a/src/ui/components/touchableLink/InternalTouchableLink.tsx b/src/ui/components/touchableLink/InternalTouchableLink.tsx
@@ -1,25 +1,24 @@
-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,
   ...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
 
   const handleNavigation = useCallback(() => {
-    if (enableNavigate) {
+    if (enableNavigate && isFocused) {
       if (withReset) {
         fromRef
           ? resetFromRef(screen, params)
@@ -30,14 +29,20 @@ export const InternalTouchableLink: FunctionComponent<InternalTouchableLinkProps
         fromRef ? navigateFromRef(screen, params) : navigate(screen, params)
       }
     }
-  }, [enableNavigate, navigate, push, reset, fromRef, withPush, withReset, params, screen])
+  }, [
+    enableNavigate,
+    navigate,
+    push,
+    reset,
+    fromRef,
+    withPush,
+    withReset,
+    params,
+    screen,
+    isFocused,
+  ])
   // For link in push mode, we want to avoid double tap. So we put a pretty large cooldown wait value
   return (
-    <TouchableLink
-      handleNavigation={handleNavigation}
-      linkProps={internalLinkProps}
-      {...rest}
-      pressCooldownDelay={withPush ? PUSH_LINK_COOLDOWN : undefined}
-    />
+    <TouchableLink handleNavigation={handleNavigation} linkProps={internalLinkProps} {...rest} />
   )
 }
diff --git a/src/ui/components/touchableLink/TouchableLink.tsx b/src/ui/components/touchableLink/TouchableLink.tsx
@@ -1,14 +1,12 @@
-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'
 
 import { accessibilityAndTestId } from 'libs/accessibilityAndTestId'
 import { useHandleFocus } from 'libs/hooks/useHandleFocus'
 import { useHandleHover } from 'libs/hooks/useHandleHover'
-import { handleNavigationWrapper } from 'ui/components/touchableLink/handleNavigationWrapper'
+import { handleNavigationWrapper } from 'ui/components/touchableLink/handleNavigationWrapper.web'
 import { TouchableLinkProps } from 'ui/components/touchableLink/types'
-import { TouchableOpacity } from 'ui/components/TouchableOpacity'
 // eslint-disable-next-line no-restricted-imports
 import { ColorsEnum } from 'ui/theme/colors'
 import { touchableFocusOutline } from 'ui/theme/customFocusOutline/touchableFocusOutline'
@@ -28,7 +26,6 @@ export function TouchableLink({
   hoverUnderlineColor,
   accessibilityLabel,
   testID,
-  pressCooldownDelay = 0,
   ...rest
 }: TouchableLinkProps) {
   const TouchableComponent = (
@@ -73,7 +70,7 @@ export function TouchableLink({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const pressFn = useMemo(
+  const handlePress = useMemo(
     () =>
       handleNavigationWrapper({
         onBeforeNavigate,
@@ -83,11 +80,6 @@ export function TouchableLink({
     [onBeforeNavigate, onAfterNavigate, handleNavigation]
   )
 
-  const throttledPressFn = useMemo(
-    () => throttle(pressFn, pressCooldownDelay, { leading: true, trailing: false }),
-    [pressCooldownDelay, pressFn]
-  )
-
   return (
     <TouchableLinkComponent
       {...touchableOpacityProps}
@@ -100,14 +92,14 @@ export function TouchableLink({
       onBlur={onLinkBlur}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      onPress={disabled ? undefined : throttledPressFn}
+      onPress={disabled ? undefined : handlePress}
       {...accessibilityAndTestId(accessibilityLabel, testID)}>
       {children}
     </TouchableLinkComponent>
   )
 }
 
-const StyledTouchableOpacity = styled(TouchableOpacity)<{
+const StyledTouchableOpacity = styled.TouchableOpacity<{
   isFocus?: boolean
   isHover?: boolean
   hoverUnderlineColor?: ColorsEnum

diff --git a/src/ui/components/touchableLink/types.ts b/src/ui/components/touchableLink/types.ts
@@ -38,8 +38,8 @@ type AsProps = {
 } & Record<string, unknown>
 
 type TouchableLinkGenericProps = {
-  onBeforeNavigate?: (event: GestureResponderEvent | MouseEvent) => void
-  onAfterNavigate?: (event: GestureResponderEvent | MouseEvent) => void
+  onBeforeNavigate?: (event: GestureResponderEvent | MouseEvent) => void | Promise<void>
+  onAfterNavigate?: (event: GestureResponderEvent | MouseEvent) => void | Promise<void>
   highlight?: boolean // If true, uses TouchableHighlight instead of TouchableOpacity to render component
   hoverUnderlineColor?: ColorsEnum // Color to be used for underline effect on hover. Black if not specified
   pressCooldownDelay?: number