From f8769d8874da1f034cd65bc62e0a5dc01debdb55 Mon Sep 17 00:00:00 2001 From: cretadn22 Date: Thu, 3 Oct 2024 10:12:45 +0700 Subject: [PATCH 1/3] reset selected transaction if getting new updates --- src/components/Search/index.tsx | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index e459be1815bc..97f58dc8624a 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -180,12 +180,31 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0; const isSearchResultsEmpty = !searchResults?.data || SearchUtils.isSearchResultsEmpty(searchResults); const prevIsSearchResultEmpty = usePrevious(isSearchResultsEmpty); + const data = searchResults === undefined ? [] : SearchUtils.getSections(type, status, searchResults.data, searchResults.search); useEffect(() => { /** We only want to display the skeleton for the status filters the first time we load them for a specific data type */ setShouldShowStatusBarLoading(shouldShowLoadingState && searchResults?.search?.type !== type); }, [searchResults?.search?.type, setShouldShowStatusBarLoading, shouldShowLoadingState, type]); + useEffect(() => { + const newTransactionList: SelectedTransactions = {}; + data.forEach((report) => { + report?.transactions?.forEach((transaction) => { + if (Object.keys(selectedTransactions).includes(transaction.transactionID)) { + newTransactionList[transaction.transactionID] = { + action: transaction.action, + canHold: transaction.canHold, + canUnhold: transaction.canUnhold, + isSelected: selectedTransactions[transaction.transactionID].isSelected, + canDelete: transaction.canDelete, + } + } + }) + }) + setSelectedTransactions(newTransactionList, data); + }, [data]) + useEffect(() => { if (!isSearchResultsEmpty || prevIsSearchResultEmpty) { return; @@ -208,7 +227,6 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr } const ListItem = SearchUtils.getListItem(type, status); - const data = SearchUtils.getSections(type, status, searchResults.data, searchResults.search); const sortedData = SearchUtils.getSortedSections(type, status, data, sortBy, sortOrder); const sortedSelectedData = sortedData.map((item) => { const baseKey = `${ONYXKEYS.COLLECTION.TRANSACTION}${(item as TransactionListItemType).transactionID}`; From 2cecae194d9564aeefc2ae77ccf05e491a4fbf8e Mon Sep 17 00:00:00 2001 From: cretadn22 Date: Thu, 3 Oct 2024 10:32:26 +0700 Subject: [PATCH 2/3] adjust lint error and TS error --- src/components/Search/index.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 97f58dc8624a..2663d6a0f04f 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -190,7 +190,8 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr useEffect(() => { const newTransactionList: SelectedTransactions = {}; data.forEach((report) => { - report?.transactions?.forEach((transaction) => { + const transactions: TransactionListItemType[] = Object.hasOwn(report, 'transactions') && 'transactions' in report ? report.transactions : []; + transactions.forEach((transaction) => { if (Object.keys(selectedTransactions).includes(transaction.transactionID)) { newTransactionList[transaction.transactionID] = { action: transaction.action, @@ -198,13 +199,14 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr canUnhold: transaction.canUnhold, isSelected: selectedTransactions[transaction.transactionID].isSelected, canDelete: transaction.canDelete, - } + }; } - }) - }) + }); + }); setSelectedTransactions(newTransactionList, data); - }, [data]) - + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [data, setSelectedTransactions]); + useEffect(() => { if (!isSearchResultsEmpty || prevIsSearchResultEmpty) { return; From 10767d0ba6811e63f918aeb9dd605b02bed21d3b Mon Sep 17 00:00:00 2001 From: cretadn22 Date: Thu, 3 Oct 2024 10:44:39 +0700 Subject: [PATCH 3/3] adjust lint --- src/components/Search/index.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 2663d6a0f04f..3556ff068b55 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -190,17 +190,18 @@ function Search({queryJSON, onSearchListScroll, contentContainerStyle}: SearchPr useEffect(() => { const newTransactionList: SelectedTransactions = {}; data.forEach((report) => { - const transactions: TransactionListItemType[] = Object.hasOwn(report, 'transactions') && 'transactions' in report ? report.transactions : []; - transactions.forEach((transaction) => { - if (Object.keys(selectedTransactions).includes(transaction.transactionID)) { - newTransactionList[transaction.transactionID] = { - action: transaction.action, - canHold: transaction.canHold, - canUnhold: transaction.canUnhold, - isSelected: selectedTransactions[transaction.transactionID].isSelected, - canDelete: transaction.canDelete, - }; + const transactionsData: TransactionListItemType[] = Object.hasOwn(report, 'transactions') && 'transactions' in report ? report.transactions : []; + transactionsData.forEach((transaction) => { + if (!Object.keys(selectedTransactions).includes(transaction.transactionID)) { + return; } + newTransactionList[transaction.transactionID] = { + action: transaction.action, + canHold: transaction.canHold, + canUnhold: transaction.canUnhold, + isSelected: selectedTransactions[transaction.transactionID].isSelected, + canDelete: transaction.canDelete, + }; }); }); setSelectedTransactions(newTransactionList, data);