Skip to content

Commit 17fb17f

Browse files
flodnvflodnv
authored
Merge pull request Expensify#75494 from bernhardoj/fix/72521-no-more-msg-loaded-after-reach-end-in-search-page
2 parents 90a58c4 + 474e33d commit 17fb17f

5 files changed

Lines changed: 120 additions & 114 deletions

File tree

‎src/components/MoneyRequestReportView/MoneyRequestReportNavigation.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function MoneyRequestReportNavigation({reportID, shouldDisplayNarrowVersion}: Mo
3939
const {type, status, sortBy, sortOrder, groupBy} = lastSearchQuery?.queryJSON ?? {};
4040
let results: Array<string | undefined> = [];
4141
if (!!type && !!currentSearchResults?.data && !!currentSearchResults?.search) {
42-
const searchData = getSections({
42+
const [searchData] = getSections({
4343
type,
4444
data: currentSearchResults.data,
4545
currentAccountID: currentUserDetails.accountID,

‎src/components/Search/index.tsx‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -402,19 +402,19 @@ function Search({
402402
const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;
403403
const prevIsSearchResultEmpty = usePrevious(isSearchResultsEmpty);
404404

405-
const [data, dataLength] = useMemo(() => {
405+
const [filteredData, filteredDataLength, allDataLength] = useMemo(() => {
406406
if (searchResults === undefined || !isDataLoaded) {
407-
return [[], 0];
407+
return [[], 0, 0];
408408
}
409409

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

417-
const data1 = getSections({
417+
const [filteredData1, allLength] = getSections({
418418
type,
419419
data: searchResults.data,
420420
currentAccountID: accountID,
@@ -427,7 +427,7 @@ function Search({
427427
queryJSON,
428428
isActionLoadingSet,
429429
});
430-
return [data1, data1.length];
430+
return [filteredData1, filteredData1.length, allLength];
431431
}, [searchKey, exportReportActions, validGroupBy, isDataLoaded, searchResults, type, archivedReportsIdSet, formatPhoneNumber, accountID, queryJSON, email, isActionLoadingSet]);
432432

433433
useEffect(() => {
@@ -444,7 +444,7 @@ function Search({
444444
return;
445445
}
446446

447-
handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals, prevReportsLength: dataLength});
447+
handleSearch({queryJSON, searchKey, offset, shouldCalculateTotals, prevReportsLength: filteredDataLength});
448448

449449
// We don't need to run the effect on change of isFocused.
450450
// eslint-disable-next-line react-compiler/react-compiler
@@ -464,7 +464,7 @@ function Search({
464464
}
465465
const newTransactionList: SelectedTransactions = {};
466466
if (validGroupBy || isExpenseReportType) {
467-
for (const transactionGroup of data) {
467+
for (const transactionGroup of filteredData) {
468468
if (!Object.hasOwn(transactionGroup, 'transactions') || !('transactions' in transactionGroup)) {
469469
continue;
470470
}
@@ -519,7 +519,7 @@ function Search({
519519
}
520520
}
521521
} else {
522-
for (const transactionItem of data) {
522+
for (const transactionItem of filteredData) {
523523
if (!Object.hasOwn(transactionItem, 'transactionID') || !('transactionID' in transactionItem)) {
524524
continue;
525525
}
@@ -567,11 +567,11 @@ function Search({
567567
return;
568568
}
569569

570-
setSelectedTransactions(newTransactionList, data);
570+
setSelectedTransactions(newTransactionList, filteredData);
571571

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

576576
useEffect(() => {
577577
if (!isSearchResultsEmpty || prevIsSearchResultEmpty) {
@@ -601,11 +601,11 @@ function Search({
601601
return;
602602
}
603603

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

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

619619
const toggleTransaction = useCallback(
620620
(item: SearchListItem, itemTransactions?: TransactionListItemType[]) => {
@@ -631,7 +631,7 @@ function Search({
631631
if (isTransactionPendingDelete(item)) {
632632
return;
633633
}
634-
setSelectedTransactions(prepareTransactionsList(item, selectedTransactions, outstandingReportsByPolicyID), data);
634+
setSelectedTransactions(prepareTransactionsList(item, selectedTransactions, outstandingReportsByPolicyID), filteredData);
635635
return;
636636
}
637637

@@ -643,7 +643,7 @@ function Search({
643643
delete reducedSelectedTransactions[transaction.keyForList];
644644
}
645645

646-
setSelectedTransactions(reducedSelectedTransactions, data);
646+
setSelectedTransactions(reducedSelectedTransactions, filteredData);
647647
return;
648648
}
649649

@@ -656,10 +656,10 @@ function Search({
656656
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
657657
),
658658
},
659-
data,
659+
filteredData,
660660
);
661661
},
662-
[data, selectedTransactions, outstandingReportsByPolicyID, setSelectedTransactions],
662+
[filteredData, selectedTransactions, outstandingReportsByPolicyID, setSelectedTransactions],
663663
);
664664

665665
const onSelectRow = useCallback(
@@ -809,7 +809,7 @@ function Search({
809809

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

831831
return mapToItemWithAdditionalInfo(item, selectedTransactions, canSelectMultiple, shouldAnimateInHighlight, hash);
832832
}),
833-
[type, status, data, sortBy, sortOrder, validGroupBy, isChat, newSearchResultKeys, selectedTransactions, canSelectMultiple, localeCompare, hash],
833+
[type, status, filteredData, sortBy, sortOrder, validGroupBy, isChat, newSearchResultKeys, selectedTransactions, canSelectMultiple, localeCompare, hash],
834834
);
835835

836836
useEffect(() => {
@@ -848,12 +848,12 @@ function Search({
848848

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

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

858858
const toggleAllTransactions = useCallback(() => {
859859
const areItemsGrouped = !!validGroupBy || isExpenseReportType;
@@ -867,27 +867,27 @@ function Search({
867867
if (areItemsGrouped) {
868868
setSelectedTransactions(
869869
Object.fromEntries(
870-
(data as TransactionGroupListItemType[]).flatMap((item) =>
870+
(filteredData as TransactionGroupListItemType[]).flatMap((item) =>
871871
item.transactions
872872
.filter((t) => !isTransactionPendingDelete(t))
873873
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
874874
),
875875
),
876-
data,
876+
filteredData,
877877
);
878878

879879
return;
880880
}
881881

882882
setSelectedTransactions(
883883
Object.fromEntries(
884-
(data as TransactionListItemType[])
884+
(filteredData as TransactionListItemType[])
885885
.filter((t) => !isTransactionPendingDelete(t))
886886
.map((transactionItem) => mapTransactionItemToSelectedEntry(transactionItem, outstandingReportsByPolicyID)),
887887
),
888-
data,
888+
filteredData,
889889
);
890-
}, [clearSelectedTransactions, data, validGroupBy, selectedTransactions, setSelectedTransactions, outstandingReportsByPolicyID, isExpenseReportType]);
890+
}, [clearSelectedTransactions, filteredData, validGroupBy, selectedTransactions, setSelectedTransactions, outstandingReportsByPolicyID, isExpenseReportType]);
891891

892892
const onLayout = useCallback(() => {
893893
endSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
@@ -940,7 +940,7 @@ function Search({
940940
);
941941
}
942942

943-
const visibleDataLength = data.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
943+
const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
944944
if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchResults?.search?.type)) {
945945
cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
946946
return (

‎src/components/SelectionListWithSections/Search/TransactionGroupListItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,14 +104,14 @@ function TransactionGroupListItem<TItem extends ListItem>({
104104
if (!transactionsSnapshot?.data) {
105105
return [];
106106
}
107-
const sectionData = getSections({
107+
const [sectionData] = getSections({
108108
type: CONST.SEARCH.DATA_TYPES.EXPENSE,
109109
data: transactionsSnapshot?.data,
110110
currentAccountID: accountID,
111111
currentUserEmail: currentUserDetails.email ?? '',
112112
formatPhoneNumber,
113113
isActionLoadingSet,
114-
}) as TransactionListItemType[];
114+
}) as [TransactionListItemType[], number];
115115
return sectionData.map((transactionItem) => ({
116116
...transactionItem,
117117
isSelected: selectedTransactionIDsSet.has(transactionItem.transactionID),

0 commit comments

Comments
 (0)