Merge pull request #8817 from Expensify/justice_refetchActions-PaymentsPage.js

Re-fetch actions when we move from offline to online in Payments Page

Author: marcaaron

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 {withNetwork} from '../../../../components/OnyxProvider';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
@@ -60,12 +61,20 @@ class BasePaymentsPage extends React.Component {
     }
 
     componentDidMount() {
-        PaymentMethods.getPaymentMethods();
+        this.fetchData();
         if (this.props.shouldListenForResize) {
             this.dimensionsSubscription = Dimensions.addEventListener('change', this.setMenuPosition);
         }
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.network.isOffline || this.props.network.isOffline) {
+            return;
+        }
+
+        this.fetchData();
+    }
+
     componentWillUnmount() {
         if (!this.props.shouldListenForResize || !this.dimensionsSubscription) {
             return;
@@ -186,6 +195,10 @@ class BasePaymentsPage extends React.Component {
         throw new Error('Invalid payment method type selected');
     }
 
+    fetchData() {
+        PaymentMethods.getPaymentMethods();
+    }
+
     /**
      * Hide the add payment modal
      */
@@ -432,6 +445,7 @@ BasePaymentsPage.defaultProps = defaultProps;
 export default compose(
     withWindowDimensions,
     withLocalize,
+    withNetwork(),
     withOnyx({
         betas: {
             key: ONYXKEYS.BETAS,

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,