diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 5f4ac5e15dc..7f1e5891212 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);