Skip to content

Fix more messages are not loaded when reaches the end at the Reports page #75494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
flodnv merged 5 commits into from
Nov 27, 2025
Merged

Fix more messages are not loaded when reaches the end at the Reports page #75494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
30cd3a2
fix more messages are not loaded when reaches the end
bernhardoj Nov 19, 2025
b567563
lint
bernhardoj Nov 19, 2025
65f7bca
fix test
bernhardoj Nov 19, 2025
015e076
fix type
bernhardoj Nov 19, 2025
474e33d
Merge branch 'main' into fix/72521-no-more-msg-loaded-after-reach-end…
bernhardoj Nov 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/MoneyRequestReportView/MoneyRequestReportNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function MoneyRequestReportNavigation({reportID, shouldDisplayNarrowVersion}: Mo
const {type, status, sortBy, sortOrder, groupBy} = lastSearchQuery?.queryJSON ?? {};
let results: Array<string | undefined> = [];
if (!!type && !!currentSearchResults?.data && !!currentSearchResults?.search) {
const searchData = getSections({
const [searchData] = getSections({
type,
data: currentSearchResults.data,
currentAccountID: currentUserDetails.accountID,
Expand Down
54 changes: 27 additions & 27 deletions src/components/Search/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,19 +402,19 @@ function Search({
const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;
const prevIsSearchResultEmpty = usePrevious(isSearchResultsEmpty);

const [data, dataLength] = useMemo(() => {
const [filteredData, filteredDataLength, allDataLength] = useMemo(() => {
if (searchResults === undefined || !isDataLoaded) {
return [[], 0];
return [[], 0, 0];
}

// Group-by option cannot be used for chats or tasks
const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
const isTask = type === CONST.SEARCH.DATA_TYPES.TASK;
if (validGroupBy && (isChat || isTask)) {
return [[], 0];
return [[], 0, 0];
}

const data1 = getSections({
const [filteredData1, allLength] = getSections({
type,
data: searchResults.data,
currentAccountID: accountID,
Expand All @@ -427,7 +427,7 @@ function Search({
queryJSON,
isActionLoadingSet,
});
return [data1, data1.length];
return [filteredData1, filteredData1.length, allLength];
}, [searchKey, exportReportActions, validGroupBy, isDataLoaded, searchResults, type, archivedReportsIdSet, formatPhoneNumber, accountID, queryJSON, email, isActionLoadingSet]);

useEffect(() => {
Expand All @@ -444,7 +444,7 @@ function Search({
return;
}

handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals, prevReportsLength: dataLength});
handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals, prevReportsLength: filteredDataLength});

// We don't need to run the effect on change of isFocused.
// eslint-disable-next-line react-compiler/react-compiler
Expand All @@ -464,7 +464,7 @@ function Search({
}
const newTransactionList: SelectedTransactions = {};
if (validGroupBy || isExpenseReportType) {
for (const transactionGroup of data) {
for (const transactionGroup of filteredData) {
if (!Object.hasOwn(transactionGroup, 'transactions') || !('transactions' in transactionGroup)) {
continue;
}
Expand Down Expand Up @@ -519,7 +519,7 @@ function Search({
}
}
} else {
for (const transactionItem of data) {
for (const transactionItem of filteredData) {
if (!Object.hasOwn(transactionItem, 'transactionID') || !('transactionID' in transactionItem)) {
continue;
}
Expand Down Expand Up @@ -567,11 +567,11 @@ function Search({
return;
}

setSelectedTransactions(newTransactionList, data);
setSelectedTransactions(newTransactionList, filteredData);

isRefreshingSelection.current = true;
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
}, [data, setSelectedTransactions, areAllMatchingItemsSelected, isFocused, outstandingReportsByPolicyID, isExpenseReportType]);
}, [filteredData, setSelectedTransactions, areAllMatchingItemsSelected, isFocused, outstandingReportsByPolicyID, isExpenseReportType]);

useEffect(() => {
if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
Expand Down Expand Up @@ -601,11 +601,11 @@ function Search({
return;
}

if (!data.length || isRefreshingSelection.current) {
if (!filteredData.length || isRefreshingSelection.current) {
return;
}
const areItemsGrouped = !!validGroupBy || type === CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT;
const flattenedItems = areItemsGrouped ? (data as TransactionGroupListItemType[]).flatMap((item) => item.transactions) : data;
const flattenedItems = areItemsGrouped ? (filteredData as TransactionGroupListItemType[]).flatMap((item) => item.transactions) : filteredData;
const areAllItemsSelected = flattenedItems.length === Object.keys(selectedTransactions).length;

// If the user has selected all the expenses in their view but there are more expenses matched by the search
Expand All @@ -614,7 +614,7 @@ function Search({
if (!areAllItemsSelected) {
selectAllMatchingItems(false);
}
}, [isFocused, data, searchResults?.search?.hasMoreResults, selectedTransactions, selectAllMatchingItems, shouldShowSelectAllMatchingItems, validGroupBy, type]);
}, [isFocused, filteredData, searchResults?.search?.hasMoreResults, selectedTransactions, selectAllMatchingItems, shouldShowSelectAllMatchingItems, validGroupBy, type]);

const toggleTransaction = useCallback(
(item: SearchListItem, itemTransactions?: TransactionListItemType[]) => {
Expand All @@ -631,7 +631,7 @@ function Search({
if (isTransactionPendingDelete(item)) {
return;
}
setSelectedTransactions(prepareTransactionsList(item, selectedTransactions, outstandingReportsByPolicyID), data);
setSelectedTransactions(prepareTransactionsList(item, selectedTransactions, outstandingReportsByPolicyID), filteredData);
return;
}

Expand All @@ -643,7 +643,7 @@ function Search({
delete reducedSelectedTransactions[transaction.keyForList];
}

setSelectedTransactions(reducedSelectedTransactions, data);
setSelectedTransactions(reducedSelectedTransactions, filteredData);
return;
}

Expand All @@ -656,10 +656,10 @@ function Search({
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
),
},
data,
filteredData,
);
},
[data, selectedTransactions, outstandingReportsByPolicyID, setSelectedTransactions],
[filteredData, selectedTransactions, outstandingReportsByPolicyID, setSelectedTransactions],
);

const onSelectRow = useCallback(
Expand Down Expand Up @@ -801,7 +801,7 @@ function Search({

const sortedSelectedData = useMemo(
() =>
getSortedSections(type, status, data, localeCompare, sortBy, sortOrder, validGroupBy).map((item) => {
getSortedSections(type, status, filteredData, localeCompare, sortBy, sortOrder, validGroupBy).map((item) => {
const baseKey = isChat
? `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(item as ReportActionListItemType).reportActionID}`
: `${ONYXKEYS.COLLECTION.TRANSACTION}${(item as TransactionListItemType).transactionID}`;
Expand All @@ -822,7 +822,7 @@ function Search({

return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight, hash);
}),
[type, status, data, sortBy, sortOrder, validGroupBy, isChat, newSearchResultKeys, selectedTransactions, canSelectMultiple, localeCompare, hash],
[type, status, filteredData, sortBy, sortOrder, validGroupBy, isChat, newSearchResultKeys, selectedTransactions, canSelectMultiple, localeCompare, hash],
);

useEffect(() => {
Expand All @@ -840,12 +840,12 @@ function Search({

const fetchMoreResults = useCallback(() => {
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
if (!isFocused || !searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems || offset > data.length - CONST.SEARCH.RESULTS_PAGE_SIZE) {
if (!isFocused || !searchResults?.search?.hasMoreResults || shouldShowLoadingState || shouldShowLoadingMoreItems || offset > allDataLength - CONST.SEARCH.RESULTS_PAGE_SIZE) {
return;
}

setOffset((prev) => prev + CONST.SEARCH.RESULTS_PAGE_SIZE);
}, [isFocused, searchResults?.search?.hasMoreResults, shouldShowLoadingMoreItems, shouldShowLoadingState, offset, data.length]);
}, [isFocused, searchResults?.search?.hasMoreResults, shouldShowLoadingMoreItems, shouldShowLoadingState, offset, allDataLength]);

const toggleAllTransactions = useCallback(() => {
const areItemsGrouped = !!validGroupBy || isExpenseReportType;
Expand All @@ -859,27 +859,27 @@ function Search({
if (areItemsGrouped) {
setSelectedTransactions(
Object.fromEntries(
(data as TransactionGroupListItemType[]).flatMap((item) =>
(filteredData as TransactionGroupListItemType[]).flatMap((item) =>
item.transactions
.filter((t) => !isTransactionPendingDelete(t))
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
),
),
data,
filteredData,
);

return;
}

setSelectedTransactions(
Object.fromEntries(
(data as TransactionListItemType[])
(filteredData as TransactionListItemType[])
.filter((t) => !isTransactionPendingDelete(t))
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
),
data,
filteredData,
);
}, [clearSelectedTransactions, data, validGroupBy, selectedTransactions, setSelectedTransactions, outstandingReportsByPolicyID, isExpenseReportType]);
}, [clearSelectedTransactions, filteredData, validGroupBy, selectedTransactions, setSelectedTransactions, outstandingReportsByPolicyID, isExpenseReportType]);

const onLayout = useCallback(() => {
endSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
Expand Down Expand Up @@ -930,7 +930,7 @@ function Search({
);
}

const visibleDataLength = data.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchResults?.search?.type)) {
return (
<View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>
Expand Down
4 changes: 2 additions & 2 deletions src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,14 +104,14 @@ function TransactionGroupListItem<TItem extends ListItem>({
if (!transactionsSnapshot?.data) {
return [];
}
const sectionData = getSections({
const [sectionData] = getSections({
type: CONST.SEARCH.DATA_TYPES.EXPENSE,
data: transactionsSnapshot?.data,
currentAccountID: accountID,
currentUserEmail: currentUserDetails.email ?? '',
formatPhoneNumber,
isActionLoadingSet,
}) as TransactionListItemType[];
}) as [TransactionListItemType[], number];
return sectionData.map((transactionItem) => ({
...transactionItem,
isSelected: selectedTransactionIDsSet.has(transactionItem.transactionID),
Expand Down
Loading
Loading