[FIX] SDK issues (#621)

* Remove listeners from room
* Properly close connections on change server
* Minor layout change on connecting badge

app/containers/ConnectionBadge.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import {
-	Text, StyleSheet, ActivityIndicator, Animated, TouchableWithoutFeedback, Easing
+	Text, StyleSheet, ActivityIndicator, Animated, Easing
 } from 'react-native';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
@@ -50,20 +50,30 @@ class ConnectionBadge extends Component {
 	static propTypes = {
 		connecting: PropTypes.bool,
 		connected: PropTypes.bool,
-		disconnected: PropTypes.bool // eslint-disable-line
+		disconnected: PropTypes.bool
 	}
 
 	constructor(props) {
 		super(props);
 		this.animatedValue = new Animated.Value(0);
+		if (props.connecting) {
+			this.show();
+		}
 	}
 
 	componentDidUpdate() {
-		this.show();
+		const { connected, disconnected } = this.props;
+		this.show(connected || disconnected);
+	}
+
+	componentWillUnmount() {
+		if (this.timeout) {
+			clearTimeout(this.timeout);
+		}
 	}
 
 	// eslint-disable-next-line react/sort-comp
-	animate = debounce((toValue) => {
+	animate = debounce((toValue, autoHide) => {
 		Animated.timing(
 			this.animatedValue,
 			{
@@ -73,7 +83,7 @@ class ConnectionBadge extends Component {
 				useNativeDriver: true
 			},
 		).start(() => {
-			if (toValue === 1) {
+			if (toValue === 1 && autoHide) {
 				if (this.timeout) {
 					clearTimeout(this.timeout);
 				}
@@ -84,8 +94,8 @@ class ConnectionBadge extends Component {
 		});
 	}, 300);
 
-	show = () => {
+	show = (autoHide) => {
-		this.animate(1);
+		this.animate(1, autoHide);
 	}
 
 	hide = () => {
@@ -102,29 +112,23 @@ class ConnectionBadge extends Component {
 
 		if (connecting) {
 			return (
-				<TouchableWithoutFeedback onPress={this.hide}>
+				<Animated.View style={[styles.container, { transform: [{ translateY }] }]}>
-					<Animated.View style={[styles.container, { transform: [{ translateY }] }]}>
+					<ActivityIndicator color='#9EA2A8' style={styles.activityIndicator} />
-						<ActivityIndicator color='#9EA2A8' style={styles.activityIndicator} />
+					<Text style={[styles.text, styles.textConnecting]}>{I18n.t('Connecting')}</Text>
-						<Text style={[styles.text, styles.textConnecting]}>{I18n.t('Connecting')}</Text>
+				</Animated.View>
-					</Animated.View>
-				</TouchableWithoutFeedback>
 			);
 		} else if (connected) {
 			return (
-				<TouchableWithoutFeedback onPress={this.hide}>
+				<Animated.View style={[styles.container, styles.containerConnected, { transform: [{ translateY }] }]}>
-					<Animated.View style={[styles.container, styles.containerConnected, { transform: [{ translateY }] }]}>
+					<Text style={styles.text}>{I18n.t('Connected')}</Text>
-						<Text style={styles.text}>{I18n.t('Connected')}</Text>
+				</Animated.View>
-					</Animated.View>
-				</TouchableWithoutFeedback>
 			);
 		}
 
 		return (
-			<TouchableWithoutFeedback onPress={this.hide}>
+			<Animated.View style={[styles.container, styles.containerOffline, { transform: [{ translateY }] }]}>
-				<Animated.View style={[styles.container, styles.containerOffline, { transform: [{ translateY }] }]}>
+				<Text style={styles.text}>{I18n.t('Offline')}</Text>
-					<Text style={styles.text}>{I18n.t('Offline')}</Text>
+			</Animated.View>
-				</Animated.View>
-			</TouchableWithoutFeedback>
 		);
 	}
 }

app/lib/methods/subscriptions/room.js

@@ -1,18 +1,12 @@
 import log from '../../../utils/log';
 
 const unsubscribe = subscriptions => subscriptions.forEach(sub => sub.unsubscribe().catch(() => console.log('unsubscribeRoom')));
+const removeListener = listener => listener.stop();
 
 let promises;
 let timer = null;
-
+let connectedListener;
-const stop = () => {
+let disconnectedListener;
-	if (promises) {
-		promises.then(unsubscribe);
-		promises = false;
-	}
-
-	clearTimeout(timer);
-};
 
 export default function subscribeRoom({ rid }) {
 	if (promises) {
@@ -23,31 +17,48 @@ export default function subscribeRoom({ rid }) {
 		if (timer) {
 			return;
 		}
-		timer = setTimeout(async() => {
+		timer = setTimeout(() => {
 			try {
 				clearTimeout(timer);
 				timer = false;
-				if (this.sdk.userId) {
+				this.loadMissedMessages({ rid });
-					await this.loadMissedMessages({ rid });
+				loop();
-					loop();
-				}
 			} catch (e) {
 				loop();
 			}
 		}, 5000);
 	};
 
-	this.sdk.onStreamData('connected', () => {
+	const handleConnected = () => {
-		if (this.sdk.userId) {
+		this.loadMissedMessages({ rid });
-			this.loadMissedMessages({ rid });
-		}
 		clearTimeout(timer);
 		timer = false;
-	});
+	};
 
-	this.sdk.onStreamData('close', () => {
+	const handleDisconnected = () => {
-		loop();
+		if (this.sdk.userId) {
-	});
+			loop();
+		}
+	};
+
+	const stop = () => {
+		if (promises) {
+			promises.then(unsubscribe);
+			promises = false;
+		}
+		if (connectedListener) {
+			connectedListener.then(removeListener);
+			connectedListener = false;
+		}
+		if (disconnectedListener) {
+			disconnectedListener.then(removeListener);
+			disconnectedListener = false;
+		}
+		clearTimeout(timer);
+	};
+
+	connectedListener = this.sdk.onStreamData('connected', handleConnected);
+	disconnectedListener = this.sdk.onStreamData('close', handleDisconnected);
 
 	try {
 		promises = this.sdk.subscribeRoom(rid);

app/lib/rocketchat.js

@@ -141,7 +141,7 @@ const RocketChat = {
 		this.sdk.subscribe('roles');
 		this.getPermissions();
 		this.getCustomEmoji();
-		this.registerPushToken().then(result => console.log(result)).catch(e => console.log(e));
+		this.registerPushToken().catch(e => console.log(e));
 	},
 	connect({ server, user }) {
 		database.setActiveDB(server);
@@ -151,6 +151,11 @@ const RocketChat = {
 			clearTimeout(this.connectTimeout);
 		}
 
+		if (this.sdk) {
+			this.sdk.disconnect();
+			this.sdk = null;
+		}
+
 		// Use useSsl: false only if server url starts with http://
 		const useSsl = !/http:\/\//.test(server);
 

app/reducers/connect.js

@@ -10,7 +10,8 @@ export default function connect(state = initialState, action) {
 		case METEOR.REQUEST:
 			return {
 				...state,
-				connecting: true
+				connecting: true,
+				connected: false
 			};
 		case METEOR.SUCCESS:
 			return {

app/reducers/rooms.js

@@ -1,7 +1,7 @@
 import * as types from '../actions/actionsTypes';
 
 const initialState = {
-	isFetching: true,
+	isFetching: false,
 	failure: false,
 	errorMessage: {},
 	searchText: '',

package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@remobile/react-native-toast": "^1.0.7",
-    "@rocket.chat/sdk": "1.0.0-alpha.24",
+    "@rocket.chat/sdk": "1.0.0-alpha.25",
     "deep-equal": "^1.0.1",
     "ejson": "^2.1.2",
     "js-base64": "^2.5.1",

yarn.lock

@@ -988,10 +988,10 @@
   resolved "https://registry.yarnpkg.com/@remobile/react-native-toast/-/react-native-toast-1.0.7.tgz#b2e3684cdb13e1c9d9b4ed08e667157d4ad0fab2"
   integrity sha512-iOD1PRnTSVr9sDWQdesIpfRrwJhHfeEQe5BpalQxC5OhM9thpiE6cu2NlW1KBWl0RJG4ZiJaF1xLlCo9YxU6dA==
 
-"@rocket.chat/sdk@1.0.0-alpha.24":
+"@rocket.chat/sdk@1.0.0-alpha.25":
-  version "1.0.0-alpha.24"
+  version "1.0.0-alpha.25"
-  resolved "https://registry.yarnpkg.com/@rocket.chat/sdk/-/sdk-1.0.0-alpha.24.tgz#8a6d3ff869c050b34f62bb7ef972d14c1a4d4f79"
+  resolved "https://registry.yarnpkg.com/@rocket.chat/sdk/-/sdk-1.0.0-alpha.25.tgz#7fd6fce64e29c2ab9eb77000f1a65bdd3b0379bb"
-  integrity sha512-5EXVWkzQLGyKB5EdLZdpH86/gQ2rYY12OZ1ClRpAqYZs8svBKOn9pGBEWBW9i0C6ZowedFm8SdQjX4VHw+60hg==
+  integrity sha512-/IfiLhTZooJQX1kimPZiY0FNSDw3kZcL/yquxD14kZbKRKm0ZSg5BJeWFpkinQq5Y9XjySX+k3mjmXX3Es97Cg==
   dependencies:
     "@types/event-emitter" "^0.3.2"
     "@types/eventemitter3" "^2.0.2"