typing stop on send message, better typing component and new subscription updateAt logic (#99)

app/containers/MessageBox.js

@@ -50,7 +50,7 @@ export default class MessageBox extends React.Component {
 		editRequest: PropTypes.func.isRequired,
 		message: PropTypes.object,
 		editing: PropTypes.bool,
-		typing: PropTypes.bool
+		typing: PropTypes.func
 	}
 
 	componentWillReceiveProps(nextProps) {
@@ -61,12 +61,13 @@ export default class MessageBox extends React.Component {
 	}
 
 	submit(message) {
-		const { editing } = this.props;
+		this.component.setNativeProps({ text: '' });
+		this.props.typing(false);
 		if (message.trim() === '') {
 			return;
 		}
-
 		// if is editing a message
+		const { editing } = this.props;
 		if (editing) {
 			const { _id, rid } = this.props.message;
 			this.props.editRequest({ _id, msg: message, rid });
@@ -74,7 +75,6 @@ export default class MessageBox extends React.Component {
 			// if is submiting a new message
 			this.props.onSubmit(message);
 		}
-		this.component.setNativeProps({ text: '' });
 	}
 
 	addFile = () => {

app/containers/Typing.js

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import PropTypes from 'prop-types';
+import { StyleSheet, Text } from 'react-native';
+import { connect } from 'react-redux';
+
+const styles = StyleSheet.create({
+	typing: {
+
+		transform: [{ scaleY: -1 }],
+		fontWeight: 'bold',
+		paddingHorizontal: 15,
+		height: 25
+	}
+});
+
+@connect(state => ({
+	username: state.login.user && state.login.user.username,
+	usersTyping: state.room.usersTyping
+}))
+
+export default class Typing extends React.PureComponent {
+	get usersTyping() {
+		const users = this.props.usersTyping.filter(_username => this.props.username !== _username);
+		return users.length ? `${ users.join(' ,') } ${ users.length > 1 ? 'are' : 'is' } typing` : '';
+	}
+	render() {
+		return (<Text style={styles.typing}>{this.usersTyping}</Text>);
+	}
+}
+
+
+Typing.propTypes = {
+	username: PropTypes.string,
+	usersTyping: PropTypes.array
+};

app/lib/realm.js

@@ -55,7 +55,7 @@ const subscriptionSchema = {
 		userMentions: { type: 'int', optional: true },
 		// userMentions: 0,
 		// groupMentions: 0,
-		_updatedAt: { type: 'date', optional: true }
+		roomUpdatedAt: { type: 'date', optional: true }
 	}
 };
 

app/lib/rocketchat.js

@@ -85,26 +85,14 @@ const RocketChat = {
 						const [type, data] = ddpMessage.fields.args;
 						const [, ev] = ddpMessage.fields.eventName.split('/');
 						if (/subscriptions/.test(ev)) {
-							switch (type) {
-								case 'inserted':
-									data._server = server;
-									realm.write(() => {
-										realm.create('subscriptions', data, true);
-									});
-									break;
-								case 'updated':
-									delete data._updatedAt;
-									realm.write(() => {
-										realm.create('subscriptions', data, true);
-									});
-									break;
-								default:
-							}
+							realm.write(() => {
+								realm.create('subscriptions', data, true);
+							});
 						}
 						if (/rooms/.test(ev) && type === 'updated') {
 							const sub = realm.objects('subscriptions').filtered('rid == $0', data._id)[0];
 							realm.write(() => {
-								sub._updatedAt = data._updatedAt;
+								sub.roomUpdatedAt = data._updatedAt;
 							});
 						}
 					}
@@ -203,6 +191,7 @@ const RocketChat = {
 	},
 
 	loadSubscriptions(cb) {
+		const { server } = reduxStore.getState().server;
 		Meteor.call('subscriptions/get', (err, data) => {
 			if (err) {
 				console.error(err);
@@ -216,7 +205,7 @@ const RocketChat = {
 						// if (typeof item.value === 'string') {
 						// 	subscription.value = item.value;
 						// }
-						subscription._server = { id: reduxStore.getState().server.server };
+						subscription._server = { id: server };
 						// write('subscriptions', subscription);
 						realm.create('subscriptions', subscription, true);
 					});
@@ -382,24 +371,23 @@ const RocketChat = {
 		let lastMessage = realm
 			.objects('subscriptions')
 			.filtered('_server.id = $0', server.server)
-			.sorted('_updatedAt', true)[0];
-		lastMessage = lastMessage && new Date(lastMessage._updatedAt);
+			.sorted('roomUpdatedAt', true)[0];
+		lastMessage = lastMessage && new Date(lastMessage.roomUpdatedAt);
 		let [subscriptions, rooms] = await Promise.all([call('subscriptions/get', lastMessage), call('rooms/get', lastMessage)]);
 
 		if (lastMessage) {
 			subscriptions = subscriptions.update;
 			rooms = rooms.update;
 		}
+
 		const data = subscriptions.map((subscription) => {
 			const room = rooms.find(({ _id }) => _id === subscription.rid);
-			delete subscription._updatedAt;
 			if (room) {
-				subscription._updatedAt = room._updatedAt;
+				subscription.roomUpdatedAt = room._updatedAt;
 			}
 			subscription._server = { id: server.server };
 			return subscription;
 		});
-
 		realm.write(() => {
 			data.forEach(subscription =>
 				realm.create('subscriptions', subscription, true));

app/sagas/rooms.js

@@ -23,7 +23,7 @@ const cancelTyping = function* cancelTyping(username) {
 	while (true) {
 		const { typing, timeout } = yield race({
 			typing: take(types.ROOM.SOMEONE_TYPING),
-			timeout: yield call(delay, 5000)
+			timeout: call(delay, 5000)
 		});
 		if (timeout || (typing.username === username && !typing.typing)) {
 			return yield put(removeUserTyping(username));
@@ -37,7 +37,7 @@ const usersTyping = function* usersTyping({ rid }) {
 		if (_rid === rid) {
 			yield (typing ? put(addUserTyping(username)) : put(removeUserTyping(username)));
 			if (typing) {
-				fork(cancelTyping, username);
+				yield fork(cancelTyping, username);
 			}
 		}
 	}

app/views/RoomView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, StyleSheet, Button, SafeAreaView, Dimensions } from 'react-native';
+import { Text, View, StyleSheet, Button, SafeAreaView } from 'react-native';
 import { ListView } from 'realm/react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -11,6 +11,7 @@ import realm from '../lib/realm';
 import RocketChat from '../lib/rocketchat';
 import Message from '../containers/message';
 import MessageBox from '../containers/MessageBox';
+import Typing from '../containers/Typing';
 import KeyboardView from '../presentation/KeyboardView';
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1._id !== r2._id });
@@ -46,11 +47,9 @@ const styles = StyleSheet.create({
 		color: '#ccc'
 	}
 });
-
+const typing = () => <Typing />;
 @connect(
 	state => ({
-		username: state.login.user.username,
-		usersTyping: state.room.usersTyping,
 		server: state.server.server,
 		Site_Url: state.settings.Site_Url,
 		Message_TimeFormat: state.settings.Message_TimeFormat,
@@ -66,14 +65,12 @@ export default class RoomView extends React.Component {
 		navigation: PropTypes.object.isRequired,
 		openRoom: PropTypes.func.isRequired,
 		rid: PropTypes.string,
+		server: PropTypes.string,
 		sid: PropTypes.string,
 		name: PropTypes.string,
-		server: PropTypes.string,
 		Site_Url: PropTypes.string,
 		Message_TimeFormat: PropTypes.string,
-		loading: PropTypes.bool,
-		usersTyping: PropTypes.array,
-		username: PropTypes.string
+		loading: PropTypes.bool
 	};
 
 	constructor(props) {
@@ -141,11 +138,6 @@ export default class RoomView extends React.Component {
 		}
 	}
 
-	get usersTyping() {
-		const users = this.props.usersTyping.filter(_username => this.props.username !== _username);
-		return users.length ? `${ users.join(' ,') } ${ users.length > 1 ? 'are' : 'is' } typing` : null;
-	}
-
 	updateState = () => {
 		this.setState({
 			dataSource: ds.cloneWithRows(this.data)
@@ -201,7 +193,6 @@ export default class RoomView extends React.Component {
 		}
 	}
 	render() {
-		const { height } = Dimensions.get('window');
 		return (
 			<KeyboardView contentContainerStyle={styles.container} keyboardVerticalOffset={64}>
 				{this.renderBanner()}
@@ -209,8 +200,9 @@ export default class RoomView extends React.Component {
 					<ListView
 						enableEmptySections
 						style={styles.list}
-						onEndReachedThreshold={height / 2}
+						onEndReachedThreshold={0.5}
 						renderFooter={this.renderHeader}
+						renderHeader={typing}
 						onEndReached={this.onEndReached}
 						dataSource={this.state.dataSource}
 						renderRow={item => this.renderItem({ item })}
@@ -218,7 +210,6 @@ export default class RoomView extends React.Component {
 					/>
 				</SafeAreaView>
 				{this.renderFooter()}
-				<Text style={styles.typing}>{this.usersTyping}</Text>
 			</KeyboardView>
 		);
 	}

app/views/RoomsListView.js

@@ -103,7 +103,7 @@ export default class RoomsListView extends React.Component {
 			dataSource: ds.cloneWithRows([]),
 			searchText: ''
 		};
-		this.data = realm.objects('subscriptions').filtered('_server.id = $0', this.props.server).sorted('_updatedAt', true);
+		this.data = realm.objects('subscriptions').filtered('_server.id = $0', this.props.server).sorted('roomUpdatedAt', true);
 	}
 
 	componentDidMount() {
@@ -119,7 +119,7 @@ export default class RoomsListView extends React.Component {
 	componentWillReceiveProps(props) {
 		if (this.props.server !== props.server) {
 			this.data.removeListener(this.updateState);
-			this.data = realm.objects('subscriptions').filtered('_server.id = $0', props.server).sorted('_updatedAt', true);
+			this.data = realm.objects('subscriptions').filtered('_server.id = $0', props.server).sorted('roomUpdatedAt', true);
 			this.data.addListener(this.updateState);
 		}
 	}