Merge pull request #8837 from Expensify/amy-IOUDetailsModal-offline

Refetch IOU data when reconnecting online

src/pages/iou/IOUDetailsModal.js

@@ -6,6 +6,7 @@ import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import styles from '../../styles/styles';
 import ONYXKEYS from '../../ONYXKEYS';
+import {withNetwork} from '../../components/OnyxProvider';
 import themeColors from '../../styles/themes/default';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import Navigation from '../../libs/Navigation/Navigation';
@@ -20,6 +21,7 @@ import CONST from '../../CONST';
 import SettlementButton from '../../components/SettlementButton';
 import ROUTES from '../../ROUTES';
 import FixedFooter from '../../components/FixedFooter';
+import networkPropTypes from '../../components/networkPropTypes';
 
 const propTypes = {
     /** URL Route params */
@@ -65,6 +67,9 @@ const propTypes = {
         email: PropTypes.string,
     }).isRequired,
 
+    /** Information about the network */
+    network: networkPropTypes.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -75,7 +80,15 @@ const defaultProps = {
 
 class IOUDetailsModal extends Component {
     componentDidMount() {
-        Report.fetchIOUReportByID(this.props.route.params.iouReportID, this.props.route.params.chatReportID, true);
+        this.fetchData();
+    }
+
+    componentDidUpdate(prevProps) {
+        if (!prevProps.network.isOffline || this.props.network.isOffline) {
+            return;
+        }
+
+        this.fetchData();
     }
 
     /**
@@ -85,6 +98,10 @@ class IOUDetailsModal extends Component {
         return _.first(lodashGet(this.props, 'iouReport.submitterPhoneNumbers', [])) || '';
     }
 
+    fetchData() {
+        Report.fetchIOUReportByID(this.props.route.params.iouReportID, this.props.route.params.chatReportID, true);
+    }
+
     /**
      * @param {String} paymentMethodType
      */
@@ -152,6 +169,7 @@ IOUDetailsModal.defaultProps = defaultProps;
 
 export default compose(
     withLocalize,
+    withNetwork(),
     withOnyx({
         iou: {
             key: ONYXKEYS.IOU,