From 0102215f4b4fc54c3ed74215122ce3a8d7b7c495 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 12:41:15 -0600 Subject: [PATCH 1/8] Mark methods as deprecated --- src/libs/ReportActionsUtils.js | 1 + src/libs/TransactionUtils.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/libs/ReportActionsUtils.js b/src/libs/ReportActionsUtils.js index 9bb365c0f42a..00db89abe424 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 8cdb0c0271e6..49f037969d12 100644 --- a/src/libs/TransactionUtils.js +++ b/src/libs/TransactionUtils.js @@ -278,6 +278,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'], ''); From 4a9d6f6775c58139412db5eb612cdcb66e9ef659 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 13:32:09 -0600 Subject: [PATCH 2/8] Fetch objects using withOnyx --- src/components/MoneyRequestHeader.js | 39 +++++++++++++++++++--------- 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index f04a41ae1153..372ae1131d93 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -15,19 +15,17 @@ import Navigation from '../libs/Navigation/Navigation'; import ROUTES from '../ROUTES'; import ONYXKEYS from '../ONYXKEYS'; import * as IOU from '../libs/actions/IOU'; -import * as ReportActionsUtils from '../libs/ReportActionsUtils'; import ConfirmModal from './ConfirmModal'; 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'; const propTypes = { /** The report currently being looked at */ report: iouReportPropTypes.isRequired, - /** The expense report or iou report (only will have a value if this is a transaction thread) */ - parentReport: iouReportPropTypes, - /** The policy which the report is tied to */ policy: PropTypes.shape({ /** Name of the policy */ @@ -37,13 +35,24 @@ const propTypes = { /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, + ...windowDimensionsPropTypes, + + /* Onyx Props */ + /** Session info for the currently logged in user. */ session: PropTypes.shape({ /** Currently logged in user email */ email: PropTypes.string, }), - ...windowDimensionsPropTypes, + /** The expense report or iou report (only will have a value if this is a transaction thread) */ + parentReport: iouReportPropTypes, + + /** The report action the transaction is tied to from the parent report */ + parentReportAction: PropTypes.shape(reportActionPropTypes), + + /** All the data for the transaction */ + transaction: transactionPropTypes, }; const defaultProps = { @@ -51,6 +60,8 @@ const defaultProps = { email: null, }, parentReport: {}, + parentReportAction: {}, + transaction: {}, }; function MoneyRequestHeader(props) { @@ -59,21 +70,18 @@ function MoneyRequestHeader(props) { const moneyRequestReport = props.parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); - const parentReportAction = ReportActionsUtils.getParentReportAction(props.report); - // Only the requestor can take delete the request, admins can only edit it. - const isActionOwner = parentReportAction.actorAccountID === lodashGet(props.session, 'accountID', null); + 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 deleteTransaction = useCallback(() => { - IOU.deleteMoneyRequest(parentReportAction.originalMessage.IOUTransactionID, parentReportAction, true); + IOU.deleteMoneyRequest(props.parentReportAction?.originalMessage.IOUTransactionID, props.parentReportAction, true); setIsDeleteModalVisible(false); - }, [parentReportAction, setIsDeleteModalVisible]); + }, [props.parentReportAction, setIsDeleteModalVisible]); - const transaction = TransactionUtils.getLinkedTransaction(parentReportAction); - const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); + const isScanning = TransactionUtils.hasReceipt(props.transaction) && TransactionUtils.isReceiptBeingScanned(props.transaction); return ( <> @@ -125,5 +133,12 @@ export default compose( 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[props.parentReport.parentReportActionID], + }, + transaction: { + key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID || 0}`, + }, }), )(MoneyRequestHeader); From 96f46d35daf62031d31db65f39a3aa59a9310df4 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 13:55:57 -0600 Subject: [PATCH 3/8] Fix some issues with props loading --- src/components/MoneyRequestHeader.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 372ae1131d93..d93170c224c5 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -93,7 +93,7 @@ function MoneyRequestHeader(props) { threeDotsMenuItems={[ { icon: Expensicons.Trashcan, - text: translate('reportActionContextMenu.deleteAction', {action: parentReportAction}), + text: translate('reportActionContextMenu.deleteAction', {action: props.parentReportAction}), onSelected: () => setIsDeleteModalVisible(true), }, ]} @@ -135,7 +135,8 @@ export default compose( }, parentReportAction: { key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${(report.parentReportID, report.parentReportActionID)}`, - selector: (reportActions, props) => props && props.parentReport && reportActions[props.parentReport.parentReportActionID], + selector: (reportActions, props) => props && props.parentReport && reportActions && reportActions[props.parentReport.parentReportActionID], + canEvict: false, }, transaction: { key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID || 0}`, From db642ba2f66625efa7b275369623b9b2c76064d4 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 14:22:09 -0600 Subject: [PATCH 4/8] Remove optional chaining --- src/components/MoneyRequestHeader.js | 6 +++--- src/libs/TransactionUtils.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index d93170c224c5..485ff8050fb1 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -71,13 +71,13 @@ function MoneyRequestHeader(props) { const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); // Only the requestor can take delete the request, admins can only edit it. - const isActionOwner = props.parentReportAction?.actorAccountID === lodashGet(props.session, 'accountID', null); + const isActionOwner = lodashGet(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 deleteTransaction = useCallback(() => { - IOU.deleteMoneyRequest(props.parentReportAction?.originalMessage.IOUTransactionID, props.parentReportAction, true); + IOU.deleteMoneyRequest(lodashGet(props, 'parentReportAction.originalMessage.IOUTransactionID'), props.parentReportAction, true); setIsDeleteModalVisible(false); }, [props.parentReportAction, setIsDeleteModalVisible]); @@ -139,7 +139,7 @@ export default compose( canEvict: false, }, transaction: { - key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction?.originalMessage?.IOUTransactionID || 0}`, + key: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`, }, }), )(MoneyRequestHeader); diff --git a/src/libs/TransactionUtils.js b/src/libs/TransactionUtils.js index 7035250f8a2d..3ece9a016437 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}`, {}); From 0f2cfbf8df5c9e89858938ab1e67beb1ad33f64a Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 14:36:10 -0600 Subject: [PATCH 5/8] Make lint warning go away --- src/components/MoneyRequestHeader.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 485ff8050fb1..77646bd9a2f4 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -76,10 +76,11 @@ function MoneyRequestHeader(props) { report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); + const parentReportAction = props.parentReportAction; const deleteTransaction = useCallback(() => { IOU.deleteMoneyRequest(lodashGet(props, 'parentReportAction.originalMessage.IOUTransactionID'), props.parentReportAction, true); setIsDeleteModalVisible(false); - }, [props.parentReportAction, setIsDeleteModalVisible]); + }, [parentReportAction, setIsDeleteModalVisible]); const isScanning = TransactionUtils.hasReceipt(props.transaction) && TransactionUtils.isReceiptBeingScanned(props.transaction); From 3b14e96a36a31f4539a8cd8b9b19f062c31b401c Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 14:50:54 -0600 Subject: [PATCH 6/8] Try to fix props dependency --- src/components/MoneyRequestHeader.js | 30 ++++++++++++++-------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 77646bd9a2f4..b910ebebae0b 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -64,25 +64,21 @@ const defaultProps = { transaction: {}, }; -function MoneyRequestHeader(props) { +function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy, personalDetails, isSmallScreenWidth, windowWidth}) { const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); - const moneyRequestReport = props.parentReport; + const moneyRequestReport = parentReport; const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); // Only the requestor can take delete the request, admins can only edit it. - const isActionOwner = lodashGet(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(props, 'parentReportAction.actorAccountID') === lodashGet(session, 'accountID', null); - const parentReportAction = props.parentReportAction; const deleteTransaction = useCallback(() => { - IOU.deleteMoneyRequest(lodashGet(props, 'parentReportAction.originalMessage.IOUTransactionID'), props.parentReportAction, true); + IOU.deleteMoneyRequest(lodashGet(props, 'parentReportAction.originalMessage.IOUTransactionID'), parentReportAction, true); setIsDeleteModalVisible(false); }, [parentReportAction, setIsDeleteModalVisible]); - const isScanning = TransactionUtils.hasReceipt(props.transaction) && TransactionUtils.isReceiptBeingScanned(props.transaction); + const isScanning = TransactionUtils.hasReceipt(transaction) && TransactionUtils.isReceiptBeingScanned(transaction); return ( <> @@ -94,15 +90,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 && } From 361c10755aa1ac0b16aba85698fc40387926730f Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Tue, 12 Sep 2023 14:52:13 -0600 Subject: [PATCH 7/8] Remove references to props --- src/components/MoneyRequestHeader.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index b910ebebae0b..635dc8ad5ecb 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -71,10 +71,10 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); // Only the requestor can take delete the request, admins can only edit it. - const isActionOwner = lodashGet(props, 'parentReportAction.actorAccountID') === lodashGet(session, 'accountID', null); + const isActionOwner = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null); const deleteTransaction = useCallback(() => { - IOU.deleteMoneyRequest(lodashGet(props, 'parentReportAction.originalMessage.IOUTransactionID'), parentReportAction, true); + IOU.deleteMoneyRequest(lodashGet(parentReportAction, 'originalMessage.IOUTransactionID'), parentReportAction, true); setIsDeleteModalVisible(false); }, [parentReportAction, setIsDeleteModalVisible]); From 981f293800219c98ac4d88cb34ab1935aa8185f7 Mon Sep 17 00:00:00 2001 From: Tim Golen Date: Fri, 15 Sep 2023 12:43:16 -0600 Subject: [PATCH 8/8] Fix lint and use hook for dimensions --- src/components/MoneyRequestHeader.js | 50 +++++++++++----------------- 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 5f4ac5e15dce..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'; @@ -21,6 +19,7 @@ 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 */ @@ -35,8 +34,6 @@ const propTypes = { /** Personal details so we can get the ones for the report participants */ personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, - ...windowDimensionsPropTypes, - /* Onyx Props */ /** Session info for the currently logged in user. */ session: PropTypes.shape({ @@ -52,8 +49,6 @@ const propTypes = { /** All the data for the transaction */ transaction: transactionPropTypes, - - ...windowDimensionsPropTypes, }; const defaultProps = { @@ -65,17 +60,15 @@ const defaultProps = { transaction: {}, }; -function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy, personalDetails, isSmallScreenWidth, windowWidth}) { +function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy, personalDetails}) { const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); 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 = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null); - const report = props.report; - report.ownerAccountID = lodashGet(props, ['parentReport', 'ownerAccountID'], null); - report.ownerEmail = lodashGet(props, ['parentReport', 'ownerEmail'], ''); const deleteTransaction = useCallback(() => { IOU.deleteMoneyRequest(lodashGet(parentReportAction, 'originalMessage.IOUTransactionID'), parentReportAction, true); @@ -94,7 +87,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, threeDotsMenuItems={[ { icon: Expensicons.Trashcan, - text: translate('reportActionContextMenu.deleteAction', {action: props.parentReportAction}), + text: translate('reportActionContextMenu.deleteAction', {action: parentReportAction}), onSelected: () => setIsDeleteModalVisible(true), }, ]} @@ -129,22 +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: ({parentReportAction}) => `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`, - }, - }), -)(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);