Fix scrolling to bottom list on MoneyRequestReportView

Author: Kicu

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -1,8 +1,8 @@
 import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList';
 import isEmpty from 'lodash/isEmpty';
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {InteractionManager, View} from 'react-native';
+import React, {useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
+import {DeviceEventEmitter, InteractionManager, View} from 'react-native';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import FlatList from '@components/FlatList';
@@ -13,6 +13,8 @@ import useNetworkWithOfflineStatus from '@hooks/useNetworkWithOfflineStatus';
 import usePrevious from '@hooks/usePrevious';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import {parseFSAttributes} from '@libs/Fullstory';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isActionVisibleOnMoneyRequestReport} from '@libs/MoneyRequestReportUtils';
 import {
@@ -24,8 +26,6 @@ import {
     isConsecutiveChronosAutomaticTimerAction,
     isDeletedParentAction,
     isReportActionUnread,
-    isReportPreviewAction,
-    shouldHideNewMarker,
     shouldReportActionBeVisible,
     wasMessageReceivedWhileOffline,
 } from '@libs/ReportActionsUtils';
@@ -34,7 +34,8 @@ import isSearchTopmostFullScreenRoute from '@navigation/helpers/isSearchTopmostF
 import Navigation from '@navigation/Navigation';
 import FloatingMessageCounter from '@pages/home/report/FloatingMessageCounter';
 import ReportActionsListItemRenderer from '@pages/home/report/ReportActionsListItemRenderer';
-import {openReport, readNewestAction} from '@userActions/Report';
+import shouldDisplayNewMarkerOnReportAction from '@pages/home/report/shouldDisplayNewMarkerOnReportAction';
+import {openReport, readNewestAction, subscribeToNewActionEvent} from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -49,6 +50,8 @@ import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyS
 const EmptyParentReportActionForTransactionThread = undefined;
 
 const INITIAL_NUM_TO_RENDER = 20;
+// Amount of time to wait until all list items should be rendered and scrollToEnd will behave well
+const DELAY_FOR_SCROLLING_TO_END = 100;
 
 type MoneyRequestReportListProps = {
     /** The report */
@@ -81,15 +84,12 @@ function selectTransactionsForReportID(transactions: OnyxCollection<OnyxTypes.Tr
     });
 }
 
-/**
- * TODO make this component have the same functionalities as `ReportActionsList`
- *  - shouldDisplayNewMarker
- */
 function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActions, hasOlderActions}: MoneyRequestReportListProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {preferredLocale} = useLocalize();
     const {isOffline, lastOfflineAt, lastOnlineAt} = useNetworkWithOfflineStatus();
+    const reportScrollManager = useReportScrollManager();
 
     const reportID = report?.reportID;
 
@@ -110,8 +110,6 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
     const canPerformWriteAction = canUserPerformWriteAction(report);
     const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(false);
 
-    const reportScrollManager = useReportScrollManager();
-
     // We are reversing actions because in this View we are starting at the top and don't use Inverted list
     const visibleReportActions = useMemo(() => {
         const filteredActions = reportActions.filter((reportAction) => {
@@ -127,6 +125,18 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
         return filteredActions.toReversed();
     }, [reportActions, isOffline, canPerformWriteAction]);
 
+    const reportActionSize = useRef(visibleReportActions.length);
+    const lastAction = visibleReportActions.at(-1);
+    const lastActionIndex = lastAction?.reportActionID;
+    const previousLastIndex = useRef(lastActionIndex);
+
+    const scrollingVerticalOffset = useRef(0);
+    const readActionSkipped = useRef(false);
+    const lastVisibleActionCreated = getReportLastVisibleActionCreated(report, transactionThreadReport);
+    const hasNewestReportAction = lastAction?.created === lastVisibleActionCreated;
+    const hasNewestReportActionRef = useRef(hasNewestReportAction);
+    const userActiveSince = useRef<string>(DateUtils.getDBTime());
+
     const reportActionIDs = useMemo(() => {
         return reportActions?.map((action) => action.reportActionID) ?? [];
     }, [reportActions]);
@@ -142,27 +152,16 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
 
     const onStartReached = useCallback(() => {
         if (!isSearchTopmostFullScreenRoute()) {
-            loadNewerChats(false);
+            loadOlderChats(false);
             return;
         }
 
-        InteractionManager.runAfterInteractions(() => requestAnimationFrame(() => loadNewerChats(false)));
-    }, [loadNewerChats]);
-
-    const onEndReached = useCallback(() => {
-        loadOlderChats(false);
+        InteractionManager.runAfterInteractions(() => requestAnimationFrame(() => loadOlderChats(false)));
     }, [loadOlderChats]);
 
-    const reportActionSize = useRef(visibleReportActions.length);
-    const lastAction = visibleReportActions.at(-1);
-    const lastActionIndex = lastAction?.reportActionID;
-    const previousLastIndex = useRef(lastActionIndex);
-
-    const scrollingVerticalOffset = useRef(0);
-    const readActionSkipped = useRef(false);
-    const lastVisibleActionCreated = getReportLastVisibleActionCreated(report, transactionThreadReport);
-    const hasNewestReportAction = lastAction?.created === lastVisibleActionCreated;
-    const hasNewestReportActionRef = useRef(hasNewestReportAction);
+    const onEndReached = useCallback(() => {
+        loadNewerChats(false);
+    }, [loadNewerChats]);
 
     useEffect(() => {
         if (
@@ -218,72 +217,95 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
     }, [isOffline, lastOfflineAt, lastOnlineAt, preferredLocale, reportActions]);
 
     /**
-     * TODO extract as reusable logic from ReportActionsList - https://github.com/Expensify/App/issues/58891
+     * The reportActionID the unread marker should display above
      */
     const unreadMarkerReportActionID = useMemo(() => {
-        const shouldDisplayNewMarker = (message: OnyxTypes.ReportAction, index: number): boolean => {
-            const nextMessage = visibleReportActions.at(index + 1);
-            const isNextMessageUnread = !!nextMessage && isReportActionUnread(nextMessage, unreadMarkerTime);
+        // If there are message that were received while offline,
+        // we can skip checking all messages later than the earliest received offline message.
+        const startIndex = visibleReportActions.length - 1;
+        const endIndex = earliestReceivedOfflineMessageIndex ?? 0;
 
-            // If the current message is the earliest message received while offline, we want to display the unread marker above this message.
+        // Scan through each visible report action until we find the appropriate action to show the unread marker
+        for (let index = startIndex; index >= endIndex; index--) {
+            const reportAction = visibleReportActions.at(index);
+            const nextAction = visibleReportActions.at(index - 1);
+            const isNextMessageUnread = !!nextAction && isReportActionUnread(nextAction, unreadMarkerTime);
             const isEarliestReceivedOfflineMessage = index === earliestReceivedOfflineMessageIndex;
-            if (isEarliestReceivedOfflineMessage && !isNextMessageUnread) {
-                return true;
-            }
-
-            // If the unread marker should be hidden or is not within the visible area, don't show the unread marker.
-            if (shouldHideNewMarker(message)) {
-                return false;
-            }
 
-            const isCurrentMessageUnread = isReportActionUnread(message, unreadMarkerTime);
+            const shouldDisplayNewMarker =
+                reportAction &&
+                shouldDisplayNewMarkerOnReportAction({
+                    message: reportAction,
+                    isNextMessageUnread,
+                    isEarliestReceivedOfflineMessage,
+                    accountID: currentUserAccountID,
+                    prevSortedVisibleReportActionsObjects: prevVisibleActionsMap,
+                    unreadMarkerTime,
+                    scrollingVerticalOffset: scrollingVerticalOffset.current,
+                    prevUnreadMarkerReportActionID: prevUnreadMarkerReportActionID.current,
+                });
 
-            // If the current message is read or the next message is unread, don't show the unread marker.
-            if (!isCurrentMessageUnread || isNextMessageUnread) {
-                return false;
+            // eslint-disable-next-line react-compiler/react-compiler
+            if (shouldDisplayNewMarker) {
+                return reportAction.reportActionID;
             }
+        }
 
-            const isPendingAdd = (action: OnyxTypes.ReportAction) => {
-                return action?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
-            };
-
-            // If no unread marker exists, don't set an unread marker for newly added messages from the current user.
-            const isFromCurrentUser = currentUserAccountID === (isReportPreviewAction(message) ? message.childLastActorAccountID : message.actorAccountID);
-            const isNewMessage = !prevVisibleActionsMap[message.reportActionID];
-
-            // The unread marker will show if the action's `created` time is later than `unreadMarkerTime`.
-            // The `unreadMarkerTime` has already been updated to match the optimistic action created time,
-            // but once the new action is saved on the backend, the actual created time will be later than the optimistic one.
-            // Therefore, we also need to prevent the unread marker from appearing for previously optimistic actions.
-            const isPreviouslyOptimistic =
-                (isPendingAdd(prevVisibleActionsMap[message.reportActionID]) && !isPendingAdd(message)) ||
-                (!!prevVisibleActionsMap[message.reportActionID]?.isOptimisticAction && !message.isOptimisticAction);
-            const shouldIgnoreUnreadForCurrentUserMessage = !prevUnreadMarkerReportActionID.current && isFromCurrentUser && (isNewMessage || isPreviouslyOptimistic);
-
-            if (isFromCurrentUser) {
-                return !shouldIgnoreUnreadForCurrentUserMessage;
-            }
+        return null;
+    }, [currentUserAccountID, earliestReceivedOfflineMessageIndex, prevVisibleActionsMap, visibleReportActions, unreadMarkerTime]);
+    prevUnreadMarkerReportActionID.current = unreadMarkerReportActionID;
+
+    /**
+     * Subscribe to read/unread events and update our unreadMarkerTime
+     */
+    useEffect(() => {
+        const unreadActionSubscription = DeviceEventEmitter.addListener(`unreadAction_${report.reportID}`, (newLastReadTime: string) => {
+            setUnreadMarkerTime(newLastReadTime);
+            userActiveSince.current = DateUtils.getDBTime();
+        });
+        const readNewestActionSubscription = DeviceEventEmitter.addListener(`readNewestAction_${report.reportID}`, (newLastReadTime: string) => {
+            setUnreadMarkerTime(newLastReadTime);
+        });
 
-            return !isNewMessage || scrollingVerticalOffset.current >= CONST.REPORT.ACTIONS.ACTION_VISIBLE_THRESHOLD;
+        return () => {
+            unreadActionSubscription.remove();
+            readNewestActionSubscription.remove();
         };
+    }, [report.reportID]);
 
-        // If there are message that were recevied while offline,
-        // we can skip checking all messages later than the earliest recevied offline message.
-        const startIndex = earliestReceivedOfflineMessageIndex ?? 0;
+    const scrollToBottomForCurrentUserAction = useCallback(
+        (isFromCurrentUser: boolean) => {
+            InteractionManager.runAfterInteractions(() => {
+                setIsFloatingMessageCounterVisible(false);
+                // If a new comment is added from the current user, scroll to the bottom, otherwise leave the user position unchanged
+                if (!isFromCurrentUser) {
+                    return;
+                }
+
+                // We want to scroll to the end of the list where the newest message is
+                // however scrollToEnd will not work correctly with items of variable sizes without `getItemLayout` - so we need to delay the scroll until every item rendered
+                setTimeout(() => {
+                    reportScrollManager.scrollToEnd();
+                }, DELAY_FOR_SCROLLING_TO_END);
+            });
+        },
+        [reportScrollManager],
+    );
 
-        // Scan through each visible report action until we find the appropriate action to show the unread marker
-        for (let index = startIndex; index < visibleReportActions.length; index++) {
-            const reportAction = visibleReportActions.at(index);
+    useEffect(() => {
+        // This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain
+        // a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props.
+        const unsubscribe = subscribeToNewActionEvent(report.reportID, scrollToBottomForCurrentUserAction);
 
-            // eslint-disable-next-line react-compiler/react-compiler
-            if (reportAction && shouldDisplayNewMarker(reportAction, index)) {
-                return reportAction.reportActionID;
+        return () => {
+            if (!unsubscribe) {
+                return;
             }
-        }
+            unsubscribe();
+        };
 
-        return null;
-    }, [currentUserAccountID, earliestReceivedOfflineMessageIndex, prevVisibleActionsMap, visibleReportActions, unreadMarkerTime]);
-    prevUnreadMarkerReportActionID.current = unreadMarkerReportActionID;
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [report.reportID]);
 
     const renderItem = useCallback(
         ({item: reportAction, index}: ListRenderItemInfo<OnyxTypes.ReportAction>) => {
@@ -351,6 +373,9 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
         handleUnreadFloatingButton();
     };
 
+    // Parse Fullstory attributes on initial render
+    useLayoutEffect(parseFSAttributes, []);
+
     return (
         <View style={[styles.flex1]}>
             <View style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden, styles.pb4]}>

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -180,6 +180,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                             id={transaction.transactionID}
                             style={[pressableStyle]}
                             onMouseLeave={handleMouseLeave}
+                            key={transaction.transactionID}
                         >
                             <TransactionItemRow
                                 transactionItem={transaction}

src/hooks/useReportScrollManager/index.native.ts

@@ -1,4 +1,6 @@
 import {useCallback, useContext} from 'react';
+// eslint-disable-next-line no-restricted-imports
+import type {ScrollView} from 'react-native';
 import {ActionListContext} from '@pages/home/ReportScreenContext';
 import type ReportScrollManagerData from './types';
 
@@ -41,6 +43,13 @@ function useReportScrollManager(): ReportScrollManagerData {
             return;
         }
 
+        const scrollViewRef = flatListRef.current.getNativeScrollRef();
+        // Try to scroll on underlying scrollView if available, fallback to usual listRef
+        if (scrollViewRef && 'scrollToEnd' in scrollViewRef) {
+            (scrollViewRef as ScrollView).scrollToEnd({animated: false});
+            return;
+        }
+
         flatListRef.current.scrollToEnd({animated: false});
     }, [flatListRef]);
 

src/pages/Search/SearchMoneyRequestReportPage.tsx

@@ -84,30 +84,34 @@ function SearchMoneyRequestReportPage({route}: SearchMoneyRequestPageProps) {
 
     if (shouldUseNarrowLayout) {
         return (
-            <ScreenWrapper
-                testID={SearchMoneyRequestReportPage.displayName}
-                shouldEnableMaxHeight
-                offlineIndicatorStyle={styles.mtAuto}
-                headerGapStyles={styles.searchHeaderGap}
-            >
-                <FullPageNotFoundView
-                    shouldShow={shouldShowNotFoundPage}
-                    subtitleKey="notFound.noAccess"
-                    subtitleStyle={[styles.textSupporting]}
-                    shouldDisplaySearchRouter
-                    shouldShowBackButton={shouldUseNarrowLayout}
-                    onBackButtonPress={Navigation.goBack}
-                    linkKey="notFound.noAccess"
-                >
-                    <MoneyRequestReportView
-                        report={report}
-                        reportMetadata={reportMetadata}
-                        policy={policy}
-                        shouldDisplayReportFooter={isCurrentReportLoadedFromOnyx}
-                        backToRoute={route.params.backTo}
-                    />
-                </FullPageNotFoundView>
-            </ScreenWrapper>
+            <ActionListContext.Provider value={actionListValue}>
+                <ReactionListContext.Provider value={reactionListRef}>
+                    <ScreenWrapper
+                        testID={SearchMoneyRequestReportPage.displayName}
+                        shouldEnableMaxHeight
+                        offlineIndicatorStyle={styles.mtAuto}
+                        headerGapStyles={styles.searchHeaderGap}
+                    >
+                        <FullPageNotFoundView
+                            shouldShow={shouldShowNotFoundPage}
+                            subtitleKey="notFound.noAccess"
+                            subtitleStyle={[styles.textSupporting]}
+                            shouldDisplaySearchRouter
+                            shouldShowBackButton={shouldUseNarrowLayout}
+                            onBackButtonPress={Navigation.goBack}
+                            linkKey="notFound.noAccess"
+                        >
+                            <MoneyRequestReportView
+                                report={report}
+                                reportMetadata={reportMetadata}
+                                policy={policy}
+                                shouldDisplayReportFooter={isCurrentReportLoadedFromOnyx}
+                                backToRoute={route.params.backTo}
+                            />
+                        </FullPageNotFoundView>
+                    </ScreenWrapper>
+                </ReactionListContext.Provider>
+            </ActionListContext.Provider>
         );
     }