better roomList view and click

.expo/packager-info.json

@@ -0,0 +1,5 @@
+{
+  "expoServerPort": null,
+  "packagerPort": null,
+  "packagerPid": null
+}

.expo/settings.json

@@ -0,0 +1,9 @@
+{
+  "hostType": "tunnel",
+  "lanType": "ip",
+  "dev": true,
+  "strict": false,
+  "minify": false,
+  "urlType": "exp",
+  "urlRandomness": null
+}

app/lib/rocketchat.js

@@ -154,6 +154,39 @@ const RocketChat = {
 				return resolve(result);
 			});
 		});
+	},
+
+	spotlight(search, usernames) {
+		return new Promise((resolve, reject) => {
+			Meteor.call('spotlight', search, usernames, (error, result) => {
+				if (error) {
+					return reject(error);
+				}
+				return resolve(result);
+			});
+		});
+	},
+
+	createDirectMessage(username) {
+		return new Promise((resolve, reject) => {
+			Meteor.call('createDirectMessage', username, (error, result) => {
+				if (error) {
+					return reject(error);
+				}
+				return resolve(result);
+			});
+		});
+	},
+
+	joinRoom(rid) {
+		return new Promise((resolve, reject) => {
+			Meteor.call('joinRoom', rid, (error, result) => {
+				if (error) {
+					return reject(error);
+				}
+				return resolve(result);
+			});
+		});
 	}
 };
 

app/views/room.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, FlatList, StyleSheet } from 'react-native';
+import { Text, View, FlatList, StyleSheet, Button } from 'react-native';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 
@@ -36,17 +36,18 @@ export default class RoomView extends React.Component {
 	}
 
 	static navigationOptions = ({ navigation }) => ({
-		title: realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
+		title: navigation.state.params.name || realm.objectForPrimaryKey('subscriptions', navigation.state.params.sid).name
 	});
 
 	constructor(props) {
 		super(props);
-		this.rid = realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
+		this.rid = props.navigation.state.params.rid || realm.objectForPrimaryKey('subscriptions', props.navigation.state.params.sid).rid;
 		// this.rid = 'GENERAL';
 
 		this.state = {
 			dataSource: this.getMessages(),
-			loaded: false
+			loaded: false,
+			joined: typeof props.navigation.state.params.rid === 'undefined'
 		};
 
 		this.url = realm.objectForPrimaryKey('settings', 'Site_Url').value;
@@ -77,13 +78,14 @@ export default class RoomView extends React.Component {
 
 	sendMessage = message => RocketChat.sendMessage(this.rid, message);
 
-	renderItem = ({ item }) => (
+	joinRoom = () => {
-		<Message
+		RocketChat.joinRoom(this.props.navigation.state.params.rid)
-			id={item._id}
+			.then(() => {
-			item={item}
+				this.setState({
-			baseUrl={this.url}
+					joined: true
-		/>
+				});
-	);
+			});
+	};
 
 	renderBanner = () => {
 		if (this.state.loaded === false) {
@@ -93,6 +95,34 @@ export default class RoomView extends React.Component {
 				</View>
 			);
 		}
+	};
+
+	renderItem = ({ item }) => (
+		<Message
+			id={item._id}
+			item={item}
+			baseUrl={this.url}
+		/>
+	);
+
+	renderSeparator = () => (
+		<View style={styles.separator} />
+	);
+
+	renderFooter = () => {
+		if (!this.state.joined) {
+			return (
+				<View>
+					<Text>You are in preview mode.</Text>
+					<Button title='Join' onPress={this.joinRoom} />
+				</View>
+			);
+		}
+		return (
+			<MessageBox
+				onSubmit={this.sendMessage}
+			/>
+		);
 	}
 
 	render() {
@@ -107,9 +137,7 @@ export default class RoomView extends React.Component {
 					renderItem={this.renderItem}
 					keyExtractor={item => item._id}
 				/>
-				<MessageBox
+				{this.renderFooter()}
-					onSubmit={this.sendMessage}
-				/>
 			</KeyboardView>
 		);
 	}

app/views/roomsList.js

@@ -2,7 +2,7 @@ import ActionButton from 'react-native-action-button';
 import Icon from 'react-native-vector-icons/Ionicons';
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
+import { Text, View, FlatList, StyleSheet, TouchableOpacity, Platform, TextInput } from 'react-native';
 import Meteor from 'react-native-meteor';
 import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
@@ -80,8 +80,13 @@ export default class RoomsListView extends React.Component {
 
 	constructor(props) {
 		super(props);
-		this._listViewOffset = 0;
+
-		this.state = this.getState();
+		this.state = {
+			dataSource: this.getSubscriptions(),
+			searching: false,
+			searchDataSource: [],
+			searchText: ''
+		};
 	}
 
 	componentWillMount() {
@@ -100,8 +105,52 @@ export default class RoomsListView extends React.Component {
 		realm.removeListener('change', this.updateState);
 	}
 
-	getState = () => ({
+	onSearchChangeText = (text) => {
-		dataSource: realm.objects('subscriptions').filtered('_server.id = $0', RocketChat.currentServer).sorted('name').slice()
+		const searchText = text.trim();
+		this.setState({
+			searchText: text,
+			searching: searchText !== ''
+		});
+
+		if (searchText !== '') {
+			const dataSource = [];
+			const usernames = [];
+			realm.objects('subscriptions').filtered('_server.id = $0 AND name CONTAINS[c] $1', RocketChat.currentServer, searchText).forEach((sub) => {
+				dataSource.push(sub);
+
+				if (sub.t === 'd') {
+					usernames.push(sub.name);
+				}
+			});
+
+			if (dataSource.length < 5) {
+				RocketChat.spotlight(searchText, usernames)
+					.then((results) => {
+						results.users.forEach((user) => {
+							dataSource.push({
+								...user,
+								name: user.username,
+								t: 'd',
+								search: true
+							});
+						});
+
+						results.rooms.forEach((room) => {
+							dataSource.push({
+								...room,
+								search: true
+							});
+						});
+
+						this.setState({
+							searchDataSource: dataSource
+						});
+					});
+			}
+		}
+	}
+
+	getSubscriptions = () => realm.objects('subscriptions').filtered('_server.id = $0', RocketChat.currentServer).sorted('name').slice()
 		.sort((a, b) => {
 			if (a.unread < b.unread) {
 				return 1;
@@ -112,16 +161,41 @@ export default class RoomsListView extends React.Component {
 			}
 
 			return 0;
-			})
+		});
-	})
 
 	updateState = () => {
-		this.setState(this.getState());
+		this.setState({
+			dataSource: this.getSubscriptions()
+		});
 	}
 
-	_onPressItem = (id) => {
+	_onPressItem = (id, item) => {
 		const { navigate } = this.props.navigation;
+
+		const clearSearch = () => {
+			this.setState({
+				searchText: '',
+				searching: false,
+				searchDataSource: []
+			});
+		};
+
+		// if user is using the search we need first to join/create room
+		if (item.search) {
+			if (item.t === 'd') {
+				RocketChat.createDirectMessage(item.username)
+					.then(room => realm.objects('subscriptions').filtered('_server.id = $0 AND rid = $1', RocketChat.currentServer, room.rid))
+					.then(subs => navigate('Room', { sid: subs[0]._id }))
+					.then(() => clearSearch());
+			} else {
+				navigate('Room', { rid: item._id, name: item.name });
+				clearSearch();
+			}
+			return;
+		}
+
 		navigate('Room', { sid: id });
+		clearSearch();
 	}
 	_createChannel = () => {
 		const { navigate } = this.props.navigation;
@@ -160,25 +234,35 @@ export default class RoomsListView extends React.Component {
 		<View style={styles.separator} />
 	);
 
-	renderList = () => {
+	renderSearchBar = () => (
-		if (this.state.dataSource.length) {
+		<TextInput
-			return (
+			style={styles.searchBox}
-				<FlatList
+			value={this.state.searchText}
-					style={styles.list}
+			onChangeText={this.onSearchChangeText}
-					data={this.state.dataSource}
+			returnKeyType='search'
-					renderItem={this.renderItem}
+			placeholder='Search'
-					keyExtractor={item => item._id}
-					ItemSeparatorComponent={this.renderSeparator}
 		/>
 	);
-		}
 
+	renderList = () => {
+		if (!this.state.searching && !this.state.dataSource.length) {
 			return (
 				<View style={styles.emptyView}>
 					<Text style={styles.emptyText}>No rooms</Text>
 				</View>
 			);
 		}
+
+		return (
+			<FlatList
+				style={styles.list}
+				data={this.state.searching ? this.state.searchDataSource : this.state.dataSource}
+				renderItem={this.renderItem}
+				keyExtractor={item => item._id}
+				ItemSeparatorComponent={this.renderSeparator}
+			/>
+		);
+	}
 	renderCreateButtons() {
 		return (
 			<ActionButton buttonColor='rgba(231,76,60,1)'>
@@ -191,6 +275,7 @@ export default class RoomsListView extends React.Component {
 		return (
 			<View style={styles.container}>
 				{this.renderBanner()}
+				{this.renderSearchBar()}
 				{this.renderList()}
 				{this.renderCreateButtons()}
 			</View>

package.json

@@ -15,6 +15,7 @@
     "react": "16.0.0-alpha.12",
     "react-emojione": "^3.1.10",
     "react-native": "0.46.1",
+    "react-native-action-button": "^2.7.2",
     "react-native-easy-markdown": "git+https://github.com/lappalj4/react-native-easy-markdown.git",
     "react-native-fetch-blob": "^0.10.8",
     "react-native-form-generator": "^0.9.9",