On message touch, do a narrow (zulip#333)

Implements zulip#306

src/message-list/MessageList.js

@@ -93,7 +93,7 @@ export default class MessageList extends React.PureComponent {
       if (elem.props.type === 'header') {
         headerIndices.push(idx);
       } else if (elem.props.type === 'message') {
-        const messageId = elem.props.id;
+        const messageId = elem.props.message.id;
         mapIdToIdx[messageId] = idx;
         anchorIndices.push(idx);
 

src/message-list/renderMessages.js

@@ -59,16 +59,11 @@ export default ({ auth, subscriptions, messages, narrow, mute, doNarrow }) => {
     list.push(
       <MessageContainer
         type="message"
-        id={item.id}
         key={item.id}
         auth={auth}
-        messageId={item.id}
+        message={item}
         isBrief={shouldGroupWithPrev}
-        fromName={item.sender_full_name}
-        fromEmail={item.sender_email}
-        message={item.content}
-        timestamp={item.timestamp}
-        reactions={item.reactions}
+        doNarrow={doNarrow}
         avatarUrl={getFullUrl(item.avatar_url, auth.realm)}
       />
     );

src/message/MessageBrief.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { Touchable } from '../common';
 import ReactionList from '../reactions/ReactionList';
 
 const styles = StyleSheet.create({
@@ -17,19 +18,24 @@ const styles = StyleSheet.create({
 export default class MessageBrief extends React.PureComponent {
 
   props: {
-    message: string,
+    message: {},
+    selfEmail: string,
     reactions: [],
   };
 
   render() {
-    const { messageId, children, reactions, selfEmail } = this.props;
+    const { message, children, selfEmail, onPress } = this.props;
 
     return (
       <View style={styles.message}>
-        {children}
+        <Touchable onPress={onPress}>
+          <View>
+            {children}
+          </View>
+        </Touchable>
         <ReactionList
-          messageId={messageId}
-          reactions={reactions}
+          messageId={message.id}
+          reactions={message.reactions}
           selfEmail={selfEmail}
         />
       </View>

src/message/MessageContainer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import htmlparser from 'htmlparser2';
 
 import renderHtmlChildren from './html/renderHtmlChildren';
+import { narrowFromMessage } from '../utils/narrow';
 import MessageFull from './MessageFull';
 import MessageBrief from './MessageBrief';
 
@@ -16,22 +17,25 @@ const htmlToDomTree = html => {
 };
 
 export default class MessageContainer extends React.PureComponent {
+
+  handlePress = () => {
+    const { message, doNarrow } = this.props;
+    doNarrow(narrowFromMessage(message), message.id);
+  }
+
   render() {
-    const { auth, avatarUrl, timestamp, twentyFourHourTime, messageId,
-      fromName, message, fromEmail, isBrief, reactions } = this.props;
+    const { message, auth, avatarUrl, twentyFourHourTime, isBrief, doNarrow } = this.props;
     const MessageComponent = isBrief ? MessageBrief : MessageFull;
-    const dom = htmlToDomTree(message);
+    const dom = htmlToDomTree(message.content);
 
     return (
       <MessageComponent
-        messageId={messageId}
+        message={message}
         avatarUrl={avatarUrl}
-        fromName={fromName}
-        fromEmail={fromEmail}
-        timestamp={timestamp}
         twentyFourHourTime={twentyFourHourTime}
-        reactions={reactions}
         selfEmail={auth.email}
+        doNarrow={doNarrow}
+        onPress={this.handlePress}
       >
         {renderHtmlChildren({ childrenNodes: dom, auth })}
       </MessageComponent>

src/message/MessageFull.js

@@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
 
 import boundActions from '../boundActions';
-import { Avatar } from '../common';
+import { Avatar, Touchable } from '../common';
 import Subheader from './Subheader';
 import ReactionList from '../reactions/ReactionList';
 
@@ -24,37 +24,39 @@ class MessageFull extends React.PureComponent {
 
   props: {
     avatarUrl: string,
-    fromName: string,
-    fromEmail: string,
+    selfEmail: string,
     timestamp: number,
     reactions: [],
     twentyFourHourTime: bool,
   };
 
   handleAvatarPress = () =>
-    this.props.pushRoute('account-details', this.props.fromEmail);
+    this.props.pushRoute('account-details', this.props.message.sender_email);
 
   render() {
-    const { messageId, children, avatarUrl, timestamp, twentyFourHourTime,
-      fromName, reactions, selfEmail } = this.props;
+    const { message, children, avatarUrl, twentyFourHourTime, selfEmail, onPress } = this.props;
 
     return (
       <View style={styles.message}>
         <Avatar
           avatarUrl={avatarUrl}
-          name={fromName}
+          name={message.sender_full_name}
           onPress={this.handleAvatarPress}
         />
         <View style={styles.content}>
           <Subheader
-            from={fromName}
-            timestamp={timestamp}
+            from={message.sender_full_name}
+            timestamp={message.timestamp}
             twentyFourHourTime={twentyFourHourTime}
           />
-          {children}
+          <Touchable onPress={onPress}>
+            <View>
+              {children}
+            </View>
+          </Touchable>
           <ReactionList
-            messageId={messageId}
-            reactions={reactions}
+            messageId={message.id}
+            reactions={message.reactions}
             selfEmail={selfEmail}
           />
         </View>

src/utils/__tests__/narrow-test.js

@@ -7,6 +7,7 @@ import {
   topicNarrow, isTopicNarrow,
   searchNarrow, isSearchNarrow,
   isMessageInNarrow,
+  narrowFromMessage,
 } from '../narrow';
 
 describe('homeNarrow', () => {
@@ -208,3 +209,53 @@ describe('isMessageInNarrow', () => {
     expect(isMessageInNarrow(message, narrow)).toBe(true);
   });
 });
+
+describe('narrowFromMessage', () => {
+  test('message with single recipient, returns a private narrow', () => {
+    const message = {
+      display_recipient: [{ email: '[email protected]' }],
+    };
+    const expectedNarrow = privateNarrow('[email protected]');
+
+    const actualNarrow = narrowFromMessage(message);
+
+    expect(actualNarrow).toEqual(expectedNarrow);
+  });
+
+  test('for message with multiple recipients, return a group narrow', () => {
+    const message = {
+      display_recipient: [
+        { email: '[email protected]' },
+        { email: '[email protected]' },
+      ],
+    };
+    const expectedNarrow = groupNarrow(['[email protected]', '[email protected]']);
+
+    const actualNarrow = narrowFromMessage(message);
+
+    expect(actualNarrow).toEqual(expectedNarrow);
+  });
+
+  test('if recipient of a message is string, returns a stream narrow', () => {
+    const message = {
+      display_recipient: 'stream',
+    };
+    const expectedNarrow = streamNarrow('stream');
+
+    const actualNarrow = narrowFromMessage(message);
+
+    expect(actualNarrow).toEqual(expectedNarrow);
+  });
+
+  test('if recipient is a string and there is a subject returns a topic narrow', () => {
+    const message = {
+      display_recipient: 'stream',
+      subject: 'subject'
+    };
+    const expectedNarrow = topicNarrow('stream', 'subject');
+
+    const actualNarrow = narrowFromMessage(message);
+
+    expect(actualNarrow).toEqual(expectedNarrow);
+  });
+});

src/utils/narrow.js

@@ -108,3 +108,15 @@ export const canSendToNarrow = (narrow) =>
   isGroupNarrow(narrow) ||
   isStreamNarrow(narrow) ||
   isTopicNarrow(narrow);
+
+export const narrowFromMessage = (message) => {
+  if (Array.isArray(message.display_recipient)) {
+    return groupNarrow(message.display_recipient.map(x => x.email));
+  }
+
+  if (message.subject && message.subject.length) {
+    return topicNarrow(message.display_recipient, message.subject);
+  }
+
+  return streamNarrow(message.display_recipient);
+};