diff --git a/src/Expensify.js b/src/Expensify.js index 1f0e249eb244..488711c37b99 100644 --- a/src/Expensify.js +++ b/src/Expensify.js @@ -21,6 +21,7 @@ import ConfirmModal from './components/ConfirmModal'; import compose from './libs/compose'; import withLocalize, {withLocalizePropTypes} from './components/withLocalize'; import * as User from './libs/actions/User'; +import NetworkConnection from './libs/NetworkConnection'; Onyx.registerLogger(({level, message}) => { if (level === 'alert') { @@ -91,6 +92,9 @@ class Expensify extends PureComponent { isOnyxMigrated: false, isSplashShown: true, }; + + // Used for the offline indicator appearing when someone is offline + NetworkConnection.subscribeToNetInfo(); } componentDidMount() { diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index aa6a9324845f..b1b8e9b8ccad 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -102,6 +102,10 @@ class AuthScreens extends React.Component { componentDidMount() { NetworkConnection.listenForReconnect(); + NetworkConnection.onReconnect(() => { + App.getAppData(); + App.reconnectApp(); + }); PusherConnectionManager.init(); Pusher.init({ appKey: CONFIG.PUSHER.APP_KEY, diff --git a/src/libs/NetworkConnection.js b/src/libs/NetworkConnection.js index 300839bf204b..cda405943da2 100644 --- a/src/libs/NetworkConnection.js +++ b/src/libs/NetworkConnection.js @@ -81,8 +81,6 @@ function listenForReconnect() { unsubscribeFromAppState = AppStateMonitor.addBecameActiveListener(() => { triggerReconnectionCallbacks('app became active'); }); - - subscribeToNetInfo(); } /** @@ -130,4 +128,5 @@ export default { onReconnect, triggerReconnectionCallbacks, recheckNetworkConnection, + subscribeToNetInfo, }; diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js index 99abe499d7e1..2db1983fca8a 100644 --- a/src/libs/actions/App.js +++ b/src/libs/actions/App.js @@ -14,7 +14,6 @@ import Timing from './Timing'; import * as Report from './Report'; import * as BankAccounts from './BankAccounts'; import * as Policy from './Policy'; -import NetworkConnection from '../NetworkConnection'; import Navigation from '../Navigation/Navigation'; import ROUTES from '../../ROUTES'; import * as SessionUtils from '../SessionUtils'; @@ -251,12 +250,6 @@ function openProfile() { Navigation.navigate(ROUTES.SETTINGS_PROFILE); } -// When the app reconnects from being offline, fetch all initialization data -NetworkConnection.onReconnect(() => { - getAppData(); - reconnectApp(); -}); - export { setLocale, setSidebarLoaded, @@ -265,4 +258,5 @@ export { setUpPoliciesAndNavigate, openProfile, openApp, + reconnectApp, }; diff --git a/src/libs/actions/SignInRedirect.js b/src/libs/actions/SignInRedirect.js index ffde6f2f9557..597de6d2ecd8 100644 --- a/src/libs/actions/SignInRedirect.js +++ b/src/libs/actions/SignInRedirect.js @@ -16,12 +16,19 @@ Onyx.connect({ callback: val => currentPreferredLocale = val, }); +let currentIsOffline; +Onyx.connect({ + key: ONYXKEYS.NETWORK, + callback: val => currentIsOffline = val.isOffline, +}); + /** * @param {String} errorMessage */ function clearStorageAndRedirect(errorMessage) { const activeClients = currentActiveClients; const preferredLocale = currentPreferredLocale; + const isOffline = currentIsOffline; // Clearing storage discards the authToken. This causes a redirect to the SignIn screen Onyx.clear() @@ -32,6 +39,9 @@ function clearStorageAndRedirect(errorMessage) { if (activeClients && activeClients.length > 0) { Onyx.set(ONYXKEYS.ACTIVE_CLIENTS, activeClients); } + if (isOffline) { + Onyx.set(ONYXKEYS.NETWORK, {isOffline}); + } // `Onyx.clear` reinitialize the Onyx instance with initial values so use `Onyx.merge` instead of `Onyx.set`. Onyx.merge(ONYXKEYS.SESSION, {error: errorMessage}); diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js index dec680d100bb..04ce5c7cc04f 100755 --- a/src/pages/signin/LoginForm.js +++ b/src/pages/signin/LoginForm.js @@ -18,6 +18,9 @@ import * as ValidationUtils from '../../libs/ValidationUtils'; import * as LoginUtils from '../../libs/LoginUtils'; import withToggleVisibilityView, {toggleVisibilityViewPropTypes} from '../../components/withToggleVisibilityView'; import FormAlertWithSubmitButton from '../../components/FormAlertWithSubmitButton'; +import OfflineIndicator from '../../components/OfflineIndicator'; +import {withNetwork} from '../../components/OnyxProvider'; +import networkPropTypes from '../../components/networkPropTypes'; const propTypes = { /** Should we dismiss the keyboard when transitioning away from the page? */ @@ -37,6 +40,9 @@ const propTypes = { isLoading: PropTypes.bool, }), + /** Props to detect online status */ + network: networkPropTypes.isRequired, + ...windowDimensionsPropTypes, ...withLocalizePropTypes, @@ -113,6 +119,10 @@ class LoginForm extends React.Component { * Check that all the form fields are valid, then trigger the submit callback */ validateAndSubmitForm() { + if (this.props.network.isOffline) { + return; + } + const login = this.state.login.trim(); if (!login) { this.setState({formError: 'common.pleaseEnterEmailOrPhoneNumber'}); @@ -181,6 +191,7 @@ class LoginForm extends React.Component { containerStyles={[styles.mh0]} /> + ); } @@ -196,4 +207,5 @@ export default compose( withWindowDimensions, withLocalize, withToggleVisibilityView, + withNetwork(), )(LoginForm);