Add the ability to retry the connection (#1161)

app/components/offline_indicator/index.js

@@ -1,8 +1,12 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
+import {init as initWebSocket} from 'mattermost-redux/actions/websocket';
+
+import {connection} from 'app/actions/device';
 import {getConnection} from 'app/selectors/device';
 
 import OfflineIndicator from './offline_indicator';
@@ -19,4 +23,13 @@ function mapStateToProps(state) {
     };
 }
 
-export default connect(mapStateToProps)(OfflineIndicator);
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            connection,
+            initWebSocket
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(OfflineIndicator);

app/components/offline_indicator/offline_indicator.js

@@ -8,11 +8,13 @@ import {
     Animated,
     Platform,
     StyleSheet,
+    TouchableOpacity,
     View
 } from 'react-native';
 import IonIcon from 'react-native-vector-icons/Ionicons';
 
 import FormattedText from 'app/components/formatted_text';
+import checkNetwork from 'app/utils/network';
 
 import {RequestStatus} from 'mattermost-redux/constants';
 
@@ -25,6 +27,10 @@ const CONNECTED = 'connected';
 
 export default class OfflineIndicator extends Component {
     static propTypes = {
+        actions: PropTypes.shape({
+            connection: PropTypes.func.isRequired,
+            initWebSocket: PropTypes.func.isRequired
+        }).isRequired,
         isConnecting: PropTypes.bool,
         isOnline: PropTypes.bool,
         webSocketStatus: PropTypes.string
@@ -64,18 +70,16 @@ export default class OfflineIndicator extends Component {
         return nextState.network !== this.state.network && nextState.network;
     }
 
-    offline = () => {
-        this.setState({network: OFFLINE}, () => {
-            this.show();
-        });
-    };
-
-    connecting = () => {
-        const prevState = this.state.network;
-        this.setState({network: CONNECTING}, () => {
-            if (prevState !== OFFLINE) {
-                this.show();
-            }
+    connect = () => {
+        checkNetwork((result) => {
+            this.setState({network: CONNECTING}, () => {
+                if (result) {
+                    this.props.actions.connection(true);
+                    this.props.actions.initWebSocket(Platform.OS);
+                } else {
+                    this.setState({network: OFFLINE});
+                }
+            });
         });
     };
 
@@ -101,6 +105,21 @@ export default class OfflineIndicator extends Component {
         });
     };
 
+    connecting = () => {
+        const prevState = this.state.network;
+        this.setState({network: CONNECTING}, () => {
+            if (prevState !== OFFLINE) {
+                this.show();
+            }
+        });
+    };
+
+    offline = () => {
+        this.setState({network: OFFLINE}, () => {
+            this.show();
+        });
+    };
+
     show = () => {
         Animated.timing(
             this.state.top, {
@@ -127,6 +146,18 @@ export default class OfflineIndicator extends Component {
         case OFFLINE:
             i18nId = 'mobile.offlineIndicator.offline';
             defaultMessage = 'Cannot connect to the server';
+            action = (
+                <TouchableOpacity
+                    onPress={this.connect}
+                    style={[styles.actionContainer, styles.actionButton]}
+                >
+                    <IonIcon
+                        color='#FFFFFF'
+                        name='ios-refresh'
+                        size={20}
+                    />
+                </TouchableOpacity>
+            );
             break;
         case CONNECTING:
             i18nId = 'mobile.offlineIndicator.connecting';