Better touch handling on rooms list (#462)

* Use react-native-gesture-handler at RoomItem * Fixed info message author * Edit message render improvement * Fix ws to http replace
RocketChat · Sep 26, 2018 · d6162d9 · d6162d9
1 parent c58df3b
commit d6162d9
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 4,048 deletions.
diff --git a/__tests__/__snapshots__/RoomItem.js.snap b/__tests__/__snapshots__/RoomItem.js.snap
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js
@@ -41,9 +41,9 @@ const SYSTEM_MESSAGES = [
 ];
 
 const getInfoMessage = ({
-	type, role, msg, user
+	type, role, msg, author
 }) => {
-	const { username } = user;
+	const { username } = author;
 	if (type === 'rm') {
 		return I18n.t('Message_removed');
 	} else if (type === 'uj') {

diff --git a/app/containers/message/index.js b/app/containers/message/index.js
@@ -14,10 +14,9 @@ import {
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
 	customEmojis: state.customEmojis,
-	editing: state.messages.editing,
 	Message_GroupingPeriod: state.settings.Message_GroupingPeriod,
 	Message_TimeFormat: state.settings.Message_TimeFormat,
-	message: state.messages.message,
+	editingMessage: state.messages.message,
 	useRealName: state.settings.UI_Use_Real_Name
 }), dispatch => ({
 	errorActionsShow: actionMessage => dispatch(errorActionsShowAction(actionMessage)),
@@ -43,10 +42,9 @@ export default class MessageContainer extends React.Component {
 		// redux
 		baseUrl: PropTypes.string,
 		customEmojis: PropTypes.object,
-		editing: PropTypes.bool,
 		Message_GroupingPeriod: PropTypes.number,
 		Message_TimeFormat: PropTypes.string,
-		message: PropTypes.object,
+		editingMessage: PropTypes.object,
 		useRealName: PropTypes.bool,
 		// methods - props
 		onLongPress: PropTypes.func,
@@ -73,7 +71,7 @@ export default class MessageContainer extends React.Component {
 	shouldComponentUpdate(nextProps, nextState) {
 		const { reactionsModal } = this.state;
 		const {
-			status, reactions, broadcast, editing, _updatedAt
+			status, reactions, broadcast, _updatedAt, editingMessage, item
 		} = this.props;
 
 		if (reactionsModal !== nextState.reactionsModal) {
@@ -92,8 +90,12 @@ export default class MessageContainer extends React.Component {
 		if (broadcast !== nextProps.broadcast) {
 			return true;
 		}
-		if (editing !== nextProps.editing) {
-			return true;
+		if (!equal(editingMessage, nextProps.editingMessage)) {
+			if (nextProps.editingMessage && nextProps.editingMessage._id === item._id) {
+				return true;
+			} else if (!nextProps.editingMessage._id !== item._id && editingMessage._id === item._id) {
+				return true;
+			}
 		}
 		return _updatedAt.toGMTString() !== nextProps._updatedAt.toGMTString();
 	}
@@ -163,12 +165,12 @@ export default class MessageContainer extends React.Component {
 	render() {
 		const { reactionsModal } = this.state;
 		const {
-			item, message, editing, user, style, archived, baseUrl, customEmojis, useRealName, broadcast
+			item, editingMessage, user, style, archived, baseUrl, customEmojis, useRealName, broadcast
 		} = this.props;
 		const {
 			msg, ts, attachments, urls, reactions, t, status, avatar, u, alias, editedBy, role
 		} = item;
-		const isEditing = message._id === item._id && editing;
+		const isEditing = editingMessage._id === item._id;
 		return (
 			<Message
 				msg={msg}

diff --git a/app/lib/methods/canOpenRoom.js b/app/lib/methods/canOpenRoom.js
@@ -13,7 +13,7 @@ const restTypes = {
 async function canOpenRoomREST({ type, rid }) {
 	try {
 		const { token, id } = this.ddp._login;
-		const server = this.ddp.url.replace('ws', 'http');
+		const server = this.ddp.url.replace(/^ws/, 'http');
 		await post({ token, id, server }, `${ restTypes[type] }.open`, { roomId: rid });
 		return true;
 	} catch (error) {

diff --git a/app/lib/methods/getRooms.js b/app/lib/methods/getRooms.js
@@ -17,7 +17,7 @@ const getRoomRest = async function() {
 	const { ddp } = this;
 	const updatedSince = lastMessage();
 	const { token, id } = ddp._login;
-	const server = this.ddp.url.replace('ws', 'http');
+	const server = this.ddp.url.replace(/^ws/, 'http');
 	const [subscriptions, rooms] = await Promise.all([get({ token, id, server }, 'subscriptions.get', { updatedSince }), get({ token, id, server }, 'rooms.get', { updatedSince })]);
 	return mergeSubscriptionsRooms(subscriptions, rooms);
 };

diff --git a/app/lib/methods/loadMessagesForRoom.js b/app/lib/methods/loadMessagesForRoom.js
@@ -12,7 +12,7 @@ const types = {
 
 async function loadMessagesForRoomRest({ rid: roomId, latest, t }) {
 	const { token, id } = this.ddp._login;
-	const server = this.ddp.url.replace('ws', 'http');
+	const server = this.ddp.url.replace(/^ws/, 'http');
 	const data = await get({ token, id, server }, `${ types[t] }.history`, { roomId, latest });
 	if (!data || data.status === 'error') {
 		return [];

diff --git a/app/lib/methods/loadMissedMessages.js b/app/lib/methods/loadMissedMessages.js
@@ -7,7 +7,7 @@ import log from '../../utils/log';
 
 async function loadMissedMessagesRest({ rid: roomId, lastOpen: lastUpdate }) {
 	const { token, id } = this.ddp._login;
-	const server = this.ddp.url.replace('ws', 'http');
+	const server = this.ddp.url.replace(/^ws/, 'http');
 	const { result } = await get({ token, id, server }, 'chat.syncMessages', { roomId, lastUpdate });
 	// TODO: api fix
 	if (!result) {

diff --git a/app/lib/methods/readMessages.js b/app/lib/methods/readMessages.js
@@ -4,7 +4,7 @@ import log from '../../utils/log';
 
 const	readMessagesREST = function readMessagesREST(rid) {
 	const { token, id } = this.ddp._login;
-	const server = this.ddp.url.replace('ws', 'http');
+	const server = this.ddp.url.replace(/^ws/, 'http');
 	return post({ token, id, server }, 'subscriptions.read', { rid });
 };
 

diff --git a/app/lib/methods/sendMessage.js b/app/lib/methods/sendMessage.js
@@ -33,7 +33,7 @@ export const getMessage = (rid, msg = {}) => {
 
 function sendMessageByRest(message) {
 	const { token, id } = this.ddp._login;
-	const server = this.ddp.url.replace('ws', 'http');
+	const server = this.ddp.url.replace(/^ws/, 'http');
 	const { _id, rid, msg } = message;
 	return post({ token, id, server }, 'chat.sendMessage', { message: { _id, rid, msg } });
 }

diff --git a/app/presentation/RoomItem.js b/app/presentation/RoomItem.js
@@ -6,6 +6,7 @@ import {
 } from 'react-native';
 import { connect } from 'react-redux';
 import { emojify } from 'react-emojione';
+import { RectButton } from 'react-native-gesture-handler';
 
 import Avatar from '../containers/Avatar';
 import Status from '../containers/status';
@@ -142,7 +143,6 @@ export default class RoomItem extends React.Component {
 		userMentions: PropTypes.number,
 		id: PropTypes.string,
 		onPress: PropTypes.func,
-		onLongPress: PropTypes.func,
 		username: PropTypes.string,
 		avatarSize: PropTypes.number,
 		testID: PropTypes.string,
@@ -229,7 +229,7 @@ export default class RoomItem extends React.Component {
 
 	render() {
 		const {
-			favorite, unread, userMentions, name, _updatedAt, alert, testID, height, onPress, onLongPress
+			favorite, unread, userMentions, name, _updatedAt, alert, testID, height, onPress
 		} = this.props;
 
 		const date = this.formatDate(_updatedAt);
@@ -250,16 +250,16 @@ export default class RoomItem extends React.Component {
 		}
 
 		return (
-			<Touch
+			<RectButton
 				onPress={onPress}
-				onLongPress={onLongPress}
-				underlayColor='#FFFFFF'
-				activeOpacity={0.5}
-				accessibilityLabel={accessibilityLabel}
-				accessibilityTraits='selected'
+				activeOpacity={0.8}
+				underlayColor='#e1e5e8'
 				testID={testID}
 			>
-				<View style={[styles.container, favorite && styles.favorite, height && { height }]}>
+				<View
+					style={[styles.container, favorite && styles.favorite, height && { height }]}
+					accessibilityLabel={accessibilityLabel}
+				>
 					{this.avatar}
 					<View style={styles.centerContainer}>
 						<View style={styles.titleContainer}>
@@ -276,7 +276,7 @@ export default class RoomItem extends React.Component {
 					</View>
 					{this.renderDisclosureIndicator()}
 				</View>
-			</Touch>
+			</RectButton>
 		);
 	}
 }
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
@@ -7,6 +7,7 @@ import Icon from 'react-native-vector-icons/Ionicons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import { connect, Provider } from 'react-redux';
 import { Navigation } from 'react-native-navigation';
+import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import { leaveRoom as leaveRoomAction } from '../../actions/room';
 import LoggedView from '../View';
@@ -74,7 +75,7 @@ export default class RoomActionsView extends LoggedView {
 		if (item.route) {
 			if (modules[item.route] == null) {
 				modules[item.route] = item.require();
-				Navigation.registerComponent(item.route, () => modules[item.route], store, Provider);
+				Navigation.registerComponent(item.route, () => gestureHandlerRootHOC(modules[item.route]), store, Provider);
 			}
 			navigator.push({
 				screen: item.route,