Merge pull request Expensify#67247 from software-mansion-labs/@szymczak/refactor-TransactionItemRowRBR

Refactor TransactionItemRowRBRWithOnyx

Author: mountiny

src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx

@@ -17,12 +17,16 @@ import canUseTouchScreen from '@libs/DeviceCapabilities/canUseTouchScreen';
 import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
+import type {Report} from '@src/types/onyx';
 import type {TransactionWithOptionalHighlight} from './MoneyRequestReportTransactionList';
 
 type MoneyRequestReportTransactionItemProps = {
     /** The transaction that is being displayed */
     transaction: TransactionWithOptionalHighlight;
 
+    /** Report to which the transaction belongs */
+    report: Report;
+
     /** Whether the mobile selection mode is enabled */
     isSelectionModeEnabled: boolean;
 
@@ -57,6 +61,7 @@ type MoneyRequestReportTransactionItemProps = {
 function MoneyRequestReportTransactionItem({
     transaction,
     columns,
+    report,
     isSelectionModeEnabled,
     toggleTransaction,
     isSelected,
@@ -119,6 +124,7 @@ function MoneyRequestReportTransactionItem({
             >
                 <TransactionItemRow
                     transactionItem={transaction}
+                    report={report}
                     isSelected={isSelected}
                     dateColumnSize={dateColumnSize}
                     amountColumnSize={amountColumnSize}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -289,6 +289,7 @@ function MoneyRequestReportTransactionList({
                             key={transaction.transactionID}
                             transaction={transaction}
                             columns={columnsToShow}
+                            report={report}
                             isSelectionModeEnabled={isMobileSelectionModeEnabled}
                             toggleTransaction={toggleTransaction}
                             isSelected={isTransactionSelected(transaction.transactionID)}

src/components/SelectionList/Search/TransactionGroupListItem.tsx

@@ -175,6 +175,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
                         groupItem.transactions.map((transaction) => (
                             <TransactionItemRow
                                 key={transaction.transactionID}
+                                report={transaction.report}
                                 transactionItem={transaction}
                                 isSelected={!!transaction.isSelected}
                                 dateColumnSize={dateColumnSize}

src/components/SelectionList/Search/TransactionListItem.tsx

@@ -133,6 +133,7 @@ function TransactionListItem<TItem extends ListItem>({
                 )}
                 <TransactionItemRow
                     transactionItem={transactionItem}
+                    report={transactionItem.report}
                     shouldShowTooltip={showTooltip}
                     onButtonPress={handleActionButtonPress}
                     onCheckboxPress={handleCheckboxPress}

src/components/SelectionList/types.ts

@@ -219,6 +219,9 @@ type ListItem<K extends string | number = string> = {
 
 type TransactionListItemType = ListItem &
     SearchTransaction & {
+        /** Report to which the transaction belongs */
+        report: Report;
+
         /** The personal details of the user requesting money */
         from: SearchPersonalDetails;
 

src/components/TransactionItemRow/TransactionItemRowRBR.tsx

@@ -6,38 +6,45 @@ import {DotIndicator} from '@components/Icon/Expensicons';
 import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useTransactionViolations from '@hooks/useTransactionViolations';
 import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
 import ViolationsUtils from '@libs/Violations/ViolationsUtils';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report} from '@src/types/onyx';
 import type Transaction from '@src/types/onyx/Transaction';
 
 type TransactionItemRowRBRProps = {
     /** Transaction item */
     transaction: Transaction;
 
+    /** Report item */
+    report?: Report;
+
     /** Styles for the RBR messages container */
     containerStyles?: ViewStyle[];
 
     /** Error message for missing required fields in the transaction */
     missingFieldError?: string;
 };
 
-function TransactionItemRowRBRWithOnyx({transaction, containerStyles, missingFieldError}: TransactionItemRowRBRProps) {
+function TransactionItemRowRBRWithOnyx({transaction, report, containerStyles, missingFieldError}: TransactionItemRowRBRProps) {
     const styles = useThemeStyles();
     const transactionViolations = useTransactionViolations(transaction?.transactionID, false);
     const {translate} = useLocalize();
     const theme = useTheme();
-    const {sortedAllReportActions: transactionActions, report} = usePaginatedReportActions(transaction.reportID);
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transaction.reportID}`, {
+        canBeMissing: true,
+    });
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${report?.policyID}`, {canBeMissing: true});
-    const transactionThreadId = transactionActions ? getIOUActionForTransactionID(transactionActions, transaction.transactionID)?.childReportID : undefined;
-    const {sortedAllReportActions: transactionThreadActions} = usePaginatedReportActions(transactionThreadId);
+    const transactionThreadId = reportActions ? getIOUActionForTransactionID(Object.values(reportActions ?? {}), transaction.transactionID)?.childReportID : undefined;
+    const [transactionThreadActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadId}`, {
+        canBeMissing: true,
+    });
 
-    const RBRMessages = ViolationsUtils.getRBRMessages(transaction, transactionViolations, translate, missingFieldError, transactionThreadActions, policyTags);
+    const RBRMessages = ViolationsUtils.getRBRMessages(transaction, transactionViolations, translate, missingFieldError, Object.values(transactionThreadActions ?? {}), policyTags);
 
     return (
         RBRMessages.length > 0 && (

src/components/TransactionItemRow/TransactionItemRowRBRWithOnyx.tsx

@@ -26,7 +26,7 @@ import {
 } from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
-import type {TransactionViolation} from '@src/types/onyx';
+import type {Report, TransactionViolation} from '@src/types/onyx';
 import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import CategoryCell from './DataCells/CategoryCell';
 import ChatBubbleCell from './DataCells/ChatBubbleCell';
@@ -79,6 +79,7 @@ type TransactionWithOptionalSearchFields = TransactionWithOptionalHighlight & {
 
 type TransactionItemRowProps = {
     transactionItem: TransactionWithOptionalSearchFields;
+    report?: Report;
     shouldUseNarrowLayout: boolean;
     isSelected: boolean;
     shouldShowTooltip: boolean;
@@ -111,6 +112,7 @@ function getMerchantName(transactionItem: TransactionWithOptionalSearchFields, t
 
 function TransactionItemRow({
     transactionItem,
+    report,
     shouldUseNarrowLayout,
     isSelected,
     shouldShowTooltip,
@@ -443,6 +445,7 @@ function TransactionItemRow({
                         )}
                         <TransactionItemRowRBRWithOnyx
                             transaction={transactionItem}
+                            report={report}
                             containerStyles={[styles.mt2, styles.minHeight4]}
                             missingFieldError={missingFieldError}
                         />
@@ -476,6 +479,7 @@ function TransactionItemRow({
             </View>
             <TransactionItemRowRBRWithOnyx
                 transaction={transactionItem}
+                report={report}
                 missingFieldError={missingFieldError}
             />
         </View>

src/components/TransactionItemRow/index.tsx

@@ -760,6 +760,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
 
         const transactionSection: TransactionListItemType = {
             action: getAction(data, allViolations, key, currentSearch),
+            report,
             from,
             to,
             formattedFrom,
@@ -1201,6 +1202,7 @@ function getReportSections(
             const transaction = {
                 ...transactionItem,
                 action: getAction(data, allViolations, key, currentSearch, actions),
+                report,
                 from,
                 to,
                 formattedFrom,