Fix lint and use hook for dimensions

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);