Merge pull request #55582 from janicduplessis/@janic/fix-cl-indicator

Fix new messages indicator after comment linking

src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx

@@ -1,5 +1,5 @@
 import type {ForwardedRef} from 'react';
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react';
+import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import type {FlatListProps, ListRenderItem, ListRenderItemInfo, FlatList as RNFlatList, ScrollViewProps} from 'react-native';
 import FlatList from '@components/FlatList';
 import usePrevious from '@hooks/usePrevious';
@@ -98,11 +98,37 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
         return config;
     }, [shouldEnableAutoScrollToTopThreshold, isLoadingData, wasLoadingData]);
 
+    const listRef = useRef<RNFlatList | null>(null);
+    useImperativeHandle(ref, () => {
+        // If we're trying to scroll at the start of the list we need to make sure to
+        // render all items.
+        const scrollToOffsetFn: RNFlatList['scrollToOffset'] = (params) => {
+            if (params.offset === 0) {
+                setCurrentDataId(null);
+            }
+            requestAnimationFrame(() => {
+                listRef.current?.scrollToOffset(params);
+            });
+        };
+
+        return new Proxy(
+            {},
+            {
+                get: (_target, prop) => {
+                    if (prop === 'scrollToOffset') {
+                        return scrollToOffsetFn;
+                    }
+                    return listRef.current?.[prop as keyof RNFlatList];
+                },
+            },
+        ) as RNFlatList;
+    });
+
     return (
         <FlatList
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...rest}
-            ref={ref}
+            ref={listRef}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             inverted
             data={displayedData}

src/pages/home/report/ReportActionsList.tsx

@@ -130,6 +130,7 @@ type ReportActionsListProps = {
 
 const VERTICAL_OFFSET_THRESHOLD = 200;
 const MSG_VISIBLE_THRESHOLD = 250;
+const IS_CLOSE_TO_NEWEST_THRESHOLD = 15;
 
 // In the component we are subscribing to the arrival of new actions.
 // As there is the possibility that there are multiple instances of a ReportScreen
@@ -390,9 +391,18 @@ function ReportActionsList({
     hasNewestReportActionRef.current = hasNewestReportAction;
     const previousLastIndex = useRef(lastActionIndex);
 
-    const isLastPendingActionIsDelete = sortedReportActions?.at(0)?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    // Display the new message indicator when comment linking and not close to the newest message.
+    const reportActionID = route?.params?.reportActionID;
+    const indexOfLinkedAction = reportActionID ? sortedVisibleReportActions.findIndex((action) => action.reportActionID === reportActionID) : -1;
+    const isLinkedActionCloseToNewest = indexOfLinkedAction < IS_CLOSE_TO_NEWEST_THRESHOLD;
+    const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(!isLinkedActionCloseToNewest);
 
-    const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(false);
+    useEffect(() => {
+        if (isLinkedActionCloseToNewest) {
+            return;
+        }
+        setIsFloatingMessageCounterVisible(true);
+    }, [isLinkedActionCloseToNewest, route]);
 
     useEffect(() => {
         if (
@@ -401,6 +411,7 @@ function ReportActionsList({
             reportActionSize.current > sortedVisibleReportActions.length &&
             hasNewestReportAction
         ) {
+            setIsFloatingMessageCounterVisible(false);
             reportScrollManager.scrollToBottom();
         }
         previousLastIndex.current = lastActionIndex;
@@ -439,6 +450,7 @@ function ReportActionsList({
             return;
         }
         InteractionManager.runAfterInteractions(() => {
+            setIsFloatingMessageCounterVisible(false);
             reportScrollManager.scrollToBottom();
         });
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
@@ -479,6 +491,7 @@ function ReportActionsList({
 
         if (isNewMessageDisplayed) {
             InteractionManager.runAfterInteractions(() => {
+                setIsFloatingMessageCounterVisible(false);
                 reportScrollManager.scrollToBottom();
                 setPendingBottomScroll(false);
             });
@@ -540,6 +553,8 @@ function ReportActionsList({
     };
 
     const scrollToBottomAndMarkReportAsRead = useCallback(() => {
+        setIsFloatingMessageCounterVisible(false);
+
         if (!hasNewestReportAction) {
             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID));
             openReport(report.reportID);
@@ -767,15 +782,12 @@ function ReportActionsList({
         loadOlderChats(false);
     }, [loadOlderChats]);
 
-    // When performing comment linking, initially 25 items are added to the list. Subsequent fetches add 15 items from the cache or 50 items from the server.
-    // This is to ensure that the user is able to see the 'scroll to newer comments' button when they do comment linking and have not reached the end of the list yet.
-    const canScrollToNewerComments = !isLoadingInitialReportActions && !hasNewestReportAction && sortedReportActions.length > 25 && !isLastPendingActionIsDelete;
     const [reportActionsListTestID, reportActionsListFSClass] = getChatFSAttributes(participantsContext, 'ReportActionsList', report);
 
     return (
         <>
             <FloatingMessageCounter
-                isActive={(isFloatingMessageCounterVisible && !!unreadMarkerReportActionID) || canScrollToNewerComments}
+                isActive={isFloatingMessageCounterVisible}
                 onClick={scrollToBottomAndMarkReportAsRead}
             />
             <View
@@ -807,7 +819,7 @@ function ReportActionsList({
                     extraData={extraData}
                     key={listID}
                     shouldEnableAutoScrollToTopThreshold={shouldEnableAutoScrollToTopThreshold}
-                    initialScrollKey={route?.params?.reportActionID}
+                    initialScrollKey={reportActionID}
                 />
             </View>
         </>