Add reply to post handler below the profile image (#1493)

* Add reply to post handler below the profile image

* Hide tooltip when post is tapped and tooltip is shown

app/components/post/post.js

@@ -7,10 +7,11 @@ import {
     Alert,
     Clipboard,
     Platform,
+    TouchableHighlight,
     View,
     ViewPropTypes,
 } from 'react-native';
-import {injectIntl, intlShape} from 'react-intl';
+import {intlShape} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
 import PostBody from 'app/components/post_body';
@@ -30,7 +31,7 @@ import {isAdmin, isSystemAdmin} from 'mattermost-redux/utils/user_utils';
 
 import Config from 'assets/config';
 
-class Post extends PureComponent {
+export default class Post extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
             addReaction: PropTypes.func.isRequired,
@@ -44,7 +45,6 @@ class Post extends PureComponent {
         currentUserId: PropTypes.string.isRequired,
         deviceWidth: PropTypes.number.isRequired,
         highlight: PropTypes.bool,
-        intl: intlShape.isRequired,
         style: ViewPropTypes.style,
         post: PropTypes.object,
         postId: PropTypes.string.isRequired, // Used by container // eslint-disable-line no-unused-prop-types
@@ -70,6 +70,10 @@ class Post extends PureComponent {
         isSearchResult: false,
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     constructor(props) {
         super(props);
 
@@ -108,7 +112,8 @@ class Post extends PureComponent {
     }
 
     goToUserProfile = () => {
-        const {intl, navigator, post, theme} = this.props;
+        const {intl} = this.context;
+        const {navigator, post, theme} = this.props;
         const options = {
             screen: 'UserProfile',
             title: intl.formatMessage({id: 'mobile.routes.user_profile', defaultMessage: 'Profile'}),
@@ -143,7 +148,7 @@ class Post extends PureComponent {
     };
 
     handlePostDelete = () => {
-        const {formatMessage} = this.props.intl;
+        const {formatMessage} = this.context.intl;
         const {actions, currentUserId, post} = this.props;
 
         Alert.alert(
@@ -167,7 +172,8 @@ class Post extends PureComponent {
     };
 
     handlePostEdit = () => {
-        const {intl, navigator, post, theme} = this.props;
+        const {intl} = this.context;
+        const {navigator, post, theme} = this.props;
         MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => {
             navigator.showModal({
                 screen: 'EditPost',
@@ -193,7 +199,8 @@ class Post extends PureComponent {
     }
 
     handleAddReaction = preventDoubleTap(() => {
-        const {intl, navigator, post, theme} = this.props;
+        const {intl} = this.context;
+        const {navigator, post, theme} = this.props;
 
         MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).
             then((source) => {
@@ -278,6 +285,9 @@ class Post extends PureComponent {
             } else if (isPostEphemeral(post) || post.state === Posts.POST_DELETED) {
                 this.onRemovePost(post);
             }
+        } else if (this.refs.postBody) {
+            this.refs.postBody.getWrappedInstance().hideOptionsContext();
+            this.handleHideUnderlay();
         }
     });
 
@@ -352,7 +362,21 @@ class Post extends PureComponent {
         const permalink = `${currentTeamUrl}/pl/${postId}`;
 
         Clipboard.setString(permalink);
-    }
+    };
+
+    handleHideUnderlay = () => {
+        this.toggleSelected(false);
+    };
+
+    handleShowUnderlay = () => {
+        this.toggleSelected(true);
+    };
+
+    showOptionsContext = () => {
+        if (this.refs.postBody) {
+            this.refs.postBody.getWrappedInstance().showOptionsContext();
+        }
+    };
 
     render() {
         const {
@@ -386,12 +410,19 @@ class Post extends PureComponent {
 
         return (
             <View style={[style.container, this.props.style, highlighted, selected]}>
-                <View style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}>
+                <TouchableHighlight
+                    style={[style.profilePictureContainer, (isPostPendingOrFailed(post) && style.pendingPost)]}
+                    onPress={this.handlePress}
+                    onHideUnderlay={this.handleHideUnderlay}
+                    onShowUnderlay={this.handleShowUnderlay}
+                    onLongPress={this.showOptionsContext}
+                    underlayColor='transparent'
+                >
                     <PostProfilePicture
                         onViewUserProfile={this.viewUserProfile}
                         postId={post.id}
                     />
-                </View>
+                </TouchableHighlight>
                 <View style={style.messageContainerWithReplyBar}>
                     {!commentedOnPost && this.renderReplyBar()}
                     <View style={[style.rightColumn, (commentedOnPost && isLastReply && style.rightColumnPadding)]}>
@@ -410,6 +441,7 @@ class Post extends PureComponent {
                         />
                         <View style={{maxWidth: postWidth}}>
                             <PostBody
+                                ref={'postBody'}
                                 canDelete={this.state.canDelete}
                                 canEdit={this.state.canEdit}
                                 isSearchResult={isSearchResult}
@@ -485,5 +517,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
     };
 });
-
-export default injectIntl(Post);

app/components/post_body/index.js

@@ -50,4 +50,4 @@ function mapDispatchToProps(dispatch) {
     };
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(PostBody);
+export default connect(mapStateToProps, mapDispatchToProps, null, {withRef: true})(PostBody);

app/components/post_body/post_body.js

@@ -9,7 +9,7 @@ import {
     TouchableOpacity,
     View,
 } from 'react-native';
-import {injectIntl, intlShape} from 'react-intl';
+import {intlShape} from 'react-intl';
 import Icon from 'react-native-vector-icons/Ionicons';
 
 import FileAttachmentList from 'app/components/file_attachment_list';
@@ -24,7 +24,7 @@ import {getMarkdownTextStyles, getMarkdownBlockStyles} from 'app/utils/markdown'
 import {makeStyleSheetFromTheme} from 'app/utils/theme';
 import Reactions from 'app/components/reactions';
 
-class PostBody extends PureComponent {
+export default class PostBody extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
             flagPost: PropTypes.func.isRequired,
@@ -36,7 +36,6 @@ class PostBody extends PureComponent {
         hasBeenDeleted: PropTypes.bool,
         hasBeenEdited: PropTypes.bool,
         hasReactions: PropTypes.bool,
-        intl: intlShape.isRequired,
         isFailed: PropTypes.bool,
         isFlagged: PropTypes.bool,
         isPending: PropTypes.bool,
@@ -75,6 +74,10 @@ class PostBody extends PureComponent {
         toggleSelected: emptyFunction,
     };
 
+    static contextTypes = {
+        intl: intlShape.isRequired,
+    };
+
     handleHideUnderlay = () => {
         this.props.toggleSelected(false);
     };
@@ -134,6 +137,7 @@ class PostBody extends PureComponent {
     }
 
     render() { // eslint-disable-line complexity
+        const {formatMessage} = this.context.intl;
         const {
             canDelete,
             canEdit,
@@ -147,7 +151,6 @@ class PostBody extends PureComponent {
             isReplyPost,
             isSearchResult,
             isSystemMessage,
-            intl,
             managedConfig,
             message,
             navigator,
@@ -162,7 +165,6 @@ class PostBody extends PureComponent {
             theme,
             toggleSelected,
         } = this.props;
-        const {formatMessage} = intl;
         const actions = [];
         const style = getStyleSheet(theme);
         const blockStyles = getMarkdownBlockStyles(theme);
@@ -329,5 +331,3 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
     };
 });
-
-export default injectIntl(PostBody);