Merge pull request Expensify#55264 from software-mansion-labs/fix/get-trip-transactions

Remove the getTripTransactions method

Author: tgolen

src/components/ReportActionItem/TripDetailsView.tsx

@@ -15,10 +15,11 @@ import Navigation from '@libs/Navigation/Navigation';
 import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
 import CONST from '@src/CONST';
-import * as ReportUtils from '@src/libs/ReportUtils';
-import * as TripReservationUtils from '@src/libs/TripReservationUtils';
+import type {ReservationData} from '@src/libs/TripReservationUtils';
+import {getReservationsFromTripTransactions, getTripReservationIcon} from '@src/libs/TripReservationUtils';
 import ROUTES from '@src/ROUTES';
 import type {Reservation, ReservationTimeDetails} from '@src/types/onyx/Transaction';
+import type Transaction from '@src/types/onyx/Transaction';
 
 type ReservationViewProps = {
     reservation: Reservation;
@@ -33,7 +34,7 @@ function ReservationView({reservation, transactionID, tripRoomReportID, reservat
     const StyleUtils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
-    const reservationIcon = TripReservationUtils.getTripReservationIcon(reservation.type);
+    const reservationIcon = getTripReservationIcon(reservation.type);
 
     const formatAirportInfo = (reservationTimeDetails: ReservationTimeDetails) => {
         const longName = reservationTimeDetails?.longName ? `${reservationTimeDetails?.longName} ` : '';
@@ -140,14 +141,16 @@ type TripDetailsViewProps = {
 
     /** Whether we should display the horizontal rule below the component */
     shouldShowHorizontalRule: boolean;
+
+    /** Trip transactions associated with the report */
+    tripTransactions: Transaction[];
 };
 
-function TripDetailsView({tripRoomReportID, shouldShowHorizontalRule}: TripDetailsViewProps) {
+function TripDetailsView({tripRoomReportID, shouldShowHorizontalRule, tripTransactions}: TripDetailsViewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
-    const tripTransactions = ReportUtils.getTripTransactions(tripRoomReportID);
-    const reservationsData: TripReservationUtils.ReservationData[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);
+    const reservationsData: ReservationData[] = getReservationsFromTripTransactions(tripTransactions);
 
     return (
         <View>

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -13,13 +13,15 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useTripTransactions from '@hooks/useTripTransactions';
 import ControlSelection from '@libs/ControlSelection';
-import * as CurrencyUtils from '@libs/CurrencyUtils';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import Navigation from '@libs/Navigation/Navigation';
-import * as ReportUtils from '@libs/ReportUtils';
-import * as TripReservationUtils from '@libs/TripReservationUtils';
+import {getMoneyRequestSpendBreakdown} from '@libs/ReportUtils';
+import type {ReservationData} from '@libs/TripReservationUtils';
+import {getReservationsFromTripTransactions, getTripReservationIcon} from '@libs/TripReservationUtils';
 import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import variables from '@styles/variables';
 import * as Expensicons from '@src/components/Icon/Expensicons';
@@ -59,7 +61,7 @@ function ReservationView({reservation}: ReservationViewProps) {
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
 
-    const reservationIcon = TripReservationUtils.getTripReservationIcon(reservation.type);
+    const reservationIcon = getTripReservationIcon(reservation.type);
     const title = reservation.type === CONST.RESERVATION_TYPE.CAR ? reservation.carInfo?.name : reservation.start.longName;
 
     let titleComponent = (
@@ -109,27 +111,27 @@ function ReservationView({reservation}: ReservationViewProps) {
     );
 }
 
-const renderItem = ({item}: {item: TripReservationUtils.ReservationData}) => <ReservationView reservation={item.reservation} />;
+const renderItem = ({item}: {item: ReservationData}) => <ReservationView reservation={item.reservation} />;
 
 function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnchor, isHovered = false, checkIfContextMenuActive = () => {}}: TripRoomPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
     const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReport?.iouReportID}`);
+    const tripTransactions = useTripTransactions(chatReportID);
 
-    const tripTransactions = ReportUtils.getTripTransactions(chatReport?.reportID);
-    const reservationsData: TripReservationUtils.ReservationData[] = TripReservationUtils.getReservationsFromTripTransactions(tripTransactions);
+    const reservationsData: ReservationData[] = getReservationsFromTripTransactions(tripTransactions);
     const dateInfo = chatReport?.tripData ? DateUtils.getFormattedDateRange(new Date(chatReport.tripData.startDate), new Date(chatReport.tripData.endDate)) : '';
-    const {totalDisplaySpend} = ReportUtils.getMoneyRequestSpendBreakdown(chatReport);
+    const {totalDisplaySpend} = getMoneyRequestSpendBreakdown(chatReport);
 
     const currency = iouReport?.currency ?? chatReport?.currency;
     const displayAmount = useMemo(() => {
         if (totalDisplaySpend) {
-            return CurrencyUtils.convertToDisplayString(totalDisplaySpend, currency);
+            return convertToDisplayString(totalDisplaySpend, currency);
         }
 
-        return CurrencyUtils.convertToDisplayString(
-            tripTransactions.reduce((acc, transaction) => acc + Math.abs(transaction.amount), 0),
+        return convertToDisplayString(
+            tripTransactions?.reduce((acc, transaction) => acc + Math.abs(transaction.amount), 0),
             currency,
         );
     }, [currency, totalDisplaySpend, tripTransactions]);
@@ -142,7 +144,7 @@ function TripRoomPreview({action, chatReportID, containerStyles, contextMenuAnch
         >
             <View style={[styles.chatItemMessage, containerStyles]}>
                 <PressableWithoutFeedback
-                    onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                    onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
                     onPressOut={() => ControlSelection.unblock()}
                     onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
                     shouldUseHapticsOnLongPress

src/hooks/useTripTransactions.ts

@@ -0,0 +1,35 @@
+import {useOnyx} from 'react-native-onyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Transaction} from '@src/types/onyx';
+
+/**
+ * Hook to fetch transactions associated with a specific `tripRoom` report.
+ *
+ * Since trip rooms and their transactions lack a direct connection, this hook
+ * fetches all child reports and transactions from Onyx and filters them to derive
+ * relevant transactions for the given trip room.
+ *
+ * @param reportID - The trip room's reportID.
+ * @returns Transactions linked to the specified trip room.
+ */
+function useTripTransactions(reportID: string | undefined): Transaction[] {
+    const [tripTransactionReportIDs = []] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {
+        selector: (reports) =>
+            Object.values(reports ?? {})
+                .filter((report) => report && report.chatReportID === reportID)
+                .map((report) => report?.reportID),
+    });
+    const [tripTransactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
+        selector: (transactions) => {
+            if (!tripTransactionReportIDs.length) {
+                return [];
+            }
+
+            return Object.values(transactions ?? {}).filter((transaction): transaction is Transaction => !!transaction && tripTransactionReportIDs.includes(transaction.reportID));
+        },
+    });
+
+    return tripTransactions;
+}
+
+export default useTripTransactions;

src/libs/ReportUtils.ts

@@ -8328,13 +8328,6 @@ function shouldCreateNewMoneyRequestReport(existingIOUReport: OnyxInputOrEntry<R
     return !existingIOUReport || hasIOUWaitingOnCurrentUserBankAccount(chatReport) || !canAddTransaction(existingIOUReport);
 }
 
-function getTripTransactions(tripRoomReportID: string | undefined, reportFieldToCompare: 'parentReportID' | 'reportID' = 'parentReportID'): Transaction[] {
-    const tripTransactionReportIDs = Object.values(allReports ?? {})
-        .filter((report) => report && report?.[reportFieldToCompare] === tripRoomReportID)
-        .map((report) => report?.reportID);
-    return tripTransactionReportIDs.flatMap((reportID) => getReportTransactions(reportID));
-}
-
 function getTripIDFromTransactionParentReportID(transactionParentReportID: string | undefined): string | undefined {
     return getReportOrDraftReport(transactionParentReportID)?.tripData?.tripID;
 }
@@ -9135,7 +9128,6 @@ export {
     updateOptimisticParentReportAction,
     updateReportPreview,
     temporary_getMoneyRequestOptions,
-    getTripTransactions,
     getTripIDFromTransactionParentReportID,
     buildOptimisticInvoiceReport,
     getInvoiceChatByParticipants,

src/pages/home/report/ReportActionsListItemRenderer.tsx

@@ -1,7 +1,7 @@
 import React, {memo, useMemo} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {getOriginalMessage, isSentMoneyReportAction, isTransactionThread} from '@libs/ReportActionsUtils';
-import {getTripTransactions, isChatThread, isInvoiceRoom, isPolicyExpenseChat, isTripRoom} from '@libs/ReportUtils';
+import {isChatThread, isInvoiceRoom, isPolicyExpenseChat, isTripRoom} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type {Report, ReportAction} from '@src/types/onyx';
 import ReportActionItem from './ReportActionItem';
@@ -144,9 +144,7 @@ function ReportActionsListItemRenderer({
 
     const shouldDisplayParentAction =
         reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED && (!isTransactionThread(parentReportAction) || isSentMoneyReportAction(parentReportAction));
-
-    const tripTransactions = getTripTransactions(report?.reportID);
-    const shouldDisplayTripSummary = shouldDisplayParentAction && isTripRoom(report) && tripTransactions.length > 0;
+    const shouldDisplayTripSummary = shouldDisplayParentAction && isTripRoom(report);
 
     if (shouldDisplayTripSummary) {
         return <TripSummary report={report} />;

src/pages/home/report/TripSummary.tsx

@@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import TripDetailsView from '@components/ReportActionItem/TripDetailsView';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useTripTransactions from '@hooks/useTripTransactions';
 import type * as OnyxTypes from '@src/types/onyx';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import RepliesDivider from './RepliesDivider';
@@ -15,6 +16,7 @@ type TripSummaryProps = {
 
 function TripSummary({report}: TripSummaryProps) {
     const styles = useThemeStyles();
+    const tripTransactions = useTripTransactions(report?.reportID);
 
     if (!report?.reportID) {
         return null;
@@ -26,6 +28,7 @@ function TripSummary({report}: TripSummaryProps) {
             <OfflineWithFeedback pendingAction={report.pendingAction}>
                 <TripDetailsView
                     tripRoomReportID={report.reportID}
+                    tripTransactions={tripTransactions}
                     shouldShowHorizontalRule={false}
                 />
             </OfflineWithFeedback>