Merge pull request #38071 from Expensify/vit-revert32336

[CP Staging] Revert "Merge pull request #32336 from callstack-internal/hur/perf/ch…

src/components/FlatList/index.android.tsx

@@ -1,7 +1,7 @@
 import {useFocusEffect} from '@react-navigation/native';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useContext} from 'react';
-import type {FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import type {FlatListProps} from 'react-native';
 import {FlatList} from 'react-native';
 import {ActionListContext} from '@pages/home/ReportScreenContext';
 
@@ -22,9 +22,6 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
         }
     }, [scrollPosition?.offset, ref]);
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => setScrollPosition({offset: event.nativeEvent.contentOffset.y}), []);
-
     useFocusEffect(
         useCallback(() => {
             onScreenFocus();
@@ -35,8 +32,10 @@ function CustomFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>)
         <FlatList<T>
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
-            onScroll={props.onScroll}
-            onMomentumScrollEnd={onMomentumScrollEnd}
+            onScroll={(event) => props.onScroll?.(event)}
+            onMomentumScrollEnd={(event) => {
+                setScrollPosition({offset: event.nativeEvent.contentOffset.y});
+            }}
             ref={ref}
         />
     );

src/components/HeaderWithBackButton/types.ts

@@ -1,9 +1,9 @@
 import type {ReactNode} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
-import type {Policy, Report} from '@src/types/onyx';
+import type {PersonalDetails, Policy, Report} from '@src/types/onyx';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type IconAsset from '@src/types/utils/IconAsset';
 
@@ -101,6 +101,9 @@ type HeaderWithBackButtonProps = Partial<ChildrenProps> & {
     /** The report's policy, if we're showing the details for a report and need info about it for AvatarWithDisplay */
     policy?: OnyxEntry<Policy>;
 
+    /** Policies, if we're showing the details for a report and need participant details for AvatarWithDisplay */
+    personalDetails?: OnyxCollection<PersonalDetails>;
+
     /** Single execution function to prevent concurrent navigation actions */
     singleExecution?: <T extends unknown[]>(action: Action<T>) => Action<T>;
 

src/components/InvertedFlatList/BaseInvertedFlatList.tsx

@@ -6,19 +6,17 @@ import FlatList from '@components/FlatList';
 const WINDOW_SIZE = 15;
 const AUTOSCROLL_TO_TOP_THRESHOLD = 128;
 
-const maintainVisibleContentPosition = {
-    minIndexForVisible: 0,
-    autoscrollToTopThreshold: AUTOSCROLL_TO_TOP_THRESHOLD,
-};
-
 function BaseInvertedFlatList<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
     return (
         <FlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
             windowSize={WINDOW_SIZE}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            maintainVisibleContentPosition={{
+                minIndexForVisible: 0,
+                autoscrollToTopThreshold: AUTOSCROLL_TO_TOP_THRESHOLD,
+            }}
             inverted
         />
     );

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -1,8 +1,9 @@
 import {FlashList} from '@shopify/flash-list';
 import type {ReactElement} from 'react';
-import React, {memo, useCallback, useMemo} from 'react';
+import React, {memo, useCallback} from 'react';
 import {StyleSheet, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import withCurrentReportID from '@components/withCurrentReportID';
 import usePermissions from '@hooks/usePermissions';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -27,6 +28,7 @@ function LHNOptionsList({
     preferredLocale = CONST.LOCALES.DEFAULT,
     personalDetails = {},
     transactions = {},
+    currentReportID = '',
     draftComments = {},
     transactionViolations = {},
     onFirstItemRendered = () => {},
@@ -84,7 +86,7 @@ function LHNOptionsList({
                     lastReportActionTransaction={lastReportActionTransaction}
                     receiptTransactions={transactions}
                     viewMode={optionMode}
-                    isFocused={!shouldDisableFocusOptions}
+                    isFocused={!shouldDisableFocusOptions && reportID === currentReportID}
                     onSelectRow={onSelectRow}
                     preferredLocale={preferredLocale}
                     comment={itemComment}
@@ -96,6 +98,7 @@ function LHNOptionsList({
             );
         },
         [
+            currentReportID,
             draftComments,
             onSelectRow,
             optionMode,
@@ -113,8 +116,6 @@ function LHNOptionsList({
         ],
     );
 
-    const extraData = useMemo(() => [reportActions, reports, policy, personalDetails], [reportActions, reports, policy, personalDetails]);
-
     return (
         <View style={style ?? styles.flex1}>
             <FlashList
@@ -126,7 +127,7 @@ function LHNOptionsList({
                 keyExtractor={keyExtractor}
                 renderItem={renderItem}
                 estimatedItemSize={optionMode === CONST.OPTION_MODE.COMPACT ? variables.optionRowHeightCompact : variables.optionRowHeight}
-                extraData={extraData}
+                extraData={[currentReportID]}
                 showsVerticalScrollIndicator={false}
             />
         </View>
@@ -135,31 +136,33 @@ function LHNOptionsList({
 
 LHNOptionsList.displayName = 'LHNOptionsList';
 
-export default withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
-    reports: {
-        key: ONYXKEYS.COLLECTION.REPORT,
-    },
-    reportActions: {
-        key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
-    },
-    policy: {
-        key: ONYXKEYS.COLLECTION.POLICY,
-    },
-    preferredLocale: {
-        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
-    },
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    transactions: {
-        key: ONYXKEYS.COLLECTION.TRANSACTION,
-    },
-    draftComments: {
-        key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
-    },
-    transactionViolations: {
-        key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
-    },
-})(memo(LHNOptionsList));
+export default withCurrentReportID(
+    withOnyx<LHNOptionsListProps, LHNOptionsListOnyxProps>({
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+        reportActions: {
+            key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+        },
+        policy: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        preferredLocale: {
+            key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+        },
+        personalDetails: {
+            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+        },
+        transactions: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION,
+        },
+        draftComments: {
+            key: ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT,
+        },
+        transactionViolations: {
+            key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
+        },
+    })(memo(LHNOptionsList)),
+);
 
 export type {LHNOptionsListProps};

src/components/LHNOptionsList/OptionRowLHNData.tsx

@@ -1,6 +1,5 @@
 import {deepEqual} from 'fast-equals';
 import React, {useEffect, useMemo, useRef} from 'react';
-import useCurrentReportID from '@hooks/useCurrentReportID';
 import * as ReportUtils from '@libs/ReportUtils';
 import SidebarUtils from '@libs/SidebarUtils';
 import * as Report from '@userActions/Report';
@@ -33,8 +32,6 @@ function OptionRowLHNData({
     ...propsToForward
 }: OptionRowLHNDataProps) {
     const reportID = propsToForward.reportID;
-    const currentReportIDValue = useCurrentReportID();
-    const isReportFocused = isFocused && currentReportIDValue?.currentReportID === reportID;
 
     const optionItemRef = useRef<OptionData>();
 
@@ -88,7 +85,7 @@ function OptionRowLHNData({
         <OptionRowLHN
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToForward}
-            isFocused={isReportFocused}
+            isFocused={isFocused}
             optionItem={optionItem}
         />
     );

src/components/LHNOptionsList/types.ts

@@ -3,6 +3,7 @@ import type {RefObject} from 'react';
 import type {LayoutChangeEvent, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
 import type CONST from '@src/CONST';
 import type {OptionData} from '@src/libs/ReportUtils';
 import type {Locale, PersonalDetailsList, Policy, Report, ReportAction, ReportActions, Transaction, TransactionViolation} from '@src/types/onyx';
@@ -63,7 +64,7 @@ type CustomLHNOptionsListProps = {
     reportIDsWithErrors: Record<string, OnyxCommon.Errors>;
 };
 
-type LHNOptionsListProps = CustomLHNOptionsListProps & LHNOptionsListOnyxProps;
+type LHNOptionsListProps = CustomLHNOptionsListProps & CurrentReportIDContextValue & LHNOptionsListOnyxProps;
 
 type OptionRowLHNDataProps = {
     /** Whether row should be focused */

src/components/MoneyReportHeader.tsx

@@ -20,6 +20,7 @@ import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
+import {usePersonalDetails} from './OnyxProvider';
 import SettlementButton from './SettlementButton';
 
 type PaymentType = DeepValueOf<typeof CONST.IOU.PAYMENT_TYPE>;
@@ -44,6 +45,7 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & {
 };
 
 function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport}: MoneyReportHeaderProps) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
@@ -100,6 +102,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money
                 shouldShowPinButton={false}
                 report={moneyRequestReport}
                 policy={policy}
+                personalDetails={personalDetails}
                 shouldShowBackButton={isSmallScreenWidth}
                 onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 // Shows border if no buttons or next steps are showing below the header

src/components/MoneyRequestHeader.tsx

@@ -21,6 +21,7 @@ import HeaderWithBackButton from './HeaderWithBackButton';
 import HoldBanner from './HoldBanner';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
+import {usePersonalDetails} from './OnyxProvider';
 import ProcessMoneyRequestHoldMenu from './ProcessMoneyRequestHoldMenu';
 
 type MoneyRequestHeaderOnyxProps = {
@@ -53,6 +54,7 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
 };
 
 function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) {
+    const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -171,6 +173,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                         ownerAccountID: parentReport?.ownerAccountID,
                     }}
                     policy={policy}
+                    personalDetails={personalDetails}
                     shouldShowBackButton={isSmallScreenWidth}
                     onBackButtonPress={() => Navigation.goBack(undefined, false, true)}
                 />

src/libs/Pusher/pusher.ts

@@ -1,6 +1,5 @@
 import isObject from 'lodash/isObject';
 import type {Channel, ChannelAuthorizerGenerator, Options} from 'pusher-js/with-encryption';
-import {InteractionManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import type {LiteralUnion, ValueOf} from 'type-fest';
 import Log from '@libs/Log';
@@ -227,50 +226,48 @@ function subscribe<EventName extends PusherEventName>(
     onResubscribe = () => {},
 ): Promise<void> {
     return new Promise((resolve, reject) => {
-        InteractionManager.runAfterInteractions(() => {
-            // We cannot call subscribe() before init(). Prevent any attempt to do this on dev.
-            if (!socket) {
-                throw new Error(`[Pusher] instance not found. Pusher.subscribe()
+        // We cannot call subscribe() before init(). Prevent any attempt to do this on dev.
+        if (!socket) {
+            throw new Error(`[Pusher] instance not found. Pusher.subscribe()
             most likely has been called before Pusher.init()`);
-            }
-
-            Log.info('[Pusher] Attempting to subscribe to channel', false, {channelName, eventName});
-            let channel = getChannel(channelName);
-
-            if (!channel || !channel.subscribed) {
-                channel = socket.subscribe(channelName);
-                let isBound = false;
-                channel.bind('pusher:subscription_succeeded', () => {
-                    // Check so that we do not bind another event with each reconnect attempt
-                    if (!isBound) {
-                        bindEventToChannel(channel, eventName, eventCallback);
-                        resolve();
-                        isBound = true;
-                        return;
-                    }
-
-                    // When subscribing for the first time we register a success callback that can be
-                    // called multiple times when the subscription succeeds again in the future
-                    // e.g. as a result of Pusher disconnecting and reconnecting. This callback does
-                    // not fire on the first subscription_succeeded event.
-                    onResubscribe();
-                });
+        }
 
-                channel.bind('pusher:subscription_error', (data: PusherSubscribtionErrorData = {}) => {
-                    const {type, error, status} = data;
-                    Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', {
-                        channelName,
-                        status,
-                        type,
-                        error,
-                    });
-                    reject(error);
+        Log.info('[Pusher] Attempting to subscribe to channel', false, {channelName, eventName});
+        let channel = getChannel(channelName);
+
+        if (!channel || !channel.subscribed) {
+            channel = socket.subscribe(channelName);
+            let isBound = false;
+            channel.bind('pusher:subscription_succeeded', () => {
+                // Check so that we do not bind another event with each reconnect attempt
+                if (!isBound) {
+                    bindEventToChannel(channel, eventName, eventCallback);
+                    resolve();
+                    isBound = true;
+                    return;
+                }
+
+                // When subscribing for the first time we register a success callback that can be
+                // called multiple times when the subscription succeeds again in the future
+                // e.g. as a result of Pusher disconnecting and reconnecting. This callback does
+                // not fire on the first subscription_succeeded event.
+                onResubscribe();
+            });
+
+            channel.bind('pusher:subscription_error', (data: PusherSubscribtionErrorData = {}) => {
+                const {type, error, status} = data;
+                Log.hmmm('[Pusher] Issue authenticating with Pusher during subscribe attempt.', {
+                    channelName,
+                    status,
+                    type,
+                    error,
                 });
-            } else {
-                bindEventToChannel(channel, eventName, eventCallback);
-                resolve();
-            }
-        });
+                reject(error);
+            });
+        } else {
+            bindEventToChannel(channel, eventName, eventCallback);
+            resolve();
+        }
     });
 }