Refactor the MoneyRequestCreatedPage to functional component

kosmydel · Aug 18, 2023 · 9e897df · 9e897df
1 parent 0e06cc5
commit 9e897df
Showing 1 changed file with 58 additions and 66 deletions.
diff --git a/src/pages/iou/MoneyRequestCreatedPage.js b/src/pages/iou/MoneyRequestCreatedPage.js
@@ -1,24 +1,21 @@
-import React, {Component} from 'react';
+import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import ScreenWrapper from '../../components/ScreenWrapper';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
 import Form from '../../components/Form';
 import ONYXKEYS from '../../ONYXKEYS';
 import styles from '../../styles/styles';
 import Navigation from '../../libs/Navigation/Navigation';
 import ROUTES from '../../ROUTES';
-import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import NewDatePicker from '../../components/NewDatePicker';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** Onyx Props */
     /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
     iou: PropTypes.shape({
@@ -27,7 +24,20 @@ const propTypes = {
         comment: PropTypes.string,
         created: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
+        receiptPath: PropTypes.string,
     }),
+
+    /** Route from navigation */
+    route: PropTypes.shape({
+        /** Params from the route */
+        params: PropTypes.shape({
+            /** Which field we are editing */
+            field: PropTypes.string,
+
+            /** reportID for the "transaction thread" */
+            threadReportID: PropTypes.string,
+        }),
+    }).isRequired,
 };
 
 const defaultProps = {
@@ -37,44 +47,29 @@ const defaultProps = {
         comment: '',
         created: '',
         participants: [],
+        receiptPath: '',
     },
 };
 
-class MoneyRequestCreatedPage extends Component {
-    constructor(props) {
-        super(props);
+function MoneyRequestCreatedPage({iou, route}) {
+    const {translate} = useLocalize();
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
 
-        this.updateDate = this.updateDate.bind(this);
-        this.navigateBack = this.navigateBack.bind(this);
-        this.iouType = lodashGet(props.route, 'params.iouType', '');
-        this.reportID = lodashGet(props.route, 'params.reportID', '');
-    }
-
-    componentDidMount() {
-        const moneyRequestId = `${this.iouType}${this.reportID}`;
-        const shouldReset = this.props.iou.id !== moneyRequestId;
+    useEffect(() => {
+        const moneyRequestId = `${iouType}${reportID}`;
+        const shouldReset = iou.id !== moneyRequestId;
         if (shouldReset) {
             IOU.resetMoneyRequestInfo(moneyRequestId);
         }
 
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || shouldReset) {
-            Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
+        if (_.isEmpty(iou.participants) || (iou.amount === 0 && !iou.receiptPath) || shouldReset) {
+            Navigation.goBack(ROUTES.getMoneyRequestRoute(iouType, reportID), true);
         }
-    }
+    }, [iou.id, iou.participants, iou.amount, iou.receiptPath, iouType, reportID]);
 
-    // eslint-disable-next-line rulesdir/prefer-early-return
-    componentDidUpdate(prevProps) {
-        // ID in Onyx could change by initiating a new request in a separate browser tab or completing a request
-        if (_.isEmpty(this.props.iou.participants) || (this.props.iou.amount === 0 && !this.props.iou.receiptPath) || prevProps.iou.id !== this.props.iou.id) {
-            // The ID is cleared on completing a request. In that case, we will do nothing.
-            if (this.props.iou.id) {
-                Navigation.goBack(ROUTES.getMoneyRequestRoute(this.iouType, this.reportID), true);
-            }
-        }
-    }
-
-    navigateBack() {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    function navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     }
 
     /**
@@ -83,46 +78,43 @@ class MoneyRequestCreatedPage extends Component {
      * @param {Object} value
      * @param {String} value.moneyRequestCreated
      */
-    updateDate(value) {
+    function updateDate(value) {
         IOU.setMoneyRequestCreated(value.moneyRequestCreated);
-        this.navigateBack();
+        navigateBack();
     }
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('common.date')}
+                onBackButtonPress={() => navigateBack()}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
+                onSubmit={(value) => updateDate(value)}
+                submitButtonText={translate('common.save')}
+                enabledWhenOffline
             >
-                <HeaderWithBackButton
-                    title={this.props.translate('common.date')}
-                    onBackButtonPress={this.navigateBack}
+                <NewDatePicker
+                    inputID="moneyRequestCreated"
+                    label={translate('common.date')}
+                    defaultValue={iou.created}
+                    maxDate={new Date()}
                 />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_CREATED_FORM}
-                    onSubmit={this.updateDate}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <NewDatePicker
-                        inputID="moneyRequestCreated"
-                        label={this.props.translate('common.date')}
-                        defaultValue={this.props.iou.created}
-                        maxDate={new Date()}
-                    />
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+            </Form>
+        </ScreenWrapper>
+    );
 }
 
 MoneyRequestCreatedPage.propTypes = propTypes;
 MoneyRequestCreatedPage.defaultProps = defaultProps;
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        iou: {key: ONYXKEYS.IOU},
-    }),
-)(MoneyRequestCreatedPage);
+export default withOnyx({
+    iou: {
+        key: ONYXKEYS.IOU
+    },
+})(MoneyRequestCreatedPage);