Added select users view

app/navigation.js

@@ -8,6 +8,7 @@ import RoomsListView from './views/roomsList';
 import RoomView from './views/room';
 import PhotoView from './views/Photo';
 import CreateChannel from './views/CreateChannel';
+import SelectUsers from './views/selectUsers';
 import store from './lib/createStore';
 import { PrivateScreen, HomeScreen, authenticated } from './index';
 
@@ -22,6 +23,7 @@ Navigation.registerComponent('ListServer', () => ListServerView, store, Provider
 Navigation.registerComponent('Login', () => LoginView, store, Provider);
 Navigation.registerComponent('NewServer', () => NewServerView, store, Provider);
 Navigation.registerComponent('CreateChannel', () => CreateChannel, store, Provider);
+Navigation.registerComponent('SelectUsers', () => SelectUsers, store, Provider);
 
 Navigation.startSingleScreenApp({
 	screen: {

app/views/CreateChannel.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { TextInput, View, Text, Switch, TouchableOpacity, ScrollView } from 'react-native';
+import { TextInput, View, Text, Switch, TouchableOpacity, ScrollView, Platform } from 'react-native';
 import { createChannelRequest } from '../actions/createChannel';
 import styles from './Styles';
 import KeyboardView from '../presentation/KeyboardView';
@@ -36,7 +36,23 @@ export default class CreateChannelView extends React.Component {
 		// this.props.navigator.setSubTitle({
 		// 	subtitle: 'Channels are where your team communicate.'
 		// });
+		const button = Platform.OS === 'ios' ? 'leftButtons' : 'rightButtons';
+		this.props.navigator.setButtons({
+			[button]: [{
+				id: 'back',
+				title: 'Back'
+			}],
+			animated: true
+		});
+		this.props.navigator.setOnNavigatorEvent((event) => {
+			if (event.type === 'NavBarButtonPress' && event.id === 'back') {
+				this.props.navigator.dismissModal({
+					animationType: 'slide-down'
+				});
+			}
+		});
 	}
+
 	submit() {
 		if (!this.state.channelName.trim() || this.props.result.isFetching) {
 			return;

app/views/roomsList.js

@@ -222,8 +222,9 @@ export default class RoomsListView extends React.Component {
 	}
 	_createChannel = () => {
 		Navigation.showModal({
-			screen: 'CreateChannel',
+			screen: 'SelectUsers',
 			title: 'Create a New Channel',
+			subtitle: 'Select Users',
 			passProps: {},
 			navigatorStyle: {},
 			navigatorButtons: {},

app/views/selectUsers.js

@@ -0,0 +1,265 @@
+import ActionButton from 'react-native-action-button';
+import { Navigation } from 'react-native-navigation';
+import { ListView } from 'realm/react-native';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from 'react-native-vector-icons/Ionicons';
+import { View, StyleSheet, TextInput, Platform } from 'react-native';
+import { connect } from 'react-redux';
+import * as actions from '../actions';
+import * as server from '../actions/connect';
+import realm from '../lib/realm';
+import RocketChat from '../lib/rocketchat';
+import RoomItem from '../presentation/RoomItem';
+import Banner from '../containers/Banner';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		alignItems: 'stretch',
+		justifyContent: 'center'
+	},
+	separator: {
+		height: 1,
+		backgroundColor: '#E7E7E7'
+	},
+	list: {
+		width: '100%'
+	},
+	emptyView: {
+		flexGrow: 1,
+		alignItems: 'stretch',
+		justifyContent: 'center'
+	},
+	emptyText: {
+		textAlign: 'center',
+		fontSize: 18,
+		color: '#ccc'
+	},
+	actionButtonIcon: {
+		fontSize: 20,
+		height: 22,
+		color: 'white'
+	},
+	searchBoxView: {
+		backgroundColor: '#eee'
+	},
+	searchBox: {
+		backgroundColor: '#fff',
+		margin: 5,
+		borderRadius: 5,
+		padding: 5,
+		paddingLeft: 10,
+		color: '#aaa'
+	}
+});
+
+const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+@connect(
+	state => ({
+		server: state.server.server,
+		login: state.login,
+		Site_Url: state.settings.Site_Url,
+		canShowList: state.login.token || state.login.user.token
+	}),
+	dispatch => ({
+		login: () => dispatch(actions.login()),
+		connect: () => dispatch(server.connectRequest())
+	})
+)
+export default class RoomsListView extends React.Component {
+	static propTypes = {
+		navigator: PropTypes.object.isRequired,
+		Site_Url: PropTypes.string,
+		server: PropTypes.string
+	};
+
+	constructor(props) {
+		super(props);
+		this.data = realm
+			.objects('subscriptions')
+			.filtered('_server.id = $0 AND t = $1', this.props.server, 'd');
+		this.state = {
+			dataSource: ds.cloneWithRows(this.data),
+			selectedUsers: [],
+			searching: false,
+			searchDataSource: [],
+			searchText: '',
+			login: false
+		};
+		this.data.addListener(this.updateState);
+	}
+	componentWillMount() {
+		// add back button
+		const button = Platform.OS === 'ios' ? 'leftButtons' : 'rightButtons';
+		this.props.navigator.setButtons({
+			[button]: [
+				{
+					id: 'back',
+					title: 'Back'
+				}
+			],
+			animated: true
+		});
+
+		// on navigator event
+		this.props.navigator.setOnNavigatorEvent((event) => {
+			if (event.type === 'NavBarButtonPress' && event.id === 'back') {
+				this.props.navigator.dismissModal({
+					animationType: 'slide-down'
+				});
+			}
+		});
+	}
+	componentWillUnmount() {
+		this.data.removeListener(this.updateState);
+	}
+
+	onSearchChangeText = (text) => {
+		const searchText = text.trim();
+		this.setState({
+			searchText: text,
+			searching: searchText !== ''
+		});
+		if (searchText === '') {
+			return this.setState({
+				dataSource: ds.cloneWithRows(this.data)
+			});
+		}
+
+		const data = this.data.filtered('name CONTAINS[c] $0', searchText).slice();
+
+		const usernames = [];
+		const dataSource = data.map((sub) => {
+			if (sub.t === 'd') {
+				usernames.push(sub.name);
+			}
+			return sub;
+		});
+
+		if (dataSource.length < 7) {
+			if (this.oldPromise) {
+				this.oldPromise();
+			}
+			Promise.race([
+				RocketChat.spotlight(searchText, usernames),
+				new Promise((resolve, reject) => (this.oldPromise = reject))
+			])
+				.then(
+					(results) => {
+						results.users.forEach((user) => {
+							dataSource.push({
+								...user,
+								name: user.username,
+								t: 'd',
+								search: true
+							});
+						});
+
+						this.setState({
+							dataSource: ds.cloneWithRows(dataSource)
+						});
+					},
+					() => console.log('spotlight stopped')
+				)
+				.then(() => delete this.oldPromise);
+		}
+		this.setState({
+			dataSource: ds.cloneWithRows(dataSource)
+		});
+	};
+
+	updateState = () => {
+		this.setState({
+			dataSource: ds.cloneWithRows(this.data)
+		});
+	};
+
+	userIsSelected(username) {
+		return this.state.selectedUsers.indexOf(username) !== -1;
+	}
+
+	_onPressItem = (id, item = {}) => {
+		const selectUser = (username) => {
+			const selectedUsers = this.state.selectedUsers;
+			const index = selectedUsers.indexOf(username);
+			if (index === -1) {
+				selectedUsers.push(username);
+			} else {
+				selectedUsers.splice(index, 1);
+			}
+			this.setState({ selectedUsers });
+		};
+
+		if (item.search) {
+			selectUser(item.username);
+		} else {
+			selectUser(item.name);
+		}
+	};
+	_createChannel = () => {
+		Navigation.showModal({
+			screen: 'CreateChannel',
+			title: 'Create a New Channel',
+			passProps: {},
+			navigatorStyle: {},
+			navigatorButtons: {},
+			animationType: 'slide-up'
+		});
+	};
+	renderSearchBar = () => (
+		<View style={styles.searchBoxView}>
+			<TextInput
+				underlineColorAndroid='transparent'
+				style={styles.searchBox}
+				value={this.state.searchText}
+				onChangeText={this.onSearchChangeText}
+				returnKeyType='search'
+				placeholder='Search'
+				clearButtonMode='while-editing'
+				blurOnSubmit
+			/>
+		</View>
+	);
+	renderItem = item => (
+		<RoomItem
+			key={item._id}
+			name={item.name}
+			type={item.t}
+			baseUrl={this.props.Site_Url}
+			onPress={() => this._onPressItem(item._id, item)}
+			unread={this.userIsSelected(item.name) ? 10 : null}
+		/>
+	);
+	renderList = () => (
+		<ListView
+			dataSource={this.state.dataSource}
+			style={styles.list}
+			renderRow={this.renderItem}
+			renderHeader={this.renderSearchBar}
+			contentOffset={{ x: 0, y: 20 }}
+			enableEmptySections
+			keyboardShouldPersistTaps='always'
+		/>
+	);
+	renderCreateButtons = () => (
+		<ActionButton buttonColor='rgba(231,76,60,1)'>
+			<ActionButton.Item
+				buttonColor='#9b59b6'
+				title='Create Channel'
+				onPress={() => {
+					this._createChannel();
+				}}
+			>
+				<Icon name='md-chatbubbles' style={styles.actionButtonIcon} />
+			</ActionButton.Item>
+		</ActionButton>
+	);
+	render = () => (
+		<View style={styles.container}>
+			<Banner />
+			{this.renderList()}
+			{this.renderCreateButtons()}
+		</View>
+	);
+}

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -841,7 +841,6 @@
 						TestTargetID = 13B07F861A680F5B00A75B9A;
 					};
 					13B07F861A680F5B00A75B9A = {
-						DevelopmentTeam = S6UPZG7ZR3;
 						ProvisioningStyle = Automatic;
 					};
 					2D02E47A1E0B4A5D006451C7 = {
@@ -1442,7 +1441,7 @@
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
-				DEVELOPMENT_TEAM = S6UPZG7ZR3;
+				DEVELOPMENT_TEAM = "";
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/realm/src/**",
@@ -1475,7 +1474,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CURRENT_PROJECT_VERSION = 1;
-				DEVELOPMENT_TEAM = S6UPZG7ZR3;
+				DEVELOPMENT_TEAM = "";
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/realm/src/**",