Add better network detection (#1054)

* Add better network detection

* Mock NetInfo for store

app/screens/channel/channel.js

@@ -5,7 +5,6 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {injectIntl, intlShape} from 'react-intl';
 import {
-    NetInfo,
     Platform,
     View
 } from 'react-native';
@@ -22,6 +21,7 @@ import StatusBar from 'app/components/status_bar';
 import {wrapWithPreventDoubleTap} from 'app/utils/tap';
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
 import PostTextbox from 'app/components/post_textbox';
+import networkConnectionListener from 'app/utils/network';
 
 import ChannelDrawerButton from './channel_drawer_button';
 import ChannelPostList from './channel_post_list';
@@ -53,8 +53,8 @@ class Channel extends PureComponent {
 
     componentWillMount() {
         EventEmitter.on('leave_team', this.handleLeaveTeam);
-        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
-        NetInfo.isConnected.fetch().then(this.handleConnectionChange);
+
+        this.networkListener = networkConnectionListener(this.handleConnectionChange);
 
         if (this.props.currentTeamId) {
             this.loadChannels(this.props.currentTeamId);
@@ -79,7 +79,7 @@ class Channel extends PureComponent {
         const {closeWebSocket, stopPeriodicStatusUpdates} = this.props.actions;
 
         EventEmitter.off('leave_team', this.handleLeaveTeam);
-        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
+        this.networkListener.removeEventListener();
 
         closeWebSocket();
         stopPeriodicStatusUpdates();

app/store/index.js

@@ -13,6 +13,7 @@ import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import {NavigationTypes, ViewTypes} from 'app/constants';
 import appReducer from 'app/reducers';
+import networkConnectionListener from 'app/utils/network';
 import {createSentryMiddleware} from 'app/utils/sentry/middleware';
 
 import {transformSet} from './utils';
@@ -100,6 +101,7 @@ export default function configureAppStore(initialState) {
     );
 
     const offlineOptions = {
+        detectNetwork: (callback) => networkConnectionListener(callback),
         persist: (store, options) => {
             const persistor = persistStore(store, {storage: AsyncStorage, ...options}, () => {
                 store.dispatch({

app/utils/network.js

@@ -0,0 +1,34 @@
+import {NetInfo} from 'react-native';
+
+import {Client4} from 'mattermost-redux/client';
+
+export async function checkConnection() {
+    const server = Client4.getUrl() || 'https://www.google.com';
+
+    try {
+        await fetch(server);
+        return true;
+    } catch (error) {
+        return false;
+    }
+}
+
+function handleConnectionChange(onChange) {
+    return async () => {
+        const result = await checkConnection();
+        onChange(result);
+    };
+}
+
+export default function networkConnectionListener(onChange) {
+    const connectionChanged = handleConnectionChange(onChange);
+
+    NetInfo.isConnected.addEventListener('change', connectionChanged);
+    NetInfo.isConnected.fetch().then(connectionChanged);
+
+    const removeEventListener = () => NetInfo.isConnected.removeEventListener('change', connectionChanged); // eslint-disable-line
+
+    return {
+        removeEventListener
+    };
+}

test/setup.js

@@ -21,7 +21,13 @@ mockery.registerMock('react-native', {
             return {width: 0, height: 0}
         }
     },
-    NativeModules: {}
+    NativeModules: {},
+    NetInfo: {
+        isConnected: {
+            addEventListener: () => true,
+            fetch: () => Promise.resolve(true)
+        }
+    }
 });
 mockery.registerMock('react-native-device-info', {
     getDeviceLocale() {