diff options
author | Carlos Tadeu Panato Junior <ctadeu@gmail.com> | 2017-05-30 22:46:18 +0200 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2017-05-30 16:46:18 -0400 |
commit | d409c7c1c6a21de203c471134419726e1c7dcb12 (patch) | |
tree | a09bb0065a17f8961ffc3a2b452602ece890b88a /webapp/components | |
parent | eab6f7459478d23968466766cbe49185d405a056 (diff) | |
download | chat-d409c7c1c6a21de203c471134419726e1c7dcb12.tar.gz chat-d409c7c1c6a21de203c471134419726e1c7dcb12.tar.bz2 chat-d409c7c1c6a21de203c471134419726e1c7dcb12.zip |
Implement PLT-6246 - Confirm before sending (at)all, (at)channel message (#6250)
* implement PLT-6246 - Confirm before sending (at)all, (at)channel message
* refactor per review
* add constant to define the notify all modal
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/confirm_modal.jsx | 16 | ||||
-rw-r--r-- | webapp/components/create_post.jsx | 82 |
2 files changed, 89 insertions, 9 deletions
diff --git a/webapp/components/confirm_modal.jsx b/webapp/components/confirm_modal.jsx index d6803499a..94f27a3e2 100644 --- a/webapp/components/confirm_modal.jsx +++ b/webapp/components/confirm_modal.jsx @@ -16,11 +16,23 @@ export default class ConfirmModal extends React.Component { } componentDidMount() { - document.addEventListener('keypress', this.handleKeypress); + if (this.props.show) { + document.addEventListener('keypress', this.handleKeypress); + } } componentWillUnmount() { - document.removeEventListener('keypress', this.handleKeypress); + if (!this.props.show) { + document.removeEventListener('keypress', this.handleKeypress); + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.show && !nextProps.show) { + document.removeEventListener('keypress', this.handleKeypress); + } else if (!this.props.show && nextProps.show) { + document.addEventListener('keypress', this.handleKeypress); + } } handleKeypress(e) { diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 59c12e059..dab1d9735 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -23,10 +23,11 @@ import PostStore from 'stores/post_store.jsx'; import MessageHistoryStore from 'stores/message_history_store.jsx'; import UserStore from 'stores/user_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import ConfirmModal from './confirm_modal.jsx'; import Constants from 'utils/constants.jsx'; -import {FormattedHTMLMessage} from 'react-intl'; +import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; const Preferences = Constants.Preferences; @@ -45,6 +46,7 @@ export default class CreatePost extends React.Component { this.lastTime = 0; + this.doSubmit = this.doSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.postMsgKeyPress = this.postMsgKeyPress.bind(this); this.handleChange = this.handleChange.bind(this); @@ -68,12 +70,19 @@ export default class CreatePost extends React.Component { this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this); this.handlePostError = this.handlePostError.bind(this); this.closeEmoji = this.closeEmoji.bind(this); + this.hideNotifyAllModal = this.hideNotifyAllModal.bind(this); + this.showNotifyAllModal = this.showNotifyAllModal.bind(this); + this.handleNotifyModalCancel = this.handleNotifyModalCancel.bind(this); + this.handleNotifyAllConfirmation = this.handleNotifyAllConfirmation.bind(this); PostStore.clearDraftUploads(); const channelId = ChannelStore.getCurrentId(); const draft = PostStore.getPostDraft(channelId); + const stats = ChannelStore.getCurrentStats(); + const members = stats.member_count - 1; + this.state = { channelId, message: draft.message, @@ -86,7 +95,9 @@ export default class CreatePost extends React.Component { showPostDeletedModal: false, enableSendButton: false, showEmojiPicker: false, - emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) + emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW), + showConfirmModal: false, + totalMembers: members }; this.lastBlurAt = 0; @@ -108,13 +119,9 @@ export default class CreatePost extends React.Component { } } - handleSubmit(e) { + doSubmit(e) { e.preventDefault(); - if (this.state.uploadsInProgress.length > 0 || this.state.submitting) { - return; - } - const post = {}; post.file_ids = []; post.message = this.state.message; @@ -193,6 +200,35 @@ export default class CreatePost extends React.Component { this.focusTextbox(forceFocus); } + handleNotifyAllConfirmation(e) { + this.hideNotifyAllModal(); + this.doSubmit(e); + } + + hideNotifyAllModal() { + this.setState({showConfirmModal: false}); + } + + showNotifyAllModal() { + this.setState({showConfirmModal: true}); + } + + handleSubmit(e) { + const stats = ChannelStore.getCurrentStats(); + const members = stats.member_count - 1; + + if ((this.state.message.includes('@all') || this.state.message.includes('@channel')) && members >= Constants.NOTIFY_ALL_MEMBERS) { + this.setState({totalMembers: members}); + this.showNotifyAllModal(); + return; + } + this.doSubmit(e); + } + + handleNotifyModalCancel() { + this.setState({showConfirmModal: false}); + } + sendMessage(post) { post.channel_id = this.state.channelId; post.file_ids = this.state.fileInfos.map((info) => info.id); @@ -574,6 +610,30 @@ export default class CreatePost extends React.Component { } render() { + const notifyAllTitle = ( + <FormattedMessage + id='notify_all.title.confirm' + defaultMessage='Confirm sending notifications to entire channel' + /> + ); + + const notifyAllConfirm = ( + <FormattedMessage + id='notify_all.confirm' + defaultMessage='Confirm' + /> + ); + + const notifyAllMessage = ( + <FormattedMessage + id='notify_all.question' + defaultMessage='By using @all or @channel you are about to send notifications to {totalMembers} people. Are you sure you want to do this?' + values={{ + totalMembers: this.state.totalMembers + }} + /> + ); + let serverError = null; if (this.state.serverError) { serverError = ( @@ -699,6 +759,14 @@ export default class CreatePost extends React.Component { show={this.state.showPostDeletedModal} onHide={this.hidePostDeletedModal} /> + <ConfirmModal + title={notifyAllTitle} + message={notifyAllMessage} + confirmButton={notifyAllConfirm} + show={this.state.showConfirmModal} + onConfirm={this.handleNotifyAllConfirmation} + onCancel={this.handleNotifyModalCancel} + /> </form> ); } |