Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate AddPayPalMe to function component #17473

Merged
merged 15 commits into from
Apr 19, 2023
Merged

Migrate AddPayPalMe to function component #17473

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
41417e4
add useState logic and convert to functional component
NikkiWines Apr 15, 2023
3bd913c
add useRef
NikkiWines Apr 15, 2023
5caf5f5
props instead of this.props
NikkiWines Apr 15, 2023
6307a9e
minor style update
NikkiWines Apr 15, 2023
2d30ed2
cleanup ref logic
NikkiWines Apr 17, 2023
16a9393
Merge branch 'main' of https://github.com/Expensify/App into nikki-mi…
NikkiWines Apr 17, 2023
c50a5bb
follow up merge cleanup
NikkiWines Apr 17, 2023
3d5c680
fix props, remove extra space
NikkiWines Apr 17, 2023
88aa2ae
Merge branch 'main' of https://github.com/Expensify/App into nikki-mi…
NikkiWines Apr 17, 2023
19dd2a7
add useCallback, minor style
NikkiWines Apr 17, 2023
66e32cd
update innerRef proptype
NikkiWines Apr 17, 2023
8bb0882
revert unecessarily included changes
NikkiWines Apr 17, 2023
b162e3a
include missing dependency
NikkiWines Apr 17, 2023
13ff34e
fix paypal me focus for native apps
NikkiWines Apr 19, 2023
8c789f8
use underscore to fix eslint error
NikkiWines Apr 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/components/TextInput/BaseTextInput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,11 @@ class BaseTextInput extends Component {
)}
<RNTextInput
ref={(ref) => {
if (typeof this.props.innerRef === 'function') { this.props.innerRef(ref); }
if (typeof this.props.innerRef === 'function') {
this.props.innerRef(ref);
} else if (this.props.innerRef && _.has(this.props.innerRef, 'current')) {
this.props.innerRef.current = ref;
}
this.input = ref;
}}
// eslint-disable-next-line
Expand Down
6 changes: 5 additions & 1 deletion src/components/TextInput/baseTextInputPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@ const propTypes = {
hideFocusedState: PropTypes.bool,

/** Forward the inner ref */
innerRef: PropTypes.func,
innerRef: PropTypes.oneOfType([
PropTypes.func,
// eslint-disable-next-line react/forbid-prop-types
PropTypes.shape({current: PropTypes.any}),
]),

/** Maximum characters allowed */
maxLength: PropTypes.number,
Expand Down
166 changes: 78 additions & 88 deletions src/pages/settings/Payments/AddPayPalMePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React from 'react';
import React, {
useRef, useState, useCallback,
} from 'react';
import {
View, TouchableWithoutFeedback, Linking,
} from 'react-native';
Expand All @@ -22,107 +24,95 @@ import Icon from '../../../components/Icon';
import * as Expensicons from '../../../components/Icon/Expensicons';
import variables from '../../../styles/variables';

class AddPayPalMePage extends React.Component {
constructor(props) {
super(props);
const AddPayPalMePage = (props) => {
const [payPalMeUsername, setPayPalMeUsername] = useState('');
const [payPalMeUsernameError, setPayPalMeUsernameError] = useState(false);
const payPalMeInput = useRef(null);

this.state = {
payPalMeUsername: '',
payPalMeUsernameError: false,
};
this.setPayPalMeUsername = this.setPayPalMeUsername.bind(this);
this.focusPayPalMeInput = this.focusPayPalMeInput.bind(this);
}
const growlMessageOnSave = props.translate('addPayPalMePage.growlMessageOnSave');
Copy link
Contributor

@marcaaron marcaaron Apr 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB, this kind of made me wonder about whether translations should be memoized. I feel like they aren't now (though we will re-render any components that use withLocalize() if the language changes) but maybe it would be better to have a useTranslate('addPayPalMePage.growlMessageOnSave') that just return the same result unless the language changes. Anyways, not something we should do, but seems like a good use case for hooks.

Copy link
Contributor Author

@NikkiWines NikkiWines Apr 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I was thinking about that when making this change - memoizing translations sounds like a good idea but maybe something to tackle in a larger separate issue?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1000% 👍


/**
* Sets the payPalMeUsername for the current user
* Sets the payPalMe username and error data for the current user
*/
setPayPalMeUsername() {
const isValid = ValidationUtils.isValidPaypalUsername(this.state.payPalMeUsername);
if (!isValid) {
this.setState({payPalMeUsernameError: true});
const setPayPalMeData = useCallback(() => {
if (!ValidationUtils.isValidPaypalUsername(payPalMeUsername)) {
setPayPalMeUsernameError(true);
return;
}
this.setState({payPalMeUsernameError: false});
User.addPaypalMeAddress(this.state.payPalMeUsername);
setPayPalMeUsernameError(false);
User.addPaypalMeAddress(payPalMeUsername);

Growl.show(this.props.translate('addPayPalMePage.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
Growl.show(growlMessageOnSave, CONST.GROWL.SUCCESS, 3000);
Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
}
}, [payPalMeUsername, growlMessageOnSave]);

focusPayPalMeInput() {
if (!this.payPalMeInputRef) {
return;
}

this.payPalMeInputRef.focus();
}

render() {
return (
<ScreenWrapper onEntryTransitionEnd={this.focusPayPalMeInput}>
<HeaderWithCloseButton
title={this.props.translate('common.payPalMe')}
shouldShowBackButton
onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.p5]}>
<View style={[styles.flex1]}>
<Text style={[styles.mb4]}>
{this.props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
return (
<ScreenWrapper onEntryTransitionEnd={() => payPalMeInput.current && payPalMeInput.current.focus()}>
<HeaderWithCloseButton
title={props.translate('common.payPalMe')}
shouldShowBackButton
onBackButtonPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
onCloseButtonPress={() => Navigation.dismissModal(true)}
/>
<View style={[styles.flex1, styles.p5]}>
<View style={[styles.flex1]}>
<Text style={[styles.mb4]}>
{props.translate('addPayPalMePage.enterYourUsernameToGetPaidViaPayPal')}
</Text>
<TextInput
ref={payPalMeInput}
label={props.translate('addPayPalMePage.payPalMe')}
autoCompleteType="off"
autoCorrect={false}
value={payPalMeUsername}
placeholder={props.translate('addPayPalMePage.yourPayPalUsername')}
onChangeText={(text) => {
setPayPalMeUsername(text);
setPayPalMeUsernameError(false);
}}
returnKeyType="done"
hasError={payPalMeUsernameError}
errorText={payPalMeUsernameError ? props.translate('addPayPalMePage.formatError') : ''}
/>
<View style={[styles.mt3, styles.flexRow, styles.justifyContentBetween, styles.alignSelfStart]}>
<Text style={[styles.textMicro, styles.flexRow]}>
{props.translate('addPayPalMePage.checkListOf')}
</Text>
<TextInput
ref={el => this.payPalMeInputRef = el}
label={this.props.translate('addPayPalMePage.payPalMe')}
autoCompleteType="off"
autoCorrect={false}
value={this.state.payPalMeUsername}
placeholder={this.props.translate('addPayPalMePage.yourPayPalUsername')}
onChangeText={text => this.setState({payPalMeUsername: text, payPalMeUsernameError: false})}
returnKeyType="done"
hasError={this.state.payPalMeUsernameError}
errorText={this.state.payPalMeUsernameError ? this.props.translate('addPayPalMePage.formatError') : ''}
/>
<View style={[styles.mt3, styles.flexRow, styles.justifyContentBetween, styles.alignSelfStart]}>
<Text style={[styles.textMicro, styles.flexRow]}>
{this.props.translate('addPayPalMePage.checkListOf')}
</Text>
<TouchableWithoutFeedback
// eslint-disable-next-line max-len
onPress={() => Linking.openURL('https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies')}
>
<View style={[styles.flexRow, styles.cursorPointer]}>
<TextLink
// eslint-disable-next-line max-len
href="https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies"
style={[styles.textMicro]}
>
{this.props.translate('addPayPalMePage.supportedCurrencies')}
</TextLink>
<View style={[styles.ml1]}>
<Icon src={Expensicons.NewWindow} height={variables.iconSizeExtraSmall} width={variables.iconSizeExtraSmall} />
</View>
<TouchableWithoutFeedback
// eslint-disable-next-line max-len
onPress={() => Linking.openURL('https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies')}
>
<View style={[styles.flexRow, styles.cursorPointer]}>
<TextLink
// eslint-disable-next-line max-len
href="https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies"
style={[styles.textMicro]}
>
{props.translate('addPayPalMePage.supportedCurrencies')}
</TextLink>
<View style={[styles.ml1]}>
<Icon src={Expensicons.NewWindow} height={variables.iconSizeExtraSmall} width={variables.iconSizeExtraSmall} />
</View>
</TouchableWithoutFeedback>
</View>
</View>
</TouchableWithoutFeedback>
</View>
</View>
<FixedFooter>
<Button
success
onPress={this.setPayPalMeUsername}
pressOnEnter
style={[styles.mt3]}
isDisabled={_.isEmpty(this.state.payPalMeUsername.trim())}
text={this.props.translate('addPayPalMePage.addPayPalAccount')}
/>
</FixedFooter>
</ScreenWrapper>
);
}
}
</View>
<FixedFooter>
<Button
success
onPress={setPayPalMeData}
pressOnEnter
style={[styles.mt3]}
isDisabled={_.isEmpty(payPalMeUsername.trim())}
text={props.translate('addPayPalMePage.addPayPalAccount')}
/>
</FixedFooter>
</ScreenWrapper>
);
};

AddPayPalMePage.propTypes = {...withLocalizePropTypes};
AddPayPalMePage.displayName = 'AddPayPalMePage';

export default withLocalize(AddPayPalMePage);