Merge pull request #8831 from Expensify/justice_refactorActions-Reimb…

…ursementAccountPage.js

Re-fetch actions when we move from offline to online in ReimbursementAccountPage.js

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -17,6 +17,8 @@ import styles from '../../styles/styles';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import getPlaidOAuthReceivedRedirectURI from '../../libs/getPlaidOAuthReceivedRedirectURI';
 import Text from '../../components/Text';
+import {withNetwork} from '../../components/OnyxProvider';
+import networkPropTypes from '../../components/networkPropTypes';
 
 // Steps
 import BankAccountStep from './BankAccountStep';
@@ -34,6 +36,9 @@ const propTypes = {
     /** ACH data for the withdrawal account actively being set up */
     reimbursementAccount: reimbursementAccountPropTypes,
 
+    /** Information about the network  */
+    network: networkPropTypes.isRequired,
+
     /** Current session for the user */
     session: PropTypes.shape({
         /** User login */
@@ -65,14 +70,13 @@ const defaultProps = {
 
 class ReimbursementAccountPage extends React.Component {
     componentDidMount() {
-        // We can specify a step to navigate to by using route params when the component mounts.
-        const stepToOpen = this.getStepToOpenFromRouteParams();
-
-        // If we are trying to navigate to `/bank-account/new` and we already have a bank account then don't allow returning to `/new`
-        BankAccounts.fetchFreePlanVerifiedBankAccount(stepToOpen !== CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT ? stepToOpen : '');
+        this.fetchData();
     }
 
     componentDidUpdate(prevProps) {
+        if (prevProps.network.isOffline && !this.props.network.isOffline) {
+            this.fetchData();
+        }
         const currentStep = lodashGet(
             this.props,
             'reimbursementAccount.achData.currentStep',
@@ -139,6 +143,15 @@ class ReimbursementAccountPage extends React.Component {
         }
     }
 
+    fetchData() {
+        // We can specify a step to navigate to by using route params when the component mounts.
+        // We want to use the same stepToOpen variable when the network state changes because we can be redirected to a different step when the account refreshes.
+        const stepToOpen = this.getStepToOpenFromRouteParams();
+
+        // If we are trying to navigate to `/bank-account/new` and we already have a bank account then don't allow returning to `/new`
+        BankAccounts.fetchFreePlanVerifiedBankAccount(stepToOpen !== CONST.BANK_ACCOUNT.STEP.BANK_ACCOUNT ? stepToOpen : '');
+    }
+
     render() {
         // The SetupWithdrawalAccount flow allows us to continue the flow from various points depending on where the
         // user left off. This view will refer to the achData as the single source of truth to determine which route to
@@ -232,6 +245,7 @@ ReimbursementAccountPage.propTypes = propTypes;
 ReimbursementAccountPage.defaultProps = defaultProps;
 
 export default compose(
+    withNetwork(),
     withOnyx({
         reimbursementAccount: {
             key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,