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

reafctor: migrated AddPersonalBankAccountPage component to the function #28251

Merged
merged 3 commits into from
Oct 23, 2023
+78 −101
Merged

reafctor: migrated AddPersonalBankAccountPage component to the function #28251

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c809666
reafctor: migrated AddPersonalBankAccountPage component to the function
barttom Sep 26, 2023
aebca68
fix: fixed useCallback deps
barttom Oct 19, 2023
fc22287
fix: run pretttier
barttom Oct 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
179 changes: 78 additions & 101 deletions src/pages/AddPersonalBankAccountPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,24 @@
import _ from 'underscore';
import React from 'react';
import React, {useCallback, useEffect, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import HeaderWithBackButton from '../components/HeaderWithBackButton';
import ScreenWrapper from '../components/ScreenWrapper';
import Navigation from '../libs/Navigation/Navigation';
import * as BankAccounts from '../libs/actions/BankAccounts';
import * as PaymentMethods from '../libs/actions/PaymentMethods';
import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
import compose from '../libs/compose';
import ONYXKEYS from '../ONYXKEYS';
import styles from '../styles/styles';
import Form from '../components/Form';
import ROUTES from '../ROUTES';
import * as PlaidDataProps from './ReimbursementAccount/plaidDataPropTypes';
import ConfirmationPage from '../components/ConfirmationPage';
import * as PaymentMethods from '../libs/actions/PaymentMethods';
import useLocalize from '../hooks/useLocalize';

const propTypes = {
...withLocalizePropTypes,

/** Contains plaid data */
plaidData: PlaidDataProps.plaidDataPropTypes,

Expand Down Expand Up @@ -59,112 +56,92 @@ const defaultProps = {
},
};

class AddPersonalBankAccountPage extends React.Component {
constructor(props) {
super(props);

this.validate = this.validate.bind(this);
this.submit = this.submit.bind(this);
this.exitFlow = this.exitFlow.bind(this);

this.state = {
selectedPlaidAccountID: '',
};
}

componentWillUnmount() {
BankAccounts.clearPersonalBankAccount();
}
function AddPersonalBankAccountPage({personalBankAccount, plaidData}) {
const {translate} = useLocalize();
const [selectedPlaidAccountId, setSelectedPlaidAccountId] = useState('');
const shouldShowSuccess = lodashGet(personalBankAccount, 'shouldShowSuccess', false);

/**
* @returns {Object}
*/
validate() {
return {};
}
const validateBankAccountForm = () => ({});

submit() {
const selectedPlaidBankAccount = _.findWhere(lodashGet(this.props.plaidData, 'bankAccounts', []), {
plaidAccountID: this.state.selectedPlaidAccountID,
const submitBankAccountForm = useCallback(() => {
const selectedPlaidBankAccount = _.findWhere(lodashGet(plaidData, 'bankAccounts', []), {
plaidAccountID: selectedPlaidAccountId,
});

BankAccounts.addPersonalBankAccount(selectedPlaidBankAccount);
}

exitFlow(shouldContinue = false) {
const exitReportID = lodashGet(this.props, 'personalBankAccount.exitReportID');
const onSuccessFallbackRoute = lodashGet(this.props, 'personalBankAccount.onSuccessFallbackRoute', '');

if (exitReportID) {
Navigation.dismissModal(exitReportID);
} else if (shouldContinue && onSuccessFallbackRoute) {
PaymentMethods.continueSetup(onSuccessFallbackRoute);
} else {
Navigation.goBack(ROUTES.SETTINGS_WALLET);
}
}

render() {
const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false);

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={shouldShowSuccess}
shouldEnablePickerAvoiding={false}
shouldShowOfflineIndicator={false}
testID={AddPersonalBankAccountPage.displayName}
>
<HeaderWithBackButton
title={this.props.translate('bankAccount.addBankAccount')}
onBackButtonPress={this.exitFlow}
}, [plaidData, selectedPlaidAccountId]);

const exitFlow = useCallback(
(shouldContinue = false) => {
const exitReportID = lodashGet(personalBankAccount, 'exitReportID');
const onSuccessFallbackRoute = lodashGet(personalBankAccount, 'onSuccessFallbackRoute', '');

if (exitReportID) {
Navigation.dismissModal(exitReportID);
} else if (shouldContinue && onSuccessFallbackRoute) {
PaymentMethods.continueSetup(onSuccessFallbackRoute);
} else {
Navigation.goBack(ROUTES.SETTINGS_WALLET);
}
},
[personalBankAccount],
);

useEffect(() => BankAccounts.clearPersonalBankAccount, []);
barttom marked this conversation as resolved.
Show resolved Hide resolved

return (
<ScreenWrapper
includeSafeAreaPaddingBottom={shouldShowSuccess}
shouldEnablePickerAvoiding={false}
shouldShowOfflineIndicator={false}
testID={AddPersonalBankAccountPage.displayName}
>
<HeaderWithBackButton
title={translate('bankAccount.addBankAccount')}
onBackButtonPress={exitFlow}
/>
{shouldShowSuccess ? (
<ConfirmationPage
heading={translate('addPersonalBankAccountPage.successTitle')}
description={translate('addPersonalBankAccountPage.successMessage')}
shouldShowButton
buttonText={translate('common.continue')}
onButtonPress={() => exitFlow(true)}
/>
{shouldShowSuccess ? (
<ConfirmationPage
heading={this.props.translate('addPersonalBankAccountPage.successTitle')}
description={this.props.translate('addPersonalBankAccountPage.successMessage')}
shouldShowButton
buttonText={this.props.translate('common.continue')}
onButtonPress={() => this.exitFlow(true)}
) : (
<Form
formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
isSubmitButtonVisible={Boolean(selectedPlaidAccountId)}
submitButtonText={translate('common.saveAndContinue')}
scrollContextEnabled
onSubmit={submitBankAccountForm}
validate={validateBankAccountForm}
style={[styles.mh5, styles.flex1]}
>
<AddPlaidBankAccount
onSelect={setSelectedPlaidAccountId}
plaidData={plaidData}
onExitPlaid={() => Navigation.goBack(ROUTES.HOME)}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
selectedPlaidAccountID={selectedPlaidAccountId}
/>
) : (
<Form
formID={ONYXKEYS.PERSONAL_BANK_ACCOUNT}
isSubmitButtonVisible={Boolean(this.state.selectedPlaidAccountID)}
submitButtonText={this.props.translate('common.saveAndContinue')}
scrollContextEnabled
onSubmit={this.submit}
validate={this.validate}
style={[styles.mh5, styles.flex1]}
>
<>
<AddPlaidBankAccount
onSelect={(selectedPlaidAccountID) => {
this.setState({selectedPlaidAccountID});
}}
plaidData={this.props.plaidData}
onExitPlaid={() => Navigation.goBack(ROUTES.HOME)}
receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
selectedPlaidAccountID={this.state.selectedPlaidAccountID}
/>
</>
</Form>
)}
</ScreenWrapper>
);
}
</Form>
)}
</ScreenWrapper>
);
}

AddPersonalBankAccountPage.displayName = 'AddPersonalBankAccountPage';
AddPersonalBankAccountPage.propTypes = propTypes;
AddPersonalBankAccountPage.defaultProps = defaultProps;

export default compose(
withLocalize,
withOnyx({
personalBankAccount: {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
},
plaidData: {
key: ONYXKEYS.PLAID_DATA,
},
}),
)(AddPersonalBankAccountPage);
export default withOnyx({
personalBankAccount: {
key: ONYXKEYS.PERSONAL_BANK_ACCOUNT,
},
plaidData: {
key: ONYXKEYS.PLAID_DATA,
},
})(AddPersonalBankAccountPage);
Loading