[NEW] Open room on tap(push notification) (#116)

* fix frozen screen when app return from background (Android)

* Update state.js

* Update state.js

* init task

* fix updateAt

* remove timeout to show banner

* remove unused state saga, and comment about go to room method

app/containers/Banner.js

@@ -30,22 +30,9 @@ export default class Banner extends React.PureComponent {
 		authenticating: PropTypes.bool,
 		offline: PropTypes.bool
 	}
-	componentWillMount() {
-		this.setState({
-			slow: false
-		});
-		this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
-	}
-	componentWillUnmount() {
-		clearTimeout(this.timer);
-	}
 	render() {
 		const { connecting, authenticating, offline } = this.props;
 
-		if (!this.state.slow) {
-			return null;
-		}
-
 		if (offline) {
 			return (
 				<View style={[styles.bannerContainer, { backgroundColor: 'red' }]}>

app/containers/routes/AuthRoutes.js

@@ -28,7 +28,7 @@ const AuthRoutes = StackNavigator(
 			screen: RoomView,
 			navigationOptions({ navigation }) {
 				return {
-					title: navigation.state.params.title || 'Room'
+					title: navigation.state.params.name || navigation.state.params.room.name || 'Room'
 					// [drawerIconPosition]: (<DrawerMenuButton navigation={navigation} />)÷
 				};
 			}

app/containers/routes/NavigationService.js

@@ -21,3 +21,23 @@ export function goBack() {
 		config.navigator.dispatch(action);
 	}
 }
+
+
+export function goRoom({ rid, name }, counter = 0) {
+	// about counter: we can call this method before navigator be set. so we have to wait, if we tried a lot, we give up ...
+	if (!rid || !name || counter > 10) {
+		return;
+	}
+	if (!config.navigator) {
+		return setTimeout(() => goRoom({ rid, name }, counter + 1), 200);
+	}
+	const action = NavigationActions.reset({
+		index: 1,
+		actions: [
+			NavigationActions.navigate({ routeName: 'RoomsList' }),
+			NavigationActions.navigate({ routeName: 'Room', params: { room: { rid, name }, rid, name } })
+		]
+	});
+
+	return config.navigator.dispatch(action);
+}

app/push.js

@@ -1,6 +1,15 @@
 import PushNotification from 'react-native-push-notification';
 import { AsyncStorage } from 'react-native';
+import EJSON from 'ejson';
+import { goRoom } from './containers/routes/NavigationService';
 
+const handleNotification = (notification) => {
+	if (notification.usernInteraction) {
+		return;
+	}
+	const { rid, name } = EJSON.parse(notification.ejson);
+	return rid && name && goRoom({ rid, name });
+};
 PushNotification.configure({
 
 	// (optional) Called when Token is generated (iOS and Android)
@@ -9,9 +18,7 @@ PushNotification.configure({
 	},
 
 	// (required) Called when a remote or local notification is opened or received
-	onNotification(notification) {
-		console.log('NOTIFICATION:', notification);
-	},
+	onNotification: handleNotification,
 
 	// ANDROID ONLY: GCM Sender ID (optional - not required for local notifications, but is need to receive remote push notifications)
 	senderID: '673693445664',
@@ -25,7 +32,7 @@ PushNotification.configure({
 
 	// Should the initial notification be popped automatically
 	// default: true
-	popInitialNotification: false,
+	popInitialNotification: true,
 
 	/**
      * (optional) default: true

app/sagas/index.js

@@ -22,5 +22,5 @@ const root = function* root() {
 		state()
 	]);
 };
-// Consider using takeEvery
+
 export default root;

app/views/RoomView.js

@@ -70,7 +70,6 @@ export default class RoomView extends React.Component {
 		editCancel: PropTypes.func,
 		rid: PropTypes.string,
 		server: PropTypes.string,
-		sid: PropTypes.string,
 		name: PropTypes.string,
 		Site_Url: PropTypes.string,
 		Message_TimeFormat: PropTypes.string,
@@ -79,12 +78,9 @@ export default class RoomView extends React.Component {
 
 	constructor(props) {
 		super(props);
-
-		this.sid = props.navigation.state.params.room.sid;
 		this.rid =
 			props.rid ||
-			props.navigation.state.params.room.rid ||
-			realm.objectForPrimaryKey('subscriptions', this.sid).rid;
+			props.navigation.state.params.room.rid;
 
 		this.data = realm
 			.objects('messages')
@@ -92,7 +88,6 @@ export default class RoomView extends React.Component {
 			.sorted('ts', true);
 		this.room = realm.objects('subscriptions').filtered('rid = $0', this.rid);
 		this.state = {
-			slow: false,
 			dataSource: ds.cloneWithRows([]),
 			loaded: true,
 			joined: typeof props.rid === 'undefined'
@@ -103,19 +98,15 @@ export default class RoomView extends React.Component {
 		this.props.navigation.setParams({
 			title:
 				this.props.name ||
-				this.props.navigation.state.params.room.name ||
-				realm.objectForPrimaryKey('subscriptions', this.sid).name
+				this.props.navigation.state.params.name ||
+				this.props.navigation.state.params.room.name
 		});
-		this.timer = setTimeout(() => this.setState({ slow: true }), 5000);
 		this.props.openRoom({ rid: this.rid });
 		this.data.addListener(this.updateState);
 	}
 	componentDidMount() {
 		this.updateState();
 	}
-	componentDidUpdate() {
-		return !this.props.loading && clearTimeout(this.timer);
-	}
 	componentWillUnmount() {
 		clearTimeout(this.timer);
 		this.data.removeAllListeners();
@@ -160,7 +151,7 @@ export default class RoomView extends React.Component {
 	};
 
 	renderBanner = () =>
-		(this.state.slow && this.props.loading ? (
+		(this.props.loading ? (
 			<View style={styles.bannerContainer}>
 				<Text style={styles.bannerText}>Loading new messages...</Text>
 			</View>

app/views/RoomsListView.js

@@ -11,6 +11,7 @@ import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 import RoomItem from '../presentation/RoomItem';
 import Banner from '../containers/Banner';
+import { goRoom } from '../containers/routes/NavigationService';
 
 const styles = StyleSheet.create({
 	container: {
@@ -191,11 +192,7 @@ export default class RoomsListView extends React.Component {
 		});
 	};
 
-	_onPressItem = (id, item = {}) => {
-		const navigateToRoom = (room) => {
-			this.props.navigation.navigate('Room', { room, title: room.name });
-		};
-
+	_onPressItem = (item = {}) => {
 		const clearSearch = () => {
 			this.setState({
 				searchText: ''
@@ -220,16 +217,16 @@ export default class RoomsListView extends React.Component {
 							}
 						});
 					}))
-					.then(sub => navigateToRoom({ sid: sub._id, name: sub.name }))
+					.then(sub => goRoom({ room: sub, name: sub.name }))
 					.then(() => clearSearch());
 			} else {
 				clearSearch();
-				navigateToRoom({ rid: item._id, name: item.name });
+				goRoom(item);
 			}
 			return;
 		}
 
-		navigateToRoom({ sid: id, name: item.name });
+		goRoom(item);
 		clearSearch();
 	}
 
@@ -264,7 +261,7 @@ export default class RoomsListView extends React.Component {
 			type={item.t}
 			baseUrl={this.props.Site_Url}
 			dateFormat='MM-DD-YYYY HH:mm:ss'
-			onPress={() => this._onPressItem(item._id, item)}
+			onPress={() => this._onPressItem(item)}
 		/>
 	)
 

package.json

@@ -19,6 +19,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-console": "^6.8.5",
     "babel-polyfill": "^6.26.0",
+    "ejson": "^2.1.2",
     "moment": "^2.19.2",
     "prop-types": "^15.6.0",
     "react": "16.1.1",