[MM-16137] Update post related screens (#2916)

* Update screens

* Update login tests

* Remove done

* Fix failing tests

* Update screens and components

* Check styles fix

* Update tests

* Prevent setState call after component unmounts

* Add empty setButtons func to dummy navigator

* Remove platform check

* Remove Platform import

* Update react-native-navigation version

* Add separate showModalOverCurrentContext function

* check-style fixes

* Remove overriding of AppDelegate's window

* Fix modal over current context animation

* Add showSearchModal navigation action

* Check-style fix

* Address review comments

* Update SettingsSidebar and children

* Update EditProfile screen

* Update SettingsSidebar

* Keep track of latest componentId to appear

* Track componentId in state to use in navigation actions

* Update FlaggedPosts and children

* Update RecentMentions

* Update Settings

* Store componentIds in ephemeral store

* Update AttachmentButton

* Remove unnecessary dismissModal

* Fix typo

* Upate NotificationSettings

* Update NotificationSettingsAutoResponder

* Update NotificationSettingsMentions

* Update NotificationSettingsMobile

* Update CreateChannel and children

* Update MoreChannels

* Update ChannelPeek and children

* Update ChannelNavBar and children

* Update ChannelPostList and children

* Update ChannelInfo and children

* Update ChannelAddMembers

* Update ChannelMembers

* Update EditChannel

* Fix setting of top bar buttons

* Update Channel screen and children

* Update PinnedPosts

* Update LongPost

* Update PostOptions

* Update PostTextboxBase

* Update EditPost

* Check-styles fix

* Remove navigationComponentId

app/components/post_textbox/post_textbox_base.js

@@ -62,7 +62,6 @@ export default class PostTextBoxBase extends PureComponent {
         files: PropTypes.array,
         maxFileSize: PropTypes.number.isRequired,
         maxMessageLength: PropTypes.number.isRequired,
-        navigator: PropTypes.object,
         rootId: PropTypes.string,
         theme: PropTypes.object.isRequired,
         uploadFileRequestStatus: PropTypes.string.isRequired,
@@ -182,7 +181,7 @@ export default class PostTextBoxBase extends PureComponent {
     };
 
     getAttachmentButton = () => {
-        const {canUploadFiles, channelIsReadOnly, files, maxFileSize, navigator, theme} = this.props;
+        const {canUploadFiles, channelIsReadOnly, files, maxFileSize, theme} = this.props;
         let attachmentButton = null;
 
         if (canUploadFiles && !channelIsReadOnly) {
@@ -190,7 +189,6 @@ export default class PostTextBoxBase extends PureComponent {
                 <AttachmentButton
                     blurTextBox={this.blur}
                     theme={theme}
-                    navigator={navigator}
                     fileCount={files.length}
                     maxFileSize={maxFileSize}
                     maxFileCount={MAX_FILE_COUNT}

app/screens/edit_post/edit_post.js

@@ -22,13 +22,14 @@ export default class EditPost extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
             editPost: PropTypes.func.isRequired,
+            setButtons: PropTypes.func.isRequired,
+            dismissModal: PropTypes.func.isRequired,
         }),
         componentId: PropTypes.string,
         closeButton: PropTypes.object,
         deviceHeight: PropTypes.number,
         deviceWidth: PropTypes.number,
         editPostRequest: PropTypes.object.isRequired,
-        navigator: PropTypes.object,
         post: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired,
     };
@@ -50,9 +51,9 @@ export default class EditPost extends PureComponent {
         super(props);
 
         this.state = {message: props.post.message};
-        this.rightButton.title = context.intl.formatMessage({id: 'edit_post.save', defaultMessage: 'Save'});
+        this.rightButton.text = context.intl.formatMessage({id: 'edit_post.save', defaultMessage: 'Save'});
 
-        props.navigator.setButtons({
+        props.actions.setButtons(props.componentId, {
             leftButtons: [{...this.leftButton, icon: props.closeButton}],
             rightButtons: [this.rightButton],
         });
@@ -102,22 +103,22 @@ export default class EditPost extends PureComponent {
     }
 
     close = () => {
-        this.props.navigator.dismissModal({
-            animationType: 'slide-down',
-        });
+        this.props.actions.dismissModal();
     };
 
     emitCanEditPost = (enabled) => {
-        this.props.navigator.setButtons({
+        const {actions, componentId} = this.props;
+        actions.setButtons(componentId, {
             leftButtons: [{...this.leftButton, icon: this.props.closeButton}],
-            rightButtons: [{...this.rightButton, disabled: !enabled}],
+            rightButtons: [{...this.rightButton, enabled}],
         });
     };
 
     emitEditing = (loading) => {
-        this.props.navigator.setButtons({
+        const {actions, componentId} = this.props;
+        actions.setButtons(componentId, {
             leftButtons: [{...this.leftButton, icon: this.props.closeButton}],
-            rightButtons: [{...this.rightButton, disabled: loading}],
+            rightButtons: [{...this.rightButton, enabled: !loading}],
         });
     };
 

app/screens/edit_post/index.js

@@ -7,6 +7,8 @@ import {connect} from 'react-redux';
 import {editPost} from 'mattermost-redux/actions/posts';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import {setButtons, dismissModal} from 'app/actions/navigation';
+
 import {getDimensions} from 'app/selectors/device';
 
 import EditPost from './edit_post';
@@ -26,6 +28,8 @@ function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
             editPost,
+            setButtons,
+            dismissModal,
         }, dispatch),
     };
 }

app/screens/long_post/index.js

@@ -9,6 +9,7 @@ import {makeGetChannel} from 'mattermost-redux/selectors/entities/channels';
 import {getPost} from 'mattermost-redux/selectors/entities/posts';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import {dismissModal, goToScreen} from 'app/actions/navigation';
 import {loadThreadIfNecessary} from 'app/actions/views/channel';
 
 import LongPost from './long_post';
@@ -35,6 +36,8 @@ function mapDispatchToProps(dispatch) {
         actions: bindActionCreators({
             loadThreadIfNecessary,
             selectPost,
+            dismissModal,
+            goToScreen,
         }, dispatch),
     };
 }

app/screens/long_post/long_post.js

@@ -44,6 +44,8 @@ export default class LongPost extends PureComponent {
         actions: PropTypes.shape({
             loadThreadIfNecessary: PropTypes.func.isRequired,
             selectPost: PropTypes.func.isRequired,
+            dismissModal: PropTypes.func.isRequired,
+            goToScreen: PropTypes.func.isRequired,
         }).isRequired,
         channelName: PropTypes.string,
         fileIds: PropTypes.array,
@@ -51,7 +53,6 @@ export default class LongPost extends PureComponent {
         isPermalink: PropTypes.bool,
         inThreadView: PropTypes.bool,
         managedConfig: PropTypes.object,
-        navigator: PropTypes.object,
         onHashtagPress: PropTypes.func,
         onPermalinkPress: PropTypes.func,
         postId: PropTypes.string.isRequired,
@@ -77,37 +78,27 @@ export default class LongPost extends PureComponent {
     }
 
     goToThread = preventDoubleTap((post) => {
-        const {actions, navigator, theme} = this.props;
+        const {actions} = this.props;
         const channelId = post.channel_id;
         const rootId = (post.root_id || post.id);
+        const screen = 'Thread';
+        const title = '';
+        const passProps = {
+            channelId,
+            rootId,
+        };
 
         actions.loadThreadIfNecessary(rootId);
         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,
-            },
-        };
-
-        navigator.push(options);
+        actions.goToScreen(screen, title, passProps);
     });
 
     handleClose = () => {
-        const {navigator} = this.props;
+        const {actions} = this.props;
         if (this.refs.view) {
             this.refs.view.zoomOut().then(() => {
-                navigator.dismissModal({animationType: 'none'});
+                actions.dismissModal();
             });
         }
     };
@@ -125,7 +116,6 @@ export default class LongPost extends PureComponent {
     renderFileAttachments(style) {
         const {
             fileIds,
-            navigator,
             postId,
         } = this.props;
 
@@ -139,7 +129,6 @@ export default class LongPost extends PureComponent {
                         onLongPress={emptyFunction}
                         postId={postId}
                         toggleSelected={emptyFunction}
-                        navigator={navigator}
                     />
                 </View>
             );
@@ -148,7 +137,7 @@ export default class LongPost extends PureComponent {
     }
 
     renderReactions = (style) => {
-        const {hasReactions, navigator, postId} = this.props;
+        const {hasReactions, postId} = this.props;
 
         if (!hasReactions) {
             return null;
@@ -157,7 +146,6 @@ export default class LongPost extends PureComponent {
         return (
             <View style={style.reactions}>
                 <Reactions
-                    navigator={navigator}
                     position='left'
                     postId={postId}
                 />
@@ -171,7 +159,6 @@ export default class LongPost extends PureComponent {
             fileIds,
             hasReactions,
             managedConfig,
-            navigator,
             onHashtagPress,
             onPermalinkPress,
             postId,
@@ -236,7 +223,6 @@ export default class LongPost extends PureComponent {
                                 showLongPost={true}
                                 onHashtagPress={onHashtagPress}
                                 onPermalinkPress={onPermalinkPress}
-                                navigator={navigator}
                                 managedConfig={managedConfig}
                             />
                         </ScrollView>

app/screens/pinned_posts/index.js

@@ -9,8 +9,13 @@ import {clearSearch, getPinnedPosts} from 'mattermost-redux/actions/search';
 import {RequestStatus} from 'mattermost-redux/constants';
 import {getTheme} from 'mattermost-redux/selectors/entities/preferences';
 
+import {
+    dismissModal,
+    goToScreen,
+    showSearchModal,
+    showModalOverCurrentContext,
+} from 'app/actions/navigation';
 import {loadChannelsByTeamName, loadThreadIfNecessary} from 'app/actions/views/channel';
-import {showSearchModal} from 'app/actions/views/search';
 import {makePreparePostIdsForSearchPosts} from 'app/selectors/post_list';
 
 import PinnedPosts from './pinned_posts';
@@ -43,7 +48,10 @@ function mapDispatchToProps(dispatch) {
             getPinnedPosts,
             selectFocusedPostId,
             selectPost,
+            dismissModal,
+            goToScreen,
             showSearchModal,
+            showModalOverCurrentContext,
         }, dispatch),
     };
 }

app/screens/pinned_posts/pinned_posts.js

@@ -35,12 +35,14 @@ export default class PinnedPosts extends PureComponent {
             getPinnedPosts: PropTypes.func.isRequired,
             selectFocusedPostId: PropTypes.func.isRequired,
             selectPost: PropTypes.func.isRequired,
+            dismissModal: PropTypes.func.isRequired,
+            goToScreen: PropTypes.func.isRequired,
             showSearchModal: PropTypes.func.isRequired,
+            showModalOverCurrentContext: PropTypes.func.isRequired,
         }).isRequired,
         currentChannelId: PropTypes.string.isRequired,
         didFail: PropTypes.bool,
         isLoading: PropTypes.bool,
-        navigator: PropTypes.object,
         postIds: PropTypes.array,
         theme: PropTypes.object.isRequired,
     };
@@ -63,38 +65,24 @@ export default class PinnedPosts extends PureComponent {
 
     navigationButtonPressed({buttonId}) {
         if (buttonId === 'close-settings') {
-            this.props.navigator.dismissModal({
-                animationType: 'slide-down',
-            });
+            this.props.actions.dismissModal();
         }
     }
 
     goToThread = (post) => {
-        const {actions, navigator, theme} = this.props;
+        const {actions} = this.props;
         const channelId = post.channel_id;
         const rootId = (post.root_id || post.id);
-
+        const screen = 'Thread';
+        const title = '';
+        const passProps = {
+            channelId,
+            rootId,
+        };
         Keyboard.dismiss();
         actions.loadThreadIfNecessary(rootId);
         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,
-            },
-        };
-
-        navigator.push(options);
+        actions.goToScreen(screen, title, passProps);
     };
 
     handleClosePermalink = () => {
@@ -109,11 +97,11 @@ export default class PinnedPosts extends PureComponent {
     };
 
     handleHashtagPress = async (hashtag) => {
-        const {actions, navigator} = this.props;
+        const {actions} = this.props;
 
-        await navigator.dismissModal();
+        await actions.dismissModal();
 
-        actions.showSearchModal(navigator, '#' + hashtag);
+        actions.showSearchModal('#' + hashtag);
     };
 
     keyExtractor = (item) => item;
@@ -165,7 +153,6 @@ export default class PinnedPosts extends PureComponent {
                     previewPost={this.previewPost}
                     highlightPinnedOrFlagged={true}
                     goToThread={this.goToThread}
-                    navigator={this.props.navigator}
                     onHashtagPress={this.handleHashtagPress}
                     onPermalinkPress={this.handlePermalinkPress}
                     managedConfig={mattermostManaged.getCachedConfig()}
@@ -179,29 +166,24 @@ export default class PinnedPosts extends PureComponent {
     };
 
     showPermalinkView = (postId, isPermalink) => {
-        const {actions, navigator} = this.props;
+        const {actions} = this.props;
 
         actions.selectFocusedPostId(postId);
 
         if (!this.showingPermalink) {
+            const screen = 'Permalink';
+            const passProps = {
+                isPermalink,
+                onClose: this.handleClosePermalink,
+            };
             const options = {
-                screen: 'Permalink',
-                animationType: 'none',
-                backButtonTitle: '',
-                overrideBackPress: true,
-                navigatorStyle: {
-                    navBarHidden: true,
-                    screenBackgroundColor: changeOpacity('#000', 0.2),
-                    modalPresentationStyle: 'overCurrentContext',
-                },
-                passProps: {
-                    isPermalink,
-                    onClose: this.handleClosePermalink,
+                layout: {
+                    backgroundColor: changeOpacity('#000', 0.2),
                 },
             };
 
             this.showingPermalink = true;
-            navigator.showModal(options);
+            actions.showModalOverCurrentContext(screen, passProps, options);
         }
     };
 

app/screens/post_options/index.js

@@ -22,6 +22,7 @@ import {getCurrentTeamId, getCurrentTeamUrl} from 'mattermost-redux/selectors/en
 import {canEditPost} from 'mattermost-redux/utils/post_utils';
 
 import {THREAD} from 'app/constants/screen';
+import {dismissModal, showModal} from 'app/actions/navigation';
 import {addReaction} from 'app/actions/views/emoji';
 import {getDimensions} from 'app/selectors/device';
 
@@ -121,6 +122,8 @@ function mapDispatchToProps(dispatch) {
             removePost,
             unflagPost,
             unpinPost,
+            dismissModal,
+            showModal,
         }, dispatch),
     };
 }

app/screens/post_options/post_options.js

@@ -25,6 +25,8 @@ export default class PostOptions extends PureComponent {
             removePost: PropTypes.func.isRequired,
             unflagPost: PropTypes.func.isRequired,
             unpinPost: PropTypes.func.isRequired,
+            dismissModal: PropTypes.func.isRequired,
+            showModal: PropTypes.func.isRequired,
         }).isRequired,
         canAddReaction: PropTypes.bool,
         canReply: PropTypes.bool,
@@ -39,7 +41,6 @@ export default class PostOptions extends PureComponent {
         deviceHeight: PropTypes.number.isRequired,
         isFlagged: PropTypes.bool,
         isMyPost: PropTypes.bool,
-        navigator: PropTypes.object.isRequired,
         post: PropTypes.object.isRequired,
         theme: PropTypes.object.isRequired,
     };
@@ -49,9 +50,7 @@ export default class PostOptions extends PureComponent {
     };
 
     close = () => {
-        this.props.navigator.dismissModal({
-            animationType: 'none',
-        });
+        this.props.actions.dismissModal();
     };
 
     closeWithAnimation = () => {
@@ -266,27 +265,20 @@ export default class PostOptions extends PureComponent {
     };
 
     handleAddReaction = () => {
+        const {actions, theme} = this.props;
         const {formatMessage} = this.context.intl;
-        const {navigator, theme} = this.props;
 
         this.close();
         setTimeout(() => {
             MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => {
-                navigator.showModal({
-                    screen: 'AddReaction',
-                    title: formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'}),
-                    animated: true,
-                    navigatorStyle: {
-                        navBarTextColor: theme.sidebarHeaderTextColor,
-                        navBarBackgroundColor: theme.sidebarHeaderBg,
-                        navBarButtonColor: theme.sidebarHeaderTextColor,
-                        screenBackgroundColor: theme.centerChannelBg,
-                    },
-                    passProps: {
-                        closeButton: source,
-                        onEmojiPress: this.handleAddReactionToPost,
-                    },
-                });
+                const screen = 'AddReaction';
+                const title = formatMessage({id: 'mobile.post_info.add_reaction', defaultMessage: 'Add Reaction'});
+                const passProps = {
+                    closeButton: source,
+                    onEmojiPress: this.handleAddReactionToPost,
+                };
+
+                actions.showModal(screen, title, passProps);
             });
         }, 300);
     };
@@ -364,27 +356,20 @@ export default class PostOptions extends PureComponent {
     };
 
     handlePostEdit = () => {
+        const {actions, theme, post} = this.props;
         const {intl} = this.context;
-        const {navigator, post, theme} = this.props;
 
         this.close();
         setTimeout(() => {
             MaterialIcon.getImageSource('close', 20, theme.sidebarHeaderTextColor).then((source) => {
-                navigator.showModal({
-                    screen: 'EditPost',
-                    title: intl.formatMessage({id: 'mobile.edit_post.title', defaultMessage: 'Editing Message'}),
-                    animated: true,
-                    navigatorStyle: {
-                        navBarTextColor: theme.sidebarHeaderTextColor,
-                        navBarBackgroundColor: theme.sidebarHeaderBg,
-                        navBarButtonColor: theme.sidebarHeaderTextColor,
-                        screenBackgroundColor: theme.centerChannelBg,
-                    },
-                    passProps: {
-                        post,
-                        closeButton: source,
-                    },
-                });
+                const screen = 'EditPost';
+                const title = intl.formatMessage({id: 'mobile.edit_post.title', defaultMessage: 'Editing Message'});
+                const passProps = {
+                    post,
+                    closeButton: source,
+                };
+
+                actions.showModal(screen, title, passProps);
             });
         }, 300);
     };

app/screens/post_options/post_options.test.js

@@ -18,12 +18,6 @@ jest.mock('Alert', () => {
 });
 
 describe('PostOptions', () => {
-    const navigator = {
-        showModal: jest.fn(),
-        dismissModal: jest.fn(),
-        push: jest.fn(),
-    };
-
     const actions = {
         addReaction: jest.fn(),
         deletePost: jest.fn(),
@@ -32,6 +26,8 @@ describe('PostOptions', () => {
         removePost: jest.fn(),
         unflagPost: jest.fn(),
         unpinPost: jest.fn(),
+        dismissModal: jest.fn(),
+        showModal: jest.fn(),
     };
 
     const post = {
@@ -58,7 +54,6 @@ describe('PostOptions', () => {
         isMyPost: true,
         isSystemMessage: false,
         managedConfig: {},
-        navigator,
         post,
         showAddReaction: true,
         theme: Preferences.THEMES.default,