From 80d32370a7e7b0af59ffab62b86a3b35714d721d Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Tue, 21 Jan 2025 18:06:52 -0500 Subject: [PATCH 1/3] Fix new messages indicator after comment linking --- src/pages/home/report/ReportActionsList.tsx | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 707c016c130b..92c3905fef65 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -389,9 +389,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 < 5; + const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(!isLinkedActionCloseToNewest); - const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(false); + useEffect(() => { + if (isLinkedActionCloseToNewest) { + return; + } + setIsFloatingMessageCounterVisible(true); + }, [isLinkedActionCloseToNewest, route]); useEffect(() => { if ( @@ -742,15 +751,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 ( <> From ab86c365b7ad42114ea8cf6ae25d894e761a9079 Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Wed, 22 Jan 2025 00:13:18 -0500 Subject: [PATCH 2/3] Fix scroll to bottom --- .../BaseInvertedFlatList/index.tsx | 30 +++++++++++++++++-- src/pages/home/report/ReportActionsList.tsx | 5 ++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx index 3753453aa4b2..cd8eeb187a08 100644 --- a/src/components/InvertedFlatList/BaseInvertedFlatList/index.tsx +++ b/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(props: BaseInvertedFlatListProps, ref: Forwa return config; }, [shouldEnableAutoScrollToTopThreshold, isLoadingData, wasLoadingData]); + const listRef = useRef(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 ( sortedVisibleReportActions.length && hasNewestReportAction ) { + setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); } previousLastIndex.current = lastActionIndex; @@ -447,6 +448,7 @@ function ReportActionsList({ return; } InteractionManager.runAfterInteractions(() => { + setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); }); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps @@ -464,6 +466,7 @@ function ReportActionsList({ Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID)); return; } + setIsFloatingMessageCounterVisible(false); reportScrollManager.scrollToBottom(); }); }, @@ -524,6 +527,8 @@ function ReportActionsList({ }; const scrollToBottomAndMarkReportAsRead = () => { + setIsFloatingMessageCounterVisible(false); + if (!hasNewestReportAction) { Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(report.reportID)); openReport(report.reportID); From 2edfb455149b02328ddac632a4af45a4860d6add Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Wed, 22 Jan 2025 10:42:24 -0500 Subject: [PATCH 3/3] Move is close to newest to const and adjust value --- src/pages/home/report/ReportActionsList.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 2a9d0accd3fc..9a98e367a189 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/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 @@ -392,7 +393,7 @@ function ReportActionsList({ // 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 < 5; + const isLinkedActionCloseToNewest = indexOfLinkedAction < IS_CLOSE_TO_NEWEST_THRESHOLD; const [isFloatingMessageCounterVisible, setIsFloatingMessageCounterVisible] = useState(!isLinkedActionCloseToNewest); useEffect(() => {