Skip to content

Commit 0c50a26

Browse files
TMisiukiewiczTMisiukiewicz
committed
extract money report transaction thread into context
1 parent aad2ed0 commit 0c50a26

9 files changed

Lines changed: 83 additions & 81 deletions

‎Mobile-Expensify‎

‎src/components/MoneyReportHeaderActions/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@ import {View} from 'react-native';
33
import type {ValueOf} from 'type-fest';
44
import type {ButtonWithDropdownMenuRef} from '@components/ButtonWithDropdownMenu/types';
55
import MoneyReportHeaderPrimaryAction from '@components/MoneyReportHeaderPrimaryAction';
6+
import {useMoneyReportTransactionThread} from '@components/MoneyReportTransactionThreadContext';
67
import {useSearchSelectionActions, useSearchSelectionContext} from '@components/Search/SearchContext';
78
import useExportAgainModal from '@hooks/useExportAgainModal';
89
import useOnyx from '@hooks/useOnyx';
910
import useResponsiveLayout from '@hooks/useResponsiveLayout';
1011
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
1112
import useThemeStyles from '@hooks/useThemeStyles';
12-
import useTransactionThreadReport from '@hooks/useTransactionThreadReport';
1313
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
1414
import CONST from '@src/CONST';
1515
import ONYXKEYS from '@src/ONYXKEYS';
@@ -40,7 +40,7 @@ function MoneyReportHeaderActions({reportID, primaryAction, isReportInSearch, ba
4040
const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
4141
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`);
4242

43-
const {transactionThreadReportID} = useTransactionThreadReport(reportID);
43+
const {transactionThreadReportID} = useMoneyReportTransactionThread();
4444

4545
const {triggerExportOrConfirm} = useExportAgainModal(moneyRequestReport?.reportID, moneyRequestReport?.policyID);
4646

‎src/components/MoneyReportHeaderEducationalModals.tsx‎

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,17 @@ import type {ValueOf} from 'type-fest';
55
import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
66
import useNetwork from '@hooks/useNetwork';
77
import useOnyx from '@hooks/useOnyx';
8-
import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
9-
import useTransactionsAndViolationsForReport from '@hooks/useTransactionsAndViolationsForReport';
108
import {setNameValuePair} from '@libs/actions/User';
119
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
12-
import {getAllNonDeletedTransactions} from '@libs/MoneyRequestReportUtils';
1310
import Navigation from '@libs/Navigation/Navigation';
14-
import {getFilteredReportActionsForReportView, getOneTransactionThreadReportID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
1511
import {changeMoneyRequestHoldStatus, rejectMoneyRequestReason} from '@libs/ReportUtils';
1612
import {dismissRejectUseExplanation} from '@userActions/IOU/RejectMoneyRequest';
1713
import CONST from '@src/CONST';
1814
import ONYXKEYS from '@src/ONYXKEYS';
1915
import ROUTES from '@src/ROUTES';
20-
import type * as OnyxTypes from '@src/types/onyx';
2116
import HoldOrRejectEducationalModal from './HoldOrRejectEducationalModal';
2217
import HoldSubmitterEducationalModal from './HoldSubmitterEducationalModal';
18+
import {useMoneyReportTransactionThread} from './MoneyReportTransactionThreadContext';
2319

2420
type RejectModalAction = ValueOf<
2521
typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.HOLD | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT | typeof CONST.REPORT.TRANSACTION_SECONDARY_ACTIONS.REJECT_BULK
@@ -42,27 +38,9 @@ function MoneyReportHeaderEducationalModals({reportID, ref}: MoneyReportHeaderEd
4238
const {isOffline} = useNetwork();
4339
const [shouldFailAllRequests] = useOnyx(ONYXKEYS.NETWORK, {selector: shouldFailAllRequestsSelector});
4440

45-
// Fetch report data needed for educational modals
46-
const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
47-
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`);
48-
const {reportActions: unfilteredReportActions} = usePaginatedReportActions(moneyRequestReport?.reportID);
49-
const reportActions = getFilteredReportActionsForReportView(unfilteredReportActions);
50-
const {transactions: reportTransactions} = useTransactionsAndViolationsForReport(moneyRequestReport?.reportID);
5141
const {login: currentUserLogin, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
5242

53-
// Derive transaction thread and parent action
54-
const nonDeletedTransactions = getAllNonDeletedTransactions(reportTransactions, reportActions, isOffline, true);
55-
const visibleTransactionsForThreadID = nonDeletedTransactions?.filter((t) => isOffline || t.pendingAction !== 'delete');
56-
const reportTransactionIDs = visibleTransactionsForThreadID?.map((t) => t.transactionID);
57-
const transactionThreadReportID = getOneTransactionThreadReportID(moneyRequestReport, chatReport, reportActions ?? [], isOffline, reportTransactionIDs);
58-
const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
59-
60-
const requestParentReportAction =
61-
reportActions && transactionThreadReport?.parentReportActionID
62-
? reportActions.find((action): action is OnyxTypes.ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.IOU> => action.reportActionID === transactionThreadReport.parentReportActionID)
63-
: null;
64-
65-
const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
43+
const {iouTransactionID, requestParentReportAction} = useMoneyReportTransactionThread();
6644
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(iouTransactionID)}`);
6745

6846
useImperativeHandle(ref, () => ({

‎src/components/MoneyReportHeaderModals.tsx‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import MoneyReportHeaderEducationalModals from './MoneyReportHeaderEducationalMo
1818
import type {MoneyReportHeaderEducationalModalsHandle, RejectModalAction} from './MoneyReportHeaderEducationalModals';
1919
import MoneyReportHeaderModalsContext from './MoneyReportHeaderModalsContext';
2020
import type {HoldMenuParams} from './MoneyReportHeaderModalsContext';
21+
import {MoneyReportTransactionThreadProvider} from './MoneyReportTransactionThreadContext';
2122
import ReportPDFDownloadModal from './ReportPDFDownloadModal';
2223

2324
type MoneyReportHeaderModalsProps = {
@@ -109,18 +110,20 @@ function MoneyReportHeaderModals({reportID, children}: MoneyReportHeaderModalsPr
109110

110111
return (
111112
<MoneyReportHeaderModalsContext.Provider value={contextValue}>
112-
{children}
113-
114-
<MoneyReportHeaderEducationalModals
115-
ref={educationalModalsRef}
116-
reportID={moneyRequestReport?.reportID}
117-
/>
118-
119-
<ReportPDFDownloadModal
120-
reportID={moneyRequestReport?.reportID}
121-
isVisible={isPDFModalVisible}
122-
onClose={() => setIsPDFModalVisible(false)}
123-
/>
113+
<MoneyReportTransactionThreadProvider reportID={moneyRequestReport?.reportID}>
114+
{children}
115+
116+
<MoneyReportHeaderEducationalModals
117+
ref={educationalModalsRef}
118+
reportID={moneyRequestReport?.reportID}
119+
/>
120+
121+
<ReportPDFDownloadModal
122+
reportID={moneyRequestReport?.reportID}
123+
isVisible={isPDFModalVisible}
124+
onClose={() => setIsPDFModalVisible(false)}
125+
/>
126+
</MoneyReportTransactionThreadProvider>
124127
</MoneyReportHeaderModalsContext.Provider>
125128
);
126129
}

‎src/components/MoneyReportHeaderMoreContent.tsx‎

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,21 @@ import {View} from 'react-native';
44
import type {OnyxEntry} from 'react-native-onyx';
55
import type {ValueOf} from 'type-fest';
66
import useMoneyReportHeaderStatusBar from '@hooks/useMoneyReportHeaderStatusBar';
7-
import useNetwork from '@hooks/useNetwork';
87
import useOnyx from '@hooks/useOnyx';
9-
import usePaginatedReportActions from '@hooks/usePaginatedReportActions';
10-
import useReportTransactionsCollection from '@hooks/useReportTransactionsCollection';
118
import useResponsiveLayout from '@hooks/useResponsiveLayout';
129
import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
1310
import useThemeStyles from '@hooks/useThemeStyles';
1411
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
15-
import {getAllNonDeletedTransactions} from '@libs/MoneyRequestReportUtils';
1612
import type {PlatformStackRouteProp} from '@libs/Navigation/PlatformStackNavigation/types';
1713
import type {ReportsSplitNavigatorParamList, RightModalNavigatorParamList} from '@libs/Navigation/types';
18-
import {getFilteredReportActionsForReportView, getOneTransactionThreadReportID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
1914
import {isInvoiceReport as isInvoiceReportUtil} from '@libs/ReportUtils';
2015
import CONST from '@src/CONST';
2116
import ONYXKEYS from '@src/ONYXKEYS';
2217
import SCREENS from '@src/SCREENS';
2318
import type * as OnyxTypes from '@src/types/onyx';
2419
import MoneyReportHeaderNextStep from './MoneyReportHeaderNextStep';
2520
import MoneyReportHeaderStatusBarSection from './MoneyReportHeaderStatusBarSection';
21+
import {useMoneyReportTransactionThread} from './MoneyReportTransactionThreadContext';
2622
import MoneyRequestReportNavigation from './MoneyRequestReportView/MoneyRequestReportNavigation';
2723

2824
type MoneyReportHeaderMoreContentProps = {
@@ -76,29 +72,13 @@ type MoneyReportHeaderMoreContentBodyProps = {
7672

7773
function MoneyReportHeaderMoreContentBody({moneyRequestReport, statusBarType, isReportInSearch, shouldShowNextStep}: MoneyReportHeaderMoreContentBodyProps) {
7874
const styles = useThemeStyles();
79-
const {isOffline} = useNetwork();
8075
const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
8176
const shouldDisplayNarrowVersion = shouldUseNarrowLayout || isMediumScreenWidth;
8277
const {isWideRHPDisplayedOnWideLayout, isSuperWideRHPDisplayedOnWideLayout} = useResponsiveLayoutOnWideRHP();
8378
const shouldDisplayNarrowMoreButton = !shouldDisplayNarrowVersion || isWideRHPDisplayedOnWideLayout || isSuperWideRHPDisplayedOnWideLayout;
8479

8580
const reportID = moneyRequestReport?.reportID;
86-
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${moneyRequestReport?.chatReportID}`);
87-
88-
const {reportActions: unfilteredReportActions} = usePaginatedReportActions(reportID);
89-
const reportActions = getFilteredReportActionsForReportView(unfilteredReportActions);
90-
91-
const allReportTransactions = useReportTransactionsCollection(reportID);
92-
const nonDeletedTransactions = getAllNonDeletedTransactions(allReportTransactions, reportActions, isOffline, true);
93-
const visibleTransactionsForThreadID = nonDeletedTransactions?.filter((t) => isOffline || t.pendingAction !== 'delete');
94-
const reportTransactionIDs = visibleTransactionsForThreadID?.map((t) => t.transactionID);
95-
const transactionThreadReportID = getOneTransactionThreadReportID(moneyRequestReport, chatReport, reportActions ?? [], isOffline, reportTransactionIDs);
96-
const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`);
97-
98-
const requestParentReportAction =
99-
reportActions && transactionThreadReport?.parentReportActionID ? reportActions.find((action) => action.reportActionID === transactionThreadReport.parentReportActionID) : null;
100-
101-
const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
81+
const {iouTransactionID} = useMoneyReportTransactionThread();
10282

10383
return (
10484
<View style={[styles.flexRow, styles.gap2, styles.justifyContentStart, styles.flexNoWrap, styles.ph5, styles.pb3]}>

‎src/components/MoneyReportTransactionThreadContext.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, {createContext, useContext} from 'react';
2+
import type {ReactNode} from 'react';
3+
import useTransactionThreadReport from '@hooks/useTransactionThreadReport';
4+
import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
5+
import type CONST from '@src/CONST';
6+
import type * as OnyxTypes from '@src/types/onyx';
7+
8+
type MoneyReportTransactionThreadContextValue = {
9+
iouTransactionID: string | undefined;
10+
requestParentReportAction: OnyxTypes.ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.IOU> | null;
11+
transactionThreadReportID: string | undefined;
12+
reportActions: OnyxTypes.ReportAction[];
13+
};
14+
15+
const defaultValue: MoneyReportTransactionThreadContextValue = {
16+
iouTransactionID: undefined,
17+
requestParentReportAction: null,
18+
transactionThreadReportID: undefined,
19+
reportActions: [],
20+
};
21+
22+
const MoneyReportTransactionThreadContext = createContext<MoneyReportTransactionThreadContextValue>(defaultValue);
23+
24+
type MoneyReportTransactionThreadProviderProps = {
25+
reportID: string | undefined;
26+
children: ReactNode;
27+
};
28+
29+
function MoneyReportTransactionThreadProvider({reportID, children}: MoneyReportTransactionThreadProviderProps) {
30+
const {transactionThreadReportID, transactionThreadReport, reportActions} = useTransactionThreadReport(reportID);
31+
32+
const requestParentReportAction =
33+
reportActions?.find((action): action is OnyxTypes.ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.IOU> => action.reportActionID === transactionThreadReport?.parentReportActionID) ??
34+
null;
35+
36+
const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
37+
38+
const value: MoneyReportTransactionThreadContextValue = {
39+
iouTransactionID,
40+
requestParentReportAction: requestParentReportAction ?? null,
41+
transactionThreadReportID,
42+
reportActions: reportActions ?? [],
43+
};
44+
45+
return <MoneyReportTransactionThreadContext.Provider value={value}>{children}</MoneyReportTransactionThreadContext.Provider>;
46+
}
47+
48+
function useMoneyReportTransactionThread() {
49+
return useContext(MoneyReportTransactionThreadContext);
50+
}
51+
52+
export default MoneyReportTransactionThreadContext;
53+
export {MoneyReportTransactionThreadProvider, useMoneyReportTransactionThread};

‎src/hooks/useExpenseActions.ts‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {ValueOf} from 'type-fest';
88
import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
99
import {ModalActions} from '@components/Modal/Global/ModalContext';
1010
import type {SecondaryActionEntry} from '@components/MoneyReportHeaderActions/types';
11+
import {useMoneyReportTransactionThread} from '@components/MoneyReportTransactionThreadContext';
1112
import {useSearchQueryContext, useSearchSelectionActions} from '@components/Search/SearchContext';
1213
import {duplicateReport as duplicateReportAction, duplicateExpenseTransaction as duplicateTransactionAction} from '@libs/actions/IOU/Duplicate';
1314
import {setupMergeTransactionDataAndNavigate} from '@libs/actions/MergeTransaction';
@@ -19,7 +20,7 @@ import Log from '@libs/Log';
1920
import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
2021
import Navigation from '@libs/Navigation/Navigation';
2122
import {isPolicyAccessible} from '@libs/PolicyUtils';
22-
import {getIOUActionForTransactionID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
23+
import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils';
2324
import {
2425
canEditFieldOfMoneyRequest,
2526
canUserPerformWriteAction as canUserPerformWriteActionReportUtils,
@@ -62,7 +63,6 @@ import useReportIsArchived from './useReportIsArchived';
6263
import useTheme from './useTheme';
6364
import useThrottledButtonState from './useThrottledButtonState';
6465
import useTransactionsAndViolationsForReport from './useTransactionsAndViolationsForReport';
65-
import useTransactionThreadReport from './useTransactionThreadReport';
6666
import useTransactionViolations from './useTransactionViolations';
6767

6868
type UseExpenseActionsParams = {
@@ -96,7 +96,7 @@ function useExpenseActions({reportID, isReportInSearch = false, backTo, onDuplic
9696
const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(moneyRequestReport?.policyID)}`);
9797
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`);
9898

99-
const {transactionThreadReportID, transactionThreadReport, reportActions} = useTransactionThreadReport(reportID);
99+
const {iouTransactionID, requestParentReportAction, transactionThreadReportID, reportActions} = useMoneyReportTransactionThread();
100100

101101
const {transactions: reportTransactions} = useTransactionsAndViolationsForReport(moneyRequestReport?.reportID);
102102

@@ -110,11 +110,6 @@ function useExpenseActions({reportID, isReportInSearch = false, backTo, onDuplic
110110
}
111111

112112
const currentTransaction = transactions.at(0);
113-
const requestParentReportAction =
114-
reportActions?.find((action): action is OnyxTypes.ReportAction<typeof CONST.REPORT.ACTIONS.TYPE.IOU> => action.reportActionID === transactionThreadReport?.parentReportActionID) ??
115-
null;
116-
117-
const iouTransactionID = isMoneyRequestAction(requestParentReportAction) ? getOriginalMessage(requestParentReportAction)?.IOUTransactionID : undefined;
118113
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(iouTransactionID)}`);
119114
const [originalTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(transaction?.comment?.originalTransactionID)}`);
120115
const {iouReport, chatReport: chatIOUReport, isChatIOUReportArchived} = useGetIOUReportFromReportAction(requestParentReportAction);

‎src/hooks/useHoldRejectActions.ts‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import type {ValueOf} from 'type-fest';
22
import {useDelegateNoAccessActions, useDelegateNoAccessState} from '@components/DelegateNoAccessModalProvider';
33
import type {SecondaryActionEntry} from '@components/MoneyReportHeaderActions/types';
44
import type {RejectModalAction} from '@components/MoneyReportHeaderEducationalModals';
5+
import {useMoneyReportTransactionThread} from '@components/MoneyReportTransactionThreadContext';
56
import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
67
import Navigation from '@libs/Navigation/Navigation';
7-
import {getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils';
88
import {changeMoneyRequestHoldStatus, isCurrentUserSubmitter, isDM} from '@libs/ReportUtils';
99
import CONST from '@src/CONST';
1010
import ONYXKEYS from '@src/ONYXKEYS';
@@ -15,7 +15,6 @@ import {useMemoizedLazyExpensifyIcons} from './useLazyAsset';
1515
import useLocalize from './useLocalize';
1616
import useNetwork from './useNetwork';
1717
import useOnyx from './useOnyx';
18-
import useTransactionThreadReport from './useTransactionThreadReport';
1918

2019
type UseHoldRejectActionsParams = {
2120
reportID: string | undefined;
@@ -38,18 +37,12 @@ function useHoldRejectActions({reportID, onHoldEducationalOpen, onRejectModalOpe
3837

3938
const [moneyRequestReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`);
4039
const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(moneyRequestReport?.chatReportID)}`);
41-
const {transactionThreadReport} = useTransactionThreadReport(reportID);
40+
const {iouTransactionID, requestParentReportAction} = useMoneyReportTransactionThread();
4241
const {login: currentUserLogin, accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
4342

44-
const [reportActionsForParent] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getNonEmptyStringOnyxID(moneyRequestReport?.reportID)}`);
45-
const requestParentReportAction = transactionThreadReport?.parentReportActionID ? reportActionsForParent?.[transactionThreadReport.parentReportActionID] : undefined;
46-
4743
const {chatReport: chatIOUReport} = useGetIOUReportFromReportAction(requestParentReportAction);
4844

49-
const iouTransactionID = isMoneyRequestAction(requestParentReportAction)
50-
? (getOriginalMessage(requestParentReportAction)?.IOUTransactionID ?? CONST.DEFAULT_NUMBER_ID)
51-
: CONST.DEFAULT_NUMBER_ID;
52-
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${iouTransactionID}`);
45+
const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${getNonEmptyStringOnyxID(iouTransactionID)}`);
5346

5447
const [dismissedRejectUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_REJECT_USE_EXPLANATION);
5548
const [dismissedHoldUseExplanation] = useOnyx(ONYXKEYS.NVP_DISMISSED_HOLD_USE_EXPLANATION);

0 commit comments

Comments
 (0)