MM-15481 close post menu when replying to a message (#2797)

app/screens/channel/channel_post_list/channel_post_list.js

@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 
 import {getLastPostIndex} from 'mattermost-redux/utils/post_list';
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
 
 import AnnouncementBanner from 'app/components/announcement_banner';
 import PostList from 'app/components/post_list';
@@ -62,6 +63,10 @@ export default class ChannelPostList extends PureComponent {
         this.isLoadingMoreTop = false;
     }
 
+    componentDidMount() {
+        EventEmitter.on('goToThread', this.goToThread);
+    }
+
     componentWillReceiveProps(nextProps) {
         const {postIds: nextPostIds} = nextProps;
 
@@ -83,6 +88,10 @@ export default class ChannelPostList extends PureComponent {
         }
     }
 
+    componentWillUnmount() {
+        EventEmitter.off('goToThread', this.goToThread);
+    }
+
     getVisiblePostIds = (props) => {
         return props.postIds ? props.postIds.slice(0, props.postVisibility) : [];
     };

app/screens/post_options/index.js

@@ -11,7 +11,6 @@ import {
     unflagPost,
     unpinPost,
     removePost,
-    selectPost,
 } from 'mattermost-redux/actions/posts';
 import {General, Permissions} from 'mattermost-redux/constants';
 import {getChannel, getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
@@ -22,7 +21,6 @@ import {haveIChannelPermission} from 'mattermost-redux/selectors/entities/roles'
 import {getCurrentTeamId, getCurrentTeamUrl} from 'mattermost-redux/selectors/entities/teams';
 import {canEditPost} from 'mattermost-redux/utils/post_utils';
 
-import {loadThreadIfNecessary} from 'app/actions/views/channel';
 import {THREAD} from 'app/constants/screen';
 import {addReaction} from 'app/actions/views/emoji';
 import {getDimensions} from 'app/selectors/device';
@@ -127,8 +125,6 @@ function mapDispatchToProps(dispatch) {
             removePost,
             unflagPost,
             unpinPost,
-            selectPost,
-            loadThreadIfNecessary,
         }, dispatch),
     };
 }

app/screens/post_options/post_options.js

@@ -3,10 +3,12 @@
 
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {Alert, Clipboard, Platform, StyleSheet, View} from 'react-native';
+import {Alert, Clipboard, StyleSheet, View} from 'react-native';
 import {intlShape} from 'react-intl';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 
+import EventEmitter from 'mattermost-redux/utils/event_emitter';
+
 import SlideUpPanel from 'app/components/slide_up_panel';
 import {BOTTOM_MARGIN} from 'app/components/slide_up_panel/slide_up_panel';
 
@@ -23,8 +25,6 @@ export default class PostOptions extends PureComponent {
             removePost: PropTypes.func.isRequired,
             unflagPost: PropTypes.func.isRequired,
             unpinPost: PropTypes.func.isRequired,
-            selectPost: PropTypes.func.isRequired,
-            loadThreadIfNecessary: PropTypes.func.isRequired,
         }).isRequired,
         canAddReaction: PropTypes.bool,
         canReply: PropTypes.bool,
@@ -292,35 +292,12 @@ export default class PostOptions extends PureComponent {
     };
 
     handleReply = () => {
-        const {actions, post, navigator, theme} = this.props;
-        const rootId = (post.root_id || post.id);
-        const channelId = post.channel_id;
-
-        actions.loadThreadIfNecessary(rootId, channelId);
-        actions.selectPost(rootId);
-
-        const options = {
-            screen: 'Thread',
-            animated: true,
-            backButtonTitle: '',
-            navigatorStyle: {
-                navBarTextColor: theme.sidebarHeaderTextColor,
-                navBarBackgroundColor: theme.sidebarHeaderBg,
-                navBarButtonColor: theme.sidebarHeaderTextColor,
-                screenBackgroundColor: theme.centerChannelBg,
-            },
-            passProps: {
-                channelId,
-                rootId,
-            },
-        };
-
-        if (Platform.OS === 'android') {
-            navigator.showModal(options);
-        } else {
-            navigator.push(options);
-        }
-    }
+        const {post} = this.props;
+        this.closeWithAnimation();
+        setTimeout(() => {
+            EventEmitter.emit('goToThread', post);
+        }, 250);
+    };
 
     handleAddReactionToPost = (emoji) => {
         const {actions, post} = this.props;

app/screens/post_options/post_options.test.js

@@ -32,8 +32,6 @@ describe('PostOptions', () => {
         removePost: jest.fn(),
         unflagPost: jest.fn(),
         unpinPost: jest.fn(),
-        selectPost: jest.fn(),
-        loadThreadIfNecessary: jest.fn(),
     };
 
     const post = {
@@ -96,9 +94,12 @@ describe('PostOptions', () => {
 
     test('should load thread', () => {
         const wrapper = getWrapper();
+        const instance = wrapper.instance();
+
+        instance.closeWithAnimation = jest.fn();
 
         wrapper.findWhere((node) => node.key() === 'reply').simulate('press');
-        expect(actions.loadThreadIfNecessary).toBeCalled();
+        expect(instance.closeWithAnimation).toBeCalled();
     });
 
     test('should not show reply option', () => {