refactor: extract useLHNRowProductTrainingTooltip, drop onPressBefore prop

Author: BartekObudzinski

src/components/LHNOptionsList/OptionRowLHN/OptionRowLHNCore.tsx

@@ -111,15 +111,14 @@ function OptionRowLHN({
         contextMenuHint,
     });
 
-    const renderPressableRow = (onPressBefore?: () => void) => (
+    const renderPressableRow = () => (
         <OptionRowPressable
             reportID={reportID}
             optionItem={optionItem}
             isOptionFocused={isOptionFocused}
             isScreenFocused={isScreenFocused}
             popoverAnchor={popoverAnchor}
             onSelectRow={onSelectRow}
-            onPressBefore={onPressBefore}
             onLayout={onLayout}
             accessibilityLabel={accessibilityLabelWithContextMenuHint}
             accessibilityHint={accessibilityHint}

src/components/LHNOptionsList/OptionRowLHN/OptionRowPressable.tsx

@@ -14,6 +14,7 @@ import {startSpan} from '@libs/telemetry/activeSpans';
 import {showContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import useLHNRowProductTrainingTooltip from './useLHNRowProductTrainingTooltip';
 
 type OptionRowPressableProps = {
     reportID: string;
@@ -22,8 +23,6 @@ type OptionRowPressableProps = {
     isScreenFocused: boolean;
     popoverAnchor: RefObject<View | null>;
     onSelectRow: (optionItem: OptionData, popoverAnchor: RefObject<View | null>) => void;
-    /** Optional hook fired before the row press (e.g. hide product training tooltip). */
-    onPressBefore?: () => void;
     onLayout?: (event: LayoutChangeEvent) => void;
     accessibilityLabel: string;
     accessibilityHint?: string;
@@ -38,15 +37,15 @@ function OptionRowPressable({
     isScreenFocused,
     popoverAnchor,
     onSelectRow,
-    onPressBefore,
     onLayout,
     accessibilityLabel,
     accessibilityHint,
     testID,
     children,
 }: OptionRowPressableProps) {
+    const {hideProductTrainingTooltip} = useLHNRowProductTrainingTooltip();
     const onPress = (event: GestureResponderEvent | KeyboardEvent | undefined) => {
-        onPressBefore?.();
+        hideProductTrainingTooltip();
         startSpan(`${CONST.TELEMETRY.SPAN_OPEN_REPORT}_${reportID}`, {
             name: 'OptionRowLHN',
             op: CONST.TELEMETRY.SPAN_OPEN_REPORT,

src/components/LHNOptionsList/OptionRowLHN/OptionRowTooltipLayer.tsx

@@ -1,19 +1,18 @@
-import React, {useMemo} from 'react';
+import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {useSession} from '@components/OnyxListItemProvider';
-import {useProductTrainingContext} from '@components/ProductTrainingContext';
 import EducationalTooltip from '@components/Tooltip/EducationalTooltip';
 import useOnyx from '@hooks/useOnyx';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isAdminRoom, isChatUsedForOnboarding as isChatUsedForOnboardingReportUtils, isConciergeChatReport} from '@libs/ReportUtils';
 import type {OptionData} from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Report} from '@src/types/onyx';
+import useLHNRowProductTrainingTooltip from './useLHNRowProductTrainingTooltip';
 
 type OptionRowTooltipLayerProps = {
     /** Report ID of the row */
@@ -25,32 +24,17 @@ type OptionRowTooltipLayerProps = {
     /** Option data, used to forward pendingAction and errors to OfflineWithFeedback */
     optionItem: OptionData;
 
-    /** Renders the row content. Receives an optional `onPressBefore` callback (tooltip hide) to compose with row press. */
-    renderChildren: (onPressBefore?: () => void) => React.ReactNode;
+    /** Renders the row content. */
+    renderChildren: () => React.ReactNode;
 };
 
 type OptionRowTooltipLayerInnerProps = {
-    renderChildren: (onPressBefore?: () => void) => React.ReactNode;
+    renderChildren: () => React.ReactNode;
 };
 
 function OptionRowTooltipLayerInner({renderChildren}: OptionRowTooltipLayerInnerProps) {
     const styles = useThemeStyles();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {isFullscreenVisible, isScreenFocused, isReportsSplitNavigatorLast} = useLHNTooltipContext();
-
-    const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
-        // TODO: CONCIERGE_LHN_GBR tooltip will be replaced by a tooltip in the #admins room
-        // https://github.com/Expensify/App/issues/57045#issuecomment-2701455668
-        const tooltip = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCIERGE_LHN_GBR;
-        const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isReportsSplitNavigatorLast : isReportsSplitNavigatorLast && !isFullscreenVisible;
-
-        return {
-            tooltipToRender: tooltip,
-            shouldShowTooltip: shouldTooltipBeVisible,
-        };
-    }, [isScreenFocused, shouldUseNarrowLayout, isReportsSplitNavigatorLast, isFullscreenVisible]);
-
-    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext(tooltipToRender, shouldShowTooltip);
+    const {shouldShowProductTrainingTooltip, renderProductTrainingTooltip, hideProductTrainingTooltip} = useLHNRowProductTrainingTooltip();
 
     return (
         <EducationalTooltip
@@ -66,7 +50,7 @@ function OptionRowTooltipLayerInner({renderChildren}: OptionRowTooltipLayerInner
             onTooltipPress={hideProductTrainingTooltip}
             shouldHideOnScroll
         >
-            {renderChildren(hideProductTrainingTooltip)}
+            {renderChildren()}
         </EducationalTooltip>
     );
 }

src/components/LHNOptionsList/OptionRowLHN/useLHNRowProductTrainingTooltip.ts

@@ -0,0 +1,30 @@
+import {useMemo} from 'react';
+import {useLHNTooltipContext} from '@components/LHNOptionsList/LHNTooltipContext';
+import {useProductTrainingContext} from '@components/ProductTrainingContext';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import CONST from '@src/CONST';
+
+/**
+ * Resolves the product-training tooltip state (CONCIERGE_LHN_GBR) for an LHN row.
+ * Used by both OptionRowTooltipLayerInner (render the tooltip) and OptionRowPressable (hide on press).
+ */
+function useLHNRowProductTrainingTooltip() {
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {isFullscreenVisible, isScreenFocused, isReportsSplitNavigatorLast} = useLHNTooltipContext();
+
+    const {tooltipToRender, shouldShowTooltip} = useMemo(() => {
+        // TODO: CONCIERGE_LHN_GBR tooltip will be replaced by a tooltip in the #admins room
+        // https://github.com/Expensify/App/issues/57045#issuecomment-2701455668
+        const tooltip = CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.CONCIERGE_LHN_GBR;
+        const shouldTooltipBeVisible = shouldUseNarrowLayout ? isScreenFocused && isReportsSplitNavigatorLast : isReportsSplitNavigatorLast && !isFullscreenVisible;
+
+        return {
+            tooltipToRender: tooltip,
+            shouldShowTooltip: shouldTooltipBeVisible,
+        };
+    }, [isScreenFocused, shouldUseNarrowLayout, isReportsSplitNavigatorLast, isFullscreenVisible]);
+
+    return useProductTrainingContext(tooltipToRender, shouldShowTooltip);
+}
+
+export default useLHNRowProductTrainingTooltip;