Fix the new message button doesn't work on some comment linkings

src/libs/PaginationUtils.ts

@@ -124,7 +124,7 @@ function mergeAndSortContinuousPages<TResource>(sortedItems: TResource[], pages:
     const result = [sortedPages[0]];
     for (let i = 1; i < sortedPages.length; i++) {
         const page = sortedPages[i];
-        const prevPage = sortedPages[i - 1];
+        const prevPage = result?.at(-1) ?? sortedPages[i - 1];
 
         // Current page is inside the previous page, skip
         if (page.lastIndex <= prevPage.lastIndex && page.lastID !== CONST.PAGINATION_END_ID) {

src/pages/home/ReportScreen.tsx

@@ -1,5 +1,6 @@
 import {PortalHost} from '@gorhom/portal';
-import {useIsFocused} from '@react-navigation/native';
+import type {RouteProp} from '@react-navigation/native';
+import {useIsFocused, useRoute} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
@@ -32,14 +33,14 @@ import useViewportOffsetTop from '@hooks/useViewportOffsetTop';
 import Timing from '@libs/actions/Timing';
 import Log from '@libs/Log';
 import Navigation from '@libs/Navigation/Navigation';
+import type {AuthScreensParamList} from '@libs/Navigation/types';
 import clearReportNotifications from '@libs/Notification/clearReportNotifications';
 import Performance from '@libs/Performance';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import shouldFetchReport from '@libs/shouldFetchReport';
 import * as ValidationUtils from '@libs/ValidationUtils';
-import type {AuthScreensParamList} from '@navigation/types';
 import * as ComposerActions from '@userActions/Composer';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -95,7 +96,8 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID ?? '0'];
 }
 
-function ReportScreen({route, currentReportID = '', navigation}: ReportScreenProps) {
+function ReportScreen({currentReportID = '', navigation}: ReportScreenProps) {
+    const route = useRoute<RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>>();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const reportIDFromRoute = getReportID(route);
@@ -782,6 +784,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                                     <ReportActionsView
                                         reportActions={reportActions}
                                         report={report}
+                                        route={route}
                                         parentReportAction={parentReportAction}
                                         isLoadingInitialReportActions={reportMetadata?.isLoadingInitialReportActions}
                                         isLoadingNewerReportActions={reportMetadata?.isLoadingNewerReportActions}

src/pages/home/report/ReportActionsList.tsx

@@ -1,5 +1,5 @@
 import type {ListRenderItemInfo} from '@react-native/virtualized-lists/Lists/VirtualizedList';
-import {useIsFocused, useRoute} from '@react-navigation/native';
+import {useIsFocused} from '@react-navigation/native';
 import type {RouteProp} from '@react-navigation/native';
 import type {DebouncedFunc} from 'lodash';
 import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -43,6 +43,9 @@ type ReportActionsListProps = WithCurrentUserPersonalDetailsProps & {
     /** The report currently being looked at */
     report: OnyxTypes.Report;
 
+    /** The current route of report screen */
+    route: RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>;
+
     /** The transaction thread report associated with the current report, if any */
     transactionThreadReport: OnyxEntry<OnyxTypes.Report>;
 
@@ -142,6 +145,7 @@ const onScrollToIndexFailed = () => {};
 
 function ReportActionsList({
     report,
+    route,
     transactionThreadReport,
     reportActions = [],
     parentReportAction,
@@ -171,7 +175,6 @@ function ReportActionsList({
 
     const {isOffline} = useNetwork();
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
-    const route = useRoute<RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>>();
     const opacity = useSharedValue(0);
     const reportScrollManager = useReportScrollManager();
     const userActiveSince = useRef<string | null>(null);

src/pages/home/report/ReportActionsView.tsx

@@ -1,5 +1,5 @@
+import {useIsFocused} from '@react-navigation/native';
 import type {RouteProp} from '@react-navigation/native';
-import {useIsFocused, useRoute} from '@react-navigation/native';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {InteractionManager} from 'react-native';
@@ -13,7 +13,6 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import DateUtils from '@libs/DateUtils';
 import getIsReportFullyVisible from '@libs/getIsReportFullyVisible';
-import type {AuthScreensParamList} from '@libs/Navigation/types';
 import * as NumberUtils from '@libs/NumberUtils';
 import {generateNewRandomInt} from '@libs/NumberUtils';
 import Performance from '@libs/Performance';
@@ -22,6 +21,7 @@ import * as ReportUtils from '@libs/ReportUtils';
 import {isUserCreatedPolicyRoom} from '@libs/ReportUtils';
 import {didUserLogInDuringSession} from '@libs/SessionUtils';
 import shouldFetchReport from '@libs/shouldFetchReport';
+import type {AuthScreensParamList} from '@navigation/types';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
@@ -50,6 +50,9 @@ type ReportActionsViewProps = ReportActionsViewOnyxProps & {
     /** The report currently being looked at */
     report: OnyxTypes.Report;
 
+    /** The current route of report screen */
+    route: RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>;
+
     /** Array of report actions for this report */
     reportActions?: OnyxTypes.ReportAction[];
 
@@ -85,6 +88,7 @@ const SPACER = 16;
 let listOldID = Math.round(Math.random() * 100);
 
 function ReportActionsView({
+    route,
     report,
     transactionThreadReport,
     session,
@@ -101,8 +105,8 @@ function ReportActionsView({
 }: ReportActionsViewProps) {
     useCopySelectionHelper();
     const reactionListRef = useContext(ReactionListContext);
-    const route = useRoute<RouteProp<AuthScreensParamList, typeof SCREENS.REPORT>>();
     const reportActionID = route?.params?.reportActionID;
+    const prevReportActionID = usePrevious(reportActionID);
     const didLayout = useRef(false);
     const didLoadOlderChats = useRef(false);
     const didLoadNewerChats = useRef(false);
@@ -146,7 +150,7 @@ function ReportActionsView({
 
     // Change the list ID only for comment linking to get the positioning right
     const listID = useMemo(() => {
-        if (!reportActionID) {
+        if (!reportActionID && !prevReportActionID) {
             // Keep the old list ID since we're not in the Comment Linking flow
             return listOldID;
         }
@@ -492,6 +496,7 @@ function ReportActionsView({
         <>
             <ReportActionsList
                 report={report}
+                route={route}
                 transactionThreadReport={transactionThreadReport}
                 reportActions={reportActions}
                 parentReportAction={parentReportAction}
@@ -527,6 +532,11 @@ function arePropsEqual(oldProps: ReportActionsViewProps, newProps: ReportActions
     if (!lodashIsEqual(oldProps.isReadyForCommentLinking, newProps.isReadyForCommentLinking)) {
         return false;
     }
+
+    if (oldProps.route !== newProps.route) {
+        return false;
+    }
+
     if (!lodashIsEqual(oldProps.reportActions, newProps.reportActions)) {
         return false;
     }

tests/perf-test/ReportActionsList.perf-test.tsx

@@ -72,6 +72,7 @@ beforeAll(() =>
 const mockOnLayout = jest.fn();
 const mockOnScroll = jest.fn();
 const mockLoadChats = jest.fn();
+const mockRoute = {params: {reportID: '1', reportActionID: ''}, key: 'Report', name: 'Report' as const};
 const mockRef = {current: null, flatListRef: null, scrollPosition: null, setScrollPosition: () => {}};
 
 beforeEach(() => {
@@ -91,6 +92,7 @@ function ReportActionsListWrapper() {
                         parentReportActionForTransactionThread={undefined}
                         sortedReportActions={ReportTestUtils.getMockedSortedReportActions(500)}
                         report={LHNTestUtilsModule.getFakeReport()}
+                        route={mockRoute}
                         onLayout={mockOnLayout}
                         onScroll={mockOnScroll}
                         onContentSizeChange={() => {}}

tests/perf-test/ReportScreen.perf-test.tsx

@@ -112,13 +112,14 @@ jest.mock('@src/libs/Navigation/Navigation', () => ({
     isDisplayedInModal: jest.fn(() => false),
 }));
 
+const mockRoute = {params: {reportID: '1', reportActionID: ''}, key: 'Report', name: 'Report' as const};
 jest.mock('@react-navigation/native', () => {
     const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
     return {
         ...actualNav,
         useFocusEffect: jest.fn(),
         useIsFocused: () => true,
-        useRoute: () => jest.fn(),
+        useRoute: () => mockRoute,
         useNavigation: () => ({
             navigate: jest.fn(),
             addListener: () => jest.fn(),
@@ -212,7 +213,6 @@ function ReportScreenWrapper(props: ReportScreenWrapperProps) {
 
 const report = {...createRandomReport(1), policyID: '1'};
 const reportActions = ReportTestUtils.getMockedReportActionsMap(1000);
-const mockRoute = {params: {reportID: '1', reportActionID: ''}, key: 'Report', name: 'Report' as const};
 
 test('[ReportScreen] should render ReportScreen', async () => {
     const {addListener} = createAddListenerMock();