From 6a8d056df8212426624871743bac491d2d7b8ed6 Mon Sep 17 00:00:00 2001 From: Justice Arthur Date: Thu, 28 Apr 2022 16:40:32 +0000 Subject: [PATCH 1/5] refetch actions for Payments Page with an HOC --- src/components/withRefetchActions.js | 37 +++++++++++++++++++ .../Payments/PaymentsPage/BasePaymentsPage.js | 9 ++++- 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/components/withRefetchActions.js diff --git a/src/components/withRefetchActions.js b/src/components/withRefetchActions.js new file mode 100644 index 000000000000..8b4b1b45983e --- /dev/null +++ b/src/components/withRefetchActions.js @@ -0,0 +1,37 @@ +import React from 'react'; +import compose from '../libs/compose'; +import networkPropTypes from './networkPropTypes'; +import {withNetwork} from './OnyxProvider'; + +export default fetchData => (WrappedComponent) => { + const propTypes = { + /** Information about the network */ + network: networkPropTypes.isRequired, + }; + + class WithRefetchActions extends React.Component { + componentDidUpdate(prevProps) { + if (prevProps.network.isOffline === this.props.network.isOffline) { + return; + } + + fetchData(); + } + + render() { + return ( + + ); + } + } + + WithRefetchActions.propTypes = propTypes; + + // eslint-disable-next-line rulesdir/no-useless-compose + return compose( + withNetwork(), + )(WithRefetchActions); +}; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index f04d34ba6caf..0c37da606803 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -30,6 +30,7 @@ import * as Expensicons from '../../../../components/Icon/Expensicons'; import ConfirmModal from '../../../../components/ConfirmModal'; import KYCWall from '../../../../components/KYCWall'; import {propTypes, defaultProps} from './paymentsPagePropTypes'; +import withRefetchActions from '../../../../components/withRefetchActions'; class BasePaymentsPage extends React.Component { constructor(props) { @@ -57,10 +58,11 @@ class BasePaymentsPage extends React.Component { this.hidePasswordPrompt = this.hidePasswordPrompt.bind(this); this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this); this.setMenuPosition = this.setMenuPosition.bind(this); + this.fetchData = this.fetchData.bind(this); } componentDidMount() { - PaymentMethods.getPaymentMethods(); + this.fetchData(); if (this.props.shouldListenForResize) { this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition); } @@ -186,6 +188,10 @@ class BasePaymentsPage extends React.Component { throw new Error('Invalid payment method type selected'); } + fetchData() { + PaymentMethods.getPaymentMethods(); + } + /** * Hide the add payment modal */ @@ -432,6 +438,7 @@ BasePaymentsPage.defaultProps = defaultProps; export default compose( withWindowDimensions, withLocalize, + withRefetchActions(BasePaymentsPage.prototype.fetchData), withOnyx({ betas: { key: ONYXKEYS.BETAS, From c773bc85693a5681e884e9d8b5dacd9fc284ccd1 Mon Sep 17 00:00:00 2001 From: Justice Arthur Date: Thu, 28 Apr 2022 17:21:48 +0000 Subject: [PATCH 2/5] remove HOC and applied updates --- src/components/withRefetchActions.js | 37 ------------------- .../Payments/PaymentsPage/BasePaymentsPage.js | 11 +++++- .../PaymentsPage/paymentsPagePropTypes.js | 4 ++ 3 files changed, 14 insertions(+), 38 deletions(-) delete mode 100644 src/components/withRefetchActions.js diff --git a/src/components/withRefetchActions.js b/src/components/withRefetchActions.js deleted file mode 100644 index 8b4b1b45983e..000000000000 --- a/src/components/withRefetchActions.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import compose from '../libs/compose'; -import networkPropTypes from './networkPropTypes'; -import {withNetwork} from './OnyxProvider'; - -export default fetchData => (WrappedComponent) => { - const propTypes = { - /** Information about the network */ - network: networkPropTypes.isRequired, - }; - - class WithRefetchActions extends React.Component { - componentDidUpdate(prevProps) { - if (prevProps.network.isOffline === this.props.network.isOffline) { - return; - } - - fetchData(); - } - - render() { - return ( - - ); - } - } - - WithRefetchActions.propTypes = propTypes; - - // eslint-disable-next-line rulesdir/no-useless-compose - return compose( - withNetwork(), - )(WithRefetchActions); -}; diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 0c37da606803..40852004277f 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -31,6 +31,7 @@ import ConfirmModal from '../../../../components/ConfirmModal'; import KYCWall from '../../../../components/KYCWall'; import {propTypes, defaultProps} from './paymentsPagePropTypes'; import withRefetchActions from '../../../../components/withRefetchActions'; +import {withNetwork} from '../../../../components/OnyxProvider'; class BasePaymentsPage extends React.Component { constructor(props) { @@ -68,6 +69,14 @@ class BasePaymentsPage extends React.Component { } } + componentDidUpdate(prevProps) { + if (prevProps.network.isOffline === this.props.network.isOffline) { + return; + } + + this.fetchData(); + } + componentWillUnmount() { if (!this.props.shouldListenForResize || !this.dimensionsSubscription) { return; @@ -438,7 +447,7 @@ BasePaymentsPage.defaultProps = defaultProps; export default compose( withWindowDimensions, withLocalize, - withRefetchActions(BasePaymentsPage.prototype.fetchData), + withNetwork(), withOnyx({ betas: { key: ONYXKEYS.BETAS, diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js index 5e9da7e3e19a..92158d06204c 100644 --- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js +++ b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js @@ -2,6 +2,7 @@ import PropTypes from 'prop-types'; import walletTransferPropTypes from '../walletTransferPropTypes'; import {withLocalizePropTypes} from '../../../../components/withLocalize'; import {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; +import networkPropTypes from '../../../../components/networkPropTypes'; const propTypes = { /** Wallet balance transfer props */ @@ -22,6 +23,9 @@ const propTypes = { currentBalance: PropTypes.number, }), + /** Information about the network */ + network: networkPropTypes.isRequired, + ...withLocalizePropTypes, ...windowDimensionsPropTypes, From 202b62e35da3b5096e8abd22eaeeb306b8369d43 Mon Sep 17 00:00:00 2001 From: Justice Arthur Date: Thu, 28 Apr 2022 17:23:29 +0000 Subject: [PATCH 3/5] remove useless use statement --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 40852004277f..a8c3164a085c 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -30,7 +30,6 @@ import * as Expensicons from '../../../../components/Icon/Expensicons'; import ConfirmModal from '../../../../components/ConfirmModal'; import KYCWall from '../../../../components/KYCWall'; import {propTypes, defaultProps} from './paymentsPagePropTypes'; -import withRefetchActions from '../../../../components/withRefetchActions'; import {withNetwork} from '../../../../components/OnyxProvider'; class BasePaymentsPage extends React.Component { From 5477628812f3fde87a0cad02b659c9dea5b23bbb Mon Sep 17 00:00:00 2001 From: Justice Arthur Date: Wed, 4 May 2022 11:45:03 +0000 Subject: [PATCH 4/5] update refetch data condition --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index a8c3164a085c..9dbfe8dda54b 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -69,7 +69,7 @@ class BasePaymentsPage extends React.Component { } componentDidUpdate(prevProps) { - if (prevProps.network.isOffline === this.props.network.isOffline) { + if (!prevProps.network.isOffline || this.props.network.isOffline) { return; } From abefcba5f7ce5d0c442969b3a9632a41c05e363c Mon Sep 17 00:00:00 2001 From: Justice Arthur Date: Fri, 13 May 2022 08:44:34 +0000 Subject: [PATCH 5/5] remove method binding --- src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 9dbfe8dda54b..e0b6b61d4668 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -58,7 +58,6 @@ class BasePaymentsPage extends React.Component { this.hidePasswordPrompt = this.hidePasswordPrompt.bind(this); this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this); this.setMenuPosition = this.setMenuPosition.bind(this); - this.fetchData = this.fetchData.bind(this); } componentDidMount() {