Merge pull request Expensify#2723 from Expensify/jack-cleanUpIOUAmount

Clean up IOUAmount page
attaradev · May 18, 2021 · 848ff9e · 848ff9e
2 parents 577ef59 + 8175a7f
commit 848ff9e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 22 deletions.
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
@@ -255,6 +255,8 @@ class IOUModal extends Component {
                         }}
                         currencySelected={this.currencySelected}
                         selectedCurrency={this.state.selectedCurrency}
+                        selectedAmount={this.state.amount}
+                        navigation={this.props.navigation}
                     />
                 )}
                 {currentStep === Steps.IOUParticipants && (

diff --git a/src/pages/iou/steps/IOUAmountPage.js b/src/pages/iou/steps/IOUAmountPage.js
@@ -3,18 +3,17 @@ import {
     View,
     Text,
     TouchableOpacity,
-    ActivityIndicator,
 } from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
-import themeColors from '../../../styles/themes/default';
 import BigNumberPad from '../../../components/BigNumberPad';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import TextInputAutoWidth from '../../../components/TextInputAutoWidth';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import compose from '../../../libs/compose';
+import KeyboardShortcut from '../../../libs/KeyboardShortcut';
 
 const propTypes = {
     /** Callback to inform parent modal of success */
@@ -27,9 +26,19 @@ const propTypes = {
     /** User's currency preference */
     selectedCurrency: PropTypes.string.isRequired,
 
+    /** Previously selected amount to show if the user comes back to this screen */
+    selectedAmount: PropTypes.string.isRequired,
+
     /** Window Dimensions Props */
     ...windowDimensionsPropTypes,
 
+    /** react-navigation object */
+    navigation: PropTypes.shape({
+
+        /** Allows us to add a listener for the navigation transition end */
+        addListener: PropTypes.func,
+    }).isRequired,
+
     /* Onyx Props */
 
     /** Holds data related to IOU view state, rather than the underlying IOU data. */
@@ -45,20 +54,42 @@ const propTypes = {
 const defaultProps = {
     iou: {},
 };
+
 class IOUAmountPage extends React.Component {
     constructor(props) {
         super(props);
 
         this.updateAmountIfValidInput = this.updateAmountIfValidInput.bind(this);
         this.state = {
-            amount: '',
+            amount: props.selectedAmount,
         };
     }
 
     componentDidMount() {
-        if (this.textInput) {
-            this.textInput.focus();
+        // Component is not initialized yet due to navigation transitions
+        // Wait until interactions are complete before trying to focus or attach listener
+        this.props.navigation.addListener('transitionEnd', () => {
+            // Setup and attach keypress handler for navigating to the next screen
+            this.unsubscribe = KeyboardShortcut.subscribe('Enter', () => {
+                if (this.state.amount !== '') {
+                    this.props.onStepComplete(this.state.amount);
+                }
+            }, [], true);
+
+            // Focus text input
+            if (this.textInput) {
+                this.textInput.focus();
+            }
+        });
+    }
+
+    componentWillUnmount() {
+        // Cleanup all keydown event listeners that we've set up
+        if (!this.unsubscribe) {
+            return;
         }
+
+        this.unsubscribe();
     }
 
     /**
@@ -95,7 +126,6 @@ class IOUAmountPage extends React.Component {
     render() {
         return (
             <View style={[styles.flex1, styles.pageWrapper]}>
-                {this.props.iou.loading && <ActivityIndicator color={themeColors.text} />}
                 <View style={[
                     styles.flex1,
                     styles.flexRow,
@@ -108,29 +138,42 @@ class IOUAmountPage extends React.Component {
                         {this.props.selectedCurrency}
                     </Text>
                     {this.props.isSmallScreenWidth
-                        ? <Text style={styles.iouAmountText}>{this.state.amount}</Text>
-                        : (
+                        ? (
+                            <Text
+                                style={styles.iouAmountText}
+                            >
+                                {this.state.amount}
+                            </Text>
+                        ) : (
                             <TextInputAutoWidth
-                                    inputStyle={styles.iouAmountTextInput}
-                                    textStyle={styles.iouAmountText}
-                                    onKeyPress={(event) => {
-                                        this.updateAmountIfValidInput(event.key);
-                                        event.preventDefault();
-                                    }}
-                                    ref={el => this.textInput = el}
-                                    value={this.state.amount}
+                                inputStyle={styles.iouAmountTextInput}
+                                textStyle={styles.iouAmountText}
+                                onKeyPress={(event) => {
+                                    this.updateAmountIfValidInput(event.key);
+                                    event.preventDefault();
+                                }}
+                                ref={el => this.textInput = el}
+                                value={this.state.amount}
                             />
                         )}
                 </View>
                 <View style={[styles.w100, styles.justifyContentEnd]}>
                     {this.props.isSmallScreenWidth
-                        ? <BigNumberPad numberPressed={this.updateAmountIfValidInput} />
-                        : <View />}
+                        ? (
+                            <BigNumberPad
+                                numberPressed={this.updateAmountIfValidInput}
+                            />
+                        ) : <View />}
                     <TouchableOpacity
-                            style={[styles.button, styles.w100, styles.mt5, styles.buttonSuccess,
-                                this.state.amount.length === 0 ? styles.buttonSuccessDisabled : {}]}
-                            onPress={() => this.props.onStepComplete(this.state.amount)}
-                            disabled={this.state.amount.length === 0}
+                        style={[
+                            styles.button,
+                            styles.w100,
+                            styles.mt5,
+                            styles.buttonSuccess,
+                            this.state.amount.length === 0 ? styles.buttonSuccessDisabled : {},
+                        ]}
+                        onPress={() => this.props.onStepComplete(this.state.amount)}
+                        disabled={this.state.amount.length === 0}
                     >
                         <Text style={[styles.buttonText, styles.buttonSuccessText]}>
                             {this.props.translate('common.next')}
@@ -141,6 +184,7 @@ class IOUAmountPage extends React.Component {
         );
     }
 }
+
 IOUAmountPage.displayName = 'IOUAmountPage';
 IOUAmountPage.propTypes = propTypes;
 IOUAmountPage.defaultProps = defaultProps;