diff --git a/app/components/post_textbox/post_textbox_base.js b/app/components/post_textbox/post_textbox_base.js index d9d884743..fdc5d12bc 100644 --- a/app/components/post_textbox/post_textbox_base.js +++ b/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 { { - 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}], }); }; diff --git a/app/screens/edit_post/index.js b/app/screens/edit_post/index.js index 3d0f296d6..435fb3741 100644 --- a/app/screens/edit_post/index.js +++ b/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), }; } diff --git a/app/screens/long_post/index.js b/app/screens/long_post/index.js index 2040d9a72..3352ccdca 100644 --- a/app/screens/long_post/index.js +++ b/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), }; } diff --git a/app/screens/long_post/long_post.js b/app/screens/long_post/long_post.js index 554227e67..d05937850 100644 --- a/app/screens/long_post/long_post.js +++ b/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} /> ); @@ -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 ( @@ -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} /> diff --git a/app/screens/pinned_posts/index.js b/app/screens/pinned_posts/index.js index bfc5df20d..30f18d440 100644 --- a/app/screens/pinned_posts/index.js +++ b/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), }; } diff --git a/app/screens/pinned_posts/pinned_posts.js b/app/screens/pinned_posts/pinned_posts.js index 2d36da00a..b76c18b93 100644 --- a/app/screens/pinned_posts/pinned_posts.js +++ b/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); } }; diff --git a/app/screens/post_options/index.js b/app/screens/post_options/index.js index aa0fd3b7f..e6120ef8e 100644 --- a/app/screens/post_options/index.js +++ b/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), }; } diff --git a/app/screens/post_options/post_options.js b/app/screens/post_options/post_options.js index 8f2be0ad7..64c934ebd 100644 --- a/app/screens/post_options/post_options.js +++ b/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); }; diff --git a/app/screens/post_options/post_options.test.js b/app/screens/post_options/post_options.test.js index dc0498c73..cd742c97f 100644 --- a/app/screens/post_options/post_options.test.js +++ b/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,