From 1cda98f41501897054358f5fbbc4d6a0acd374ea Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Fri, 24 Nov 2017 15:21:21 -0200 Subject: [PATCH] typing stop on send message, better typing component and new subscription updateAt logic (#99) --- app/containers/MessageBox.js | 8 ++++---- app/containers/Typing.js | 36 ++++++++++++++++++++++++++++++++++++ app/lib/realm.js | 2 +- app/lib/rocketchat.js | 32 ++++++++++---------------------- app/sagas/rooms.js | 4 ++-- app/views/RoomView.js | 23 +++++++---------------- app/views/RoomsListView.js | 4 ++-- 7 files changed, 62 insertions(+), 47 deletions(-) create mode 100644 app/containers/Typing.js diff --git a/app/containers/MessageBox.js b/app/containers/MessageBox.js index 65740a51..8a9d1c45 100644 --- a/app/containers/MessageBox.js +++ b/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 = () => { diff --git a/app/containers/Typing.js b/app/containers/Typing.js new file mode 100644 index 00000000..e618bde2 --- /dev/null +++ b/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 ({this.usersTyping}); + } +} + + +Typing.propTypes = { + username: PropTypes.string, + usersTyping: PropTypes.array +}; diff --git a/app/lib/realm.js b/app/lib/realm.js index 72b3b0d8..73243c0b 100644 --- a/app/lib/realm.js +++ b/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 } } }; diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js index b58f4984..58fa1163 100644 --- a/app/lib/rocketchat.js +++ b/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)); diff --git a/app/sagas/rooms.js b/app/sagas/rooms.js index 4a4f88ef..0610babe 100644 --- a/app/sagas/rooms.js +++ b/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); } } } diff --git a/app/views/RoomView.js b/app/views/RoomView.js index 8faf1124..a8d9a582 100644 --- a/app/views/RoomView.js +++ b/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 = () => ; @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 ( {this.renderBanner()} @@ -209,8 +200,9 @@ export default class RoomView extends React.Component { this.renderItem({ item })} @@ -218,7 +210,6 @@ export default class RoomView extends React.Component { /> {this.renderFooter()} - {this.usersTyping} ); } diff --git a/app/views/RoomsListView.js b/app/views/RoomsListView.js index aa4f3429..b6ffcfe1 100644 --- a/app/views/RoomsListView.js +++ b/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); } }