From 958e489e74bf64cb75112bb450ab335746ba52cd Mon Sep 17 00:00:00 2001 From: bartektomczyk <bartlomiejtomczyk@gmail.com> Date: Tue, 26 Sep 2023 09:41:33 +0200 Subject: [PATCH 1/2] refactor: migrated EnablePaymentsPage to function component --- .../EnablePayments/EnablePaymentsPage.js | 123 +++++++++--------- 1 file changed, 58 insertions(+), 65 deletions(-) diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js index 064f9371e46a..4b0210e9ec71 100644 --- a/src/pages/EnablePayments/EnablePaymentsPage.js +++ b/src/pages/EnablePayments/EnablePaymentsPage.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import ScreenWrapper from '../../components/ScreenWrapper'; import * as Wallet from '../../libs/actions/Wallet'; @@ -7,8 +7,6 @@ import ONYXKEYS from '../../ONYXKEYS'; import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import CONST from '../../CONST'; import userWalletPropTypes from './userWalletPropTypes'; -import {withNetwork} from '../../components/OnyxProvider'; -import networkPropTypes from '../../components/networkPropTypes'; // Steps import OnfidoStep from './OnfidoStep'; @@ -17,94 +15,89 @@ import TermsStep from './TermsStep'; import ActivateStep from './ActivateStep'; import HeaderWithBackButton from '../../components/HeaderWithBackButton'; import FailedKYC from './FailedKYC'; -import compose from '../../libs/compose'; -import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; +import useLocalize from '../../hooks/useLocalize'; +import useNetwork from '../../hooks/useNetwork'; +import usePrevious from '../../hooks/usePrevious'; const propTypes = { - /** Information about the network from Onyx */ - network: networkPropTypes.isRequired, - /** The user's wallet */ userWallet: userWalletPropTypes, - - ...withLocalizePropTypes, }; const defaultProps = { userWallet: {}, }; -class EnablePaymentsPage extends React.Component { - componentDidMount() { - Wallet.openEnablePaymentsPage(); - } +function EnablePaymentsPage({userWallet}) { + const {translate} = useLocalize(); + const {isOffline} = useNetwork(); - componentDidUpdate(prevProps) { - if (!prevProps.network.isOffline || this.props.network.isOffline) { + useEffect(() => { + if (isOffline) { return; } Wallet.openEnablePaymentsPage(); - } + }, [isOffline]); - render() { - if (_.isEmpty(this.props.userWallet)) { - return <FullScreenLoadingIndicator />; - } - - return ( - <ScreenWrapper - includeSafeAreaPaddingBottom={false} - testID={EnablePaymentsPage.displayName} - > - {() => { - if (this.props.userWallet.errorCode === CONST.WALLET.ERROR.KYC) { - return ( - <> - <HeaderWithBackButton - title={this.props.translate('additionalDetailsStep.headerTitle')} - onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} - /> - <FailedKYC /> - </> - ); - } - - if (this.props.userWallet.shouldShowWalletActivationSuccess) { - return <ActivateStep userWallet={this.props.userWallet} />; - } - - const currentStep = this.props.userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS; + if (_.isEmpty(userWallet)) { + return <FullScreenLoadingIndicator />; + } + return ( + <ScreenWrapper + includeSafeAreaPaddingBottom={false} + testID={EnablePaymentsPage.displayName} + > + {() => { + if (userWallet.errorCode === CONST.WALLET.ERROR.KYC) { return ( <> - {(currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS || currentStep === CONST.WALLET.STEP.ADDITIONAL_DETAILS_KBA) && <AdditionalDetailsStep />} - {currentStep === CONST.WALLET.STEP.ONFIDO && <OnfidoStep />} - {currentStep === CONST.WALLET.STEP.TERMS && <TermsStep />} - {currentStep === CONST.WALLET.STEP.ACTIVATE && <ActivateStep userWallet={this.props.userWallet} />} + <HeaderWithBackButton + title={translate('additionalDetailsStep.headerTitle')} + onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_WALLET)} + /> + <FailedKYC /> </> ); - }} - </ScreenWrapper> - ); - } + } + + if (userWallet.shouldShowWalletActivationSuccess) { + return <ActivateStep userWallet={userWallet} />; + } + + const currentStep = userWallet.currentStep || CONST.WALLET.STEP.ADDITIONAL_DETAILS; + + switch (currentStep) { + case CONST.WALLET.STEP.ADDITIONAL_DETAILS: + case CONST.WALLET.STEP.ADDITIONAL_DETAILS_KBA: + return <AdditionalDetailsStep />; + case CONST.WALLET.STEP.ONFIDO: + return <OnfidoStep />; + case CONST.WALLET.STEP.TERMS: + return <TermsStep />; + case CONST.WALLET.STEP.ACTIVATE: + return <ActivateStep userWallet={userWallet} />; + default: + return null; + } + }} + </ScreenWrapper> + ); } +EnablePaymentsPage.displayName = 'EnablePaymentsPage'; EnablePaymentsPage.propTypes = propTypes; EnablePaymentsPage.defaultProps = defaultProps; -export default compose( - withLocalize, - withOnyx({ - userWallet: { - key: ONYXKEYS.USER_WALLET, +export default withOnyx({ + userWallet: { + key: ONYXKEYS.USER_WALLET, - // We want to refresh the wallet each time the user attempts to activate the wallet so we won't use the - // stored values here. - initWithStoredValues: false, - }, - }), - withNetwork(), -)(EnablePaymentsPage); + // We want to refresh the wallet each time the user attempts to activate the wallet so we won't use the + // stored values here. + initWithStoredValues: false, + }, +})(EnablePaymentsPage); From 37a2c5e6d52199d0590236eb709d2a78731d381f Mon Sep 17 00:00:00 2001 From: bartektomczyk <bartlomiejtomczyk@gmail.com> Date: Tue, 26 Sep 2023 09:41:57 +0200 Subject: [PATCH 2/2] refactor: migrated EnablePaymentsPage to function component --- src/pages/EnablePayments/EnablePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/EnablePayments/EnablePaymentsPage.js b/src/pages/EnablePayments/EnablePaymentsPage.js index 4b0210e9ec71..773dfe8b5df7 100644 --- a/src/pages/EnablePayments/EnablePaymentsPage.js +++ b/src/pages/EnablePayments/EnablePaymentsPage.js @@ -19,7 +19,6 @@ import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; import useLocalize from '../../hooks/useLocalize'; import useNetwork from '../../hooks/useNetwork'; -import usePrevious from '../../hooks/usePrevious'; const propTypes = { /** The user's wallet */