Create MessageBox component

app/components/KeyboardView.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { KeyboardAvoidingView, Platform } from 'react-native';
+
+export default class KeyboardView extends React.PureComponent {
+	static propTypes = {
+		style: KeyboardAvoidingView.propTypes.style,
+		keyboardVerticalOffset: PropTypes.number,
+		children: PropTypes.array.isRequired
+	}
+
+	render() {
+		return (
+			<KeyboardAvoidingView style={this.props.style} behavior={Platform.OS === 'ios' ? 'padding' : null} keyboardVerticalOffset={this.props.keyboardVerticalOffset}>
+				{this.props.children}
+			</KeyboardAvoidingView>
+		);
+	}
+}

app/components/MessageBox.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { View, TextInput, StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+	textBox: {
+		paddingTop: 1,
+		backgroundColor: '#ccc'
+	},
+	textBoxInput: {
+		height: 40,
+		backgroundColor: '#fff',
+		paddingLeft: 15
+	}
+});
+
+export default class MessageBox extends React.PureComponent {
+	static propTypes = {
+		onSubmit: PropTypes.func.isRequired
+	}
+
+	constructor(props) {
+		super(props);
+
+		this.state = {
+			text: ''
+		};
+	}
+
+	submit = () => {
+		if (this.state.text.trim() === '') {
+			return;
+		}
+
+		this.props.onSubmit(this.state.text)
+			.then(() => {
+				this.setState({
+					text: ''
+				});
+			});
+	};
+
+	render() {
+		return (
+			<View style={styles.textBox}>
+				<TextInput
+					style={styles.textBoxInput}
+					value={this.state.text}
+					onChangeText={text => this.setState({ text })}
+					returnKeyType='send'
+					onSubmitEditing={this.submit}
+					blurOnSubmit={false}
+					autoFocus
+					placeholder='New message'
+				/>
+			</View>
+		);
+	}
+}

app/lib/meteor.js

@@ -12,11 +12,11 @@ const RocketChat = {
 
 	set currentServer(server) {
 		realm.write(() => {
-			realm.objects('servers').filtered('current = true').forEach(server => (server.current = false));
+			realm.objects('servers').filtered('current = true').forEach(item => (item.current = false));
 			realm.create('servers', { id: server, current: true }, true);
 		});
 	}
-}
+};
 
 export default RocketChat;
 
@@ -38,7 +38,7 @@ export function connect(cb) {
 					const setting = {
 						_id: item._id
 					};
-					setting._server = {id: RocketChat.currentServer};
+					setting._server = { id: RocketChat.currentServer };
 					if (typeof item.value === 'string') {
 						setting.value = item.value;
 					}
@@ -56,7 +56,7 @@ export function connect(cb) {
 					realm.write(() => {
 						const message = ddbMessage.fields.args[0];
 						message.temp = false;
-						message._server = {id: RocketChat.currentServer};
+						message._server = { id: RocketChat.currentServer };
 						realm.create('messages', message, true);
 					});
 				}, 1000);
@@ -83,7 +83,7 @@ export function loadSubscriptions(cb) {
 				// if (typeof item.value === 'string') {
 				// 	subscription.value = item.value;
 				// }
-				subscription._server = {id: RocketChat.currentServer};
+				subscription._server = { id: RocketChat.currentServer };
 				realm.create('subscriptions', subscription, true);
 			});
 		});
@@ -101,7 +101,7 @@ export function loadMessagesForRoom(rid) {
 		realm.write(() => {
 			data.messages.forEach((message) => {
 				message.temp = false;
-				message._server = {id: RocketChat.currentServer};
+				message._server = { id: RocketChat.currentServer };
 				realm.create('messages', message, true);
 			});
 		});
@@ -110,7 +110,7 @@ export function loadMessagesForRoom(rid) {
 	Meteor.subscribe('stream-room-messages', rid, false);
 }
 
-export function sendMessage(rid, msg, cb) {
+export function sendMessage(rid, msg) {
 	const _id = Random.id();
 	const user = Meteor.user();
 
@@ -122,7 +122,7 @@ export function sendMessage(rid, msg, cb) {
 			ts: new Date(),
 			_updatedAt: new Date(),
 			temp: true,
-			_server: {id: RocketChat.currentServer},
+			_server: { id: RocketChat.currentServer },
 			u: {
 				_id: user._id,
 				username: user.username
@@ -130,5 +130,12 @@ export function sendMessage(rid, msg, cb) {
 		}, true);
 	});
 
-	Meteor.call('sendMessage', { _id, rid, msg }, () => cb && cb());
+	return new Promise((resolve, reject) => {
+		Meteor.call('sendMessage', { _id, rid, msg }, (error, result) => {
+			if (error) {
+				return reject(error);
+			}
+			return resolve(result);
+		});
+	});
 }

app/views/login.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
+import { TextInput, StyleSheet } from 'react-native';
 import realm from '../lib/realm';
 import { loginWithPassword, loadSubscriptions, Accounts } from '../lib/meteor';
 
+import KeyboardView from '../components/KeyboardView';
+
 const styles = StyleSheet.create({
 	view: {
 		flex: 1,
@@ -55,7 +57,7 @@ export default class LoginView extends React.Component {
 
 	render() {
 		return (
-			<KeyboardAvoidingView style={styles.view} behavior={Platform.OS === 'ios' && 'padding'}>
+			<KeyboardView style={styles.view}>
 				<TextInput
 					style={styles.input}
 					onChangeText={username => this.setState({ username })}
@@ -77,7 +79,7 @@ export default class LoginView extends React.Component {
 					onSubmitEditing={this.submit}
 					placeholder='Password'
 				/>
-			</KeyboardAvoidingView>
+			</KeyboardView>
 		);
 	}
 }

app/views/room.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, KeyboardAvoidingView, TextInput, FlatList, StyleSheet, Platform } from 'react-native';
+import { View, FlatList, StyleSheet } from 'react-native';
 // import Markdown from 'react-native-simple-markdown';
 import realm from '../lib/realm';
 import RocketChat, { loadMessagesForRoom, sendMessage } from '../lib/meteor';
 
 import Message from '../components/Message';
+import MessageBox from '../components/MessageBox';
+import KeyboardView from '../components/KeyboardView';
 
 const styles = StyleSheet.create({
 	container: {
@@ -20,15 +22,6 @@ const styles = StyleSheet.create({
 		// width: "86%",
 		backgroundColor: '#CED0CE'
 		// marginLeft: "14%"
-	},
-	textBox: {
-		paddingTop: 1,
-		backgroundColor: '#ccc'
-	},
-	textBoxInput: {
-		height: 40,
-		backgroundColor: '#fff',
-		paddingLeft: 15
 	}
 });
 
@@ -47,7 +40,6 @@ export default class RoomView extends React.Component {
 		// this.rid = 'GENERAL';
 
 		this.state = {
-			text: '',
 			dataSource: this.getMessages()
 		};
 
@@ -71,19 +63,7 @@ export default class RoomView extends React.Component {
 		});
 	};
 
-	submit = () => {
+	sendMessage = message => sendMessage(this.rid, message);
-		console.log(this.state.text);
-		if (this.state.text.trim() === '') {
-			return;
-		}
-
-		sendMessage(this.rid, this.state.text);
-
-		this.setState({
-			...this.state,
-			text: ''
-		});
-	};
 
 	renderSeparator = () => (
 		<View style={styles.separator} />
@@ -99,7 +79,7 @@ export default class RoomView extends React.Component {
 
 	render() {
 		return (
-			<KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' && 'padding'} keyboardVerticalOffset={64}>
+			<KeyboardView style={styles.container} keyboardVerticalOffset={64}>
 				<FlatList
 					ref={ref => this.listView = ref}
 					style={styles.list}
@@ -109,18 +89,10 @@ export default class RoomView extends React.Component {
 					keyExtractor={item => item._id}
 					ItemSeparatorComponent={this.renderSeparator}
 				/>
-				<View style={styles.textBox}>
+				<MessageBox
-					<TextInput
+					onSubmit={this.sendMessage}
-						style={styles.textBoxInput}
+				/>
-						value={this.state.text}
+			</KeyboardView>
-						onChangeText={text => this.setState({ text })}
-						returnKeyType='send'
-						onSubmitEditing={this.submit}
-						autoFocus
-						placeholder='New message'
-					/>
-				</View>
-			</KeyboardAvoidingView>
 		);
 	}
 }

app/views/serverNew.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, StyleSheet, KeyboardAvoidingView, Platform } from 'react-native';
+import { TextInput, StyleSheet } from 'react-native';
 
 import realm from '../lib/realm';
 import { connect } from '../lib/meteor';
 
+import KeyboardView from '../components/KeyboardView';
+
 const styles = StyleSheet.create({
 	view: {
 		flex: 1,
@@ -72,7 +74,7 @@ export default class NewServerView extends React.Component {
 
 	render() {
 		return (
-			<KeyboardAvoidingView style={styles.view} behavior={Platform.OS === 'ios' && 'padding'}>
+			<KeyboardView style={styles.view}>
 				<TextInput
 					style={styles.input}
 					onChangeText={text => this.setState({ text })}
@@ -84,7 +86,7 @@ export default class NewServerView extends React.Component {
 					onSubmitEditing={this.submit}
 					placeholder={this.state.defaultServer}
 				/>
-			</KeyboardAvoidingView>
+			</KeyboardView>
 		);
 	}
 }

package.json

@@ -7,6 +7,7 @@
     "test": "jest",
     "lint": "eslint .",
     "ios": "react-native run-ios",
+    "log-android": "react-native log-android",
     "android": "react-native run-android"
   },
   "dependencies": {
@@ -14,7 +15,7 @@
     "react": "16.0.0-alpha.12",
     "react-native": "0.46.1",
     "react-native-meteor": "^1.1.0",
-    "react-native-zeroconf": "^0.7.1",
+    "react-native-zeroconf": "^0.8.1",
     "react-navigation": "^1.0.0-beta.11",
     "realm": "^1.10.1",
     "strip-ansi": "^4.0.0"