Refactoring the MoneyRequestDescriptionPage to functional component

kosmydel · Aug 18, 2023 · 6a057be · 6a057be
1 parent 3661a9c
commit 6a057be
Showing 1 changed file with 60 additions and 63 deletions.
diff --git a/src/pages/iou/MoneyRequestDescriptionPage.js b/src/pages/iou/MoneyRequestDescriptionPage.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useEffect, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
@@ -17,6 +17,7 @@ import compose from '../../libs/compose';
 import * as IOU from '../../libs/actions/IOU';
 import optionPropTypes from '../../components/optionPropTypes';
 import CONST from '../../CONST';
+import useLocalize from '../../hooks/useLocalize';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -29,6 +30,18 @@ const propTypes = {
         comment: PropTypes.string,
         participants: PropTypes.arrayOf(optionPropTypes),
     }),
+
+    /** 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 = {
@@ -40,41 +53,26 @@ const defaultProps = {
     },
 };
 
-class MoneyRequestDescriptionPage extends Component {
-    constructor(props) {
-        super(props);
+function MoneyRequestDescriptionPage({iou, route}) {
+    const {translate} = useLocalize();
+    const inputRef = useRef(null);
+    const iouType = lodashGet(route, 'params.iouType', '');
+    const reportID = lodashGet(route, 'params.reportID', '');
 
-        this.updateComment = this.updateComment.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);
-        }
-    }
-
-    // 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);
-            }
+        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]);
 
-    navigateBack() {
-        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(this.iouType, this.reportID));
+    function navigateBack() {
+        Navigation.goBack(ROUTES.getMoneyRequestConfirmationRoute(iouType, reportID));
     }
 
     /**
@@ -83,44 +81,43 @@ class MoneyRequestDescriptionPage extends Component {
      * @param {Object} value
      * @param {String} value.moneyRequestComment
      */
-    updateComment(value) {
+    function updateComment(value) {
         IOU.setMoneyRequestDescription(value.moneyRequestComment);
-        this.navigateBack();
+        navigateBack();
     }
 
-    render() {
-        return (
-            <ScreenWrapper
-                includeSafeAreaPaddingBottom={false}
-                shouldEnableMaxHeight
-                onEntryTransitionEnd={() => this.descriptionInputRef && this.descriptionInputRef.focus()}
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            onEntryTransitionEnd={() => inputRef && inputRef.focus()}
+        >
+            <HeaderWithBackButton
+                title={translate('common.description')}
+                onBackButtonPress={() => navigateBack()}
+            />
+            <Form
+                style={[styles.flexGrow1, styles.ph5]}
+                formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
+                onSubmit={(value) => updateComment(value)}
+                submitButtonText={translate('common.save')}
+                enabledWhenOffline
             >
-                <HeaderWithBackButton
-                    title={this.props.translate('common.description')}
-                    onBackButtonPress={this.navigateBack}
-                />
-                <Form
-                    style={[styles.flexGrow1, styles.ph5]}
-                    formID={ONYXKEYS.FORMS.MONEY_REQUEST_DESCRIPTION_FORM}
-                    onSubmit={this.updateComment}
-                    submitButtonText={this.props.translate('common.save')}
-                    enabledWhenOffline
-                >
-                    <View style={styles.mb4}>
-                        <TextInput
-                            inputID="moneyRequestComment"
-                            name="moneyRequestComment"
-                            defaultValue={this.props.iou.comment}
-                            label={this.props.translate('moneyRequestConfirmationList.whatsItFor')}
-                            accessibilityLabel={this.props.translate('moneyRequestConfirmationList.whatsItFor')}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                            ref={(el) => (this.descriptionInputRef = el)}
-                        />
-                    </View>
-                </Form>
-            </ScreenWrapper>
-        );
-    }
+                <View style={styles.mb4}>
+                    <TextInput
+                        inputID="moneyRequestComment"
+                        name="moneyRequestComment"
+                        defaultValue={iou.comment}
+                        label={translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityLabel={translate('moneyRequestConfirmationList.whatsItFor')}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        ref={(el) => (inputRef.current = el)}
+                    />
+                </View>
+            </Form>
+        </ScreenWrapper>
+    );
+
 }
 
 MoneyRequestDescriptionPage.propTypes = propTypes;