diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index bdd7365b7893..7f1e58912128 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -9,8 +9,6 @@ import * as ReportUtils from '../libs/ReportUtils'; import * as Expensicons from './Icon/Expensicons'; import participantPropTypes from './participantPropTypes'; import styles from '../styles/styles'; -import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; -import compose from '../libs/compose'; import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import ONYXKEYS from '../ONYXKEYS'; @@ -20,6 +18,8 @@ import useLocalize from '../hooks/useLocalize'; import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar'; import * as TransactionUtils from '../libs/TransactionUtils'; import reportActionPropTypes from '../pages/home/report/reportActionPropTypes'; +import transactionPropTypes from './transactionPropTypes'; +import useWindowDimensions from '../hooks/useWindowDimensions'; const propTypes = { /** The report currently being looked at */ @@ -34,7 +34,7 @@ const propTypes = { /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, - /** Onyx Props */ + /* Onyx Props */ /** Session info for the currently logged in user. */ session: PropTypes.shape({ /** Currently logged in user email */ @@ -47,13 +47,8 @@ const propTypes = { /** The report action the transaction is tied to from the parent report */ parentReportAction: PropTypes.shape(reportActionPropTypes), - /** The transaction from the parent report action */ - transaction: PropTypes.shape({ - /** The ID of the transaction */ - transactionID: PropTypes.string, - }), - - ...windowDimensionsPropTypes, + /** All the data for the transaction */ + transaction: transactionPropTypes, }; const defaultProps = { @@ -65,24 +60,22 @@ const defaultProps = { transaction: {}, }; -function MoneyRequestHeader(props) { +function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy, personalDetails}) { const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); - const moneyRequestReport = props.parentReport; + const moneyRequestReport = parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); + const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); // Only the requestor can take delete the request, admins can only edit it. - const isActionOwner = props.parentReportAction.actorAccountID === lodashGet(props.session, 'accountID', null); - const report = props.report; - report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); - report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); + const isActionOwner = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null); const deleteTransaction = useCallback(() => { - IOU.deleteMoneyRequest(props.parentReportAction.originalMessage.IOUTransactionID, props.parentReportAction, true); + IOU.deleteMoneyRequest(lodashGet(parentReportAction, 'originalMessage.IOUTransactionID'), parentReportAction, true); setIsDeleteModalVisible(false); - }, [props.parentReportAction, setIsDeleteModalVisible]); + }, [parentReportAction, setIsDeleteModalVisible]); - const isScanning = TransactionUtils.hasReceipt(props.transaction) && TransactionUtils.isReceiptBeingScanned(props.transaction); + const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); return ( <> @@ -94,15 +87,19 @@ function MoneyRequestHeader(props) { threeDotsMenuItems={[ { icon: Expensicons.Trashcan, - text: translate('reportActionContextMenu.deleteAction', {action: props.parentReportAction}), + text: translate('reportActionContextMenu.deleteAction', {action: parentReportAction}), onSelected: () => setIsDeleteModalVisible(true), }, ]} - threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(props.windowWidth)} - report={report} - policy={props.policy} - personalDetails={props.personalDetails} - shouldShowBackButton={props.isSmallScreenWidth} + threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)} + report={{ + ...report, + ownerAccountID: lodashGet(parentReport, 'ownerAccountID', null), + ownerEmail: lodashGet(parentReport, 'ownerEmail', null), + }} + policy={policy} + personalDetails={personalDetails} + shouldShowBackButton={isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(ROUTES.HOME, false, true)} /> {isScanning && } @@ -125,23 +122,19 @@ MoneyRequestHeader.displayName = 'MoneyRequestHeader'; MoneyRequestHeader.propTypes = propTypes; MoneyRequestHeader.defaultProps = defaultProps; -export default compose( - withWindowDimensions, - withOnyx({ - session: { - key: ONYXKEYS.SESSION, - }, - parentReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, - }, - parentReportAction: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(report.parentReportID, report.parentReportActionID)}`, - selector: (reportActions, props) => props && props.parentReport && reportActions && reportActions[props.parentReport.parentReportActionID], - canEvict: false, - }, - transaction: { - key: ({report, parentReportActions}) => - `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportActions, [report.parentReportActionID, 'originalMessage', 'IOUTransactionID'], '')}`, - }, - }), -)(MoneyRequestHeader); +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, + parentReport: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`, + }, + parentReportAction: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(report.parentReportID, report.parentReportActionID)}`, + selector: (reportActions, props) => props && props.parentReport && reportActions && reportActions[props.parentReport.parentReportActionID], + canEvict: false, + }, + transaction: { + key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`, + }, +})(MoneyRequestHeader); diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js index fde847bd9bfc..9b20ee0168aa 100644 --- a/src/libs/ReportActionsUtils.js +++ b/src/libs/ReportActionsUtils.js @@ -122,6 +122,7 @@ function isThreadParentMessage(reportAction = {}, reportID) { * @param {Object} report * @param {Object} [allReportActionsParam] * @returns {Object} + * @deprecated Use Onyx.connect() or withOnyx() instead */ function getParentReportAction(report, allReportActionsParam = undefined) { if (!report || !report.parentReportID || !report.parentReportActionID) { diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js index 4ca8b48d284e..94381c102ff4 100644 --- a/src/libs/TransactionUtils.js +++ b/src/libs/TransactionUtils.js @@ -161,6 +161,7 @@ function getUpdatedTransaction(transaction, transactionChanges, isFromExpenseRep * * @param {String} transactionID * @returns {Object} + * @deprecated Use withOnyx() or Onyx.connect() instead */ function getTransaction(transactionID) { return lodashGet(allTransactions, `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`, {}); @@ -291,6 +292,7 @@ function hasMissingSmartscanFields(transaction) { * * @param {Object} reportAction * @returns {Object} + * @deprecated Use Onyx.connect() or withOnyx() instead */ function getLinkedTransaction(reportAction = {}) { const transactionID = lodashGet(reportAction, ['originalMessage', 'IOUTransactionID'], '');