diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/create_comment.jsx | 53 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 34 | ||||
-rw-r--r-- | web/react/components/post_deleted_modal.jsx | 122 |
3 files changed, 116 insertions, 93 deletions
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 55dd8276c..5f8f76fab 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -7,6 +7,7 @@ import * as AsyncClient from '../utils/async_client.jsx'; import SocketStore from '../stores/socket_store.jsx'; import ChannelStore from '../stores/channel_store.jsx'; import UserStore from '../stores/user_store.jsx'; +import PostDeletedModal from './post_deleted_modal.jsx'; import PostStore from '../stores/post_store.jsx'; import PreferenceStore from '../stores/preference_store.jsx'; import Textbox from './textbox.jsx'; @@ -60,6 +61,8 @@ class CreateComment extends React.Component { this.handleResize = this.handleResize.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.focusTextbox = this.focusTextbox.bind(this); + this.showPostDeletedModal = this.showPostDeletedModal.bind(this); + this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); PostStore.clearCommentDraftUploads(); @@ -70,7 +73,8 @@ class CreateComment extends React.Component { previews: draft.previews, submitting: false, windowWidth: Utils.windowWidth(), - ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') + ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), + showPostDeletedModal: false }; } componentDidMount() { @@ -141,8 +145,10 @@ class CreateComment extends React.Component { PostStore.storePendingPost(post); PostStore.storeCommentDraft(this.props.rootId, null); - Client.createPost(post, ChannelStore.getCurrent(), - function handlePostSuccess(data) { + Client.createPost( + post, + ChannelStore.getCurrent(), + (data) => { AsyncClient.getPosts(this.props.channelId); const channel = ChannelStore.get(this.props.channelId); @@ -155,27 +161,30 @@ class CreateComment extends React.Component { type: ActionTypes.RECEIVED_POST, post: data }); - }.bind(this), - function handlePostError(err) { - let state = {}; - + }, + (err) => { if (err.id === 'api.post.create_post.root_id.app_error') { - PostStore.removePendingPost(post.channel_id, post.pending_post_id); + this.showPostDeletedModal(); - if ($('#post_deleted').length > 0) { - $('#post_deleted').modal('show'); - } + PostStore.removePendingPost(post.channel_id, post.pending_post_id); } else { post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); } - state.submitting = false; - this.setState(state); - }.bind(this) + this.setState({ + submitting: false + }); + } ); - this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); + this.setState({ + messageText: '', + submitting: false, + postError: null, + previews: [], + serverError: null + }); } commentMsgKeyPress(e) { if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) { @@ -312,6 +321,16 @@ class CreateComment extends React.Component { this.refs.textbox.focus(); } } + showPostDeletedModal() { + this.setState({ + showPostDeletedModal: true + }); + } + hidePostDeletedModal() { + this.setState({ + showPostDeletedModal: false + }); + } render() { let serverError = null; if (this.state.serverError) { @@ -411,6 +430,10 @@ class CreateComment extends React.Component { {serverError} </div> </div> + <PostDeletedModal + show={this.state.showPostDeletedModal} + onHide={this.hidePostDeletedModal} + /> </form> ); } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index b9fbf09b5..5d90d03d2 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -5,6 +5,7 @@ import MsgTyping from './msg_typing.jsx'; import Textbox from './textbox.jsx'; import FileUpload from './file_upload.jsx'; import FilePreview from './file_preview.jsx'; +import PostDeletedModal from './post_deleted_modal.jsx'; import TutorialTip from './tutorial/tutorial_tip.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; @@ -64,6 +65,8 @@ class CreatePost extends React.Component { this.handleKeyDown = this.handleKeyDown.bind(this); this.sendMessage = this.sendMessage.bind(this); this.focusTextbox = this.focusTextbox.bind(this); + this.showPostDeletedModal = this.showPostDeletedModal.bind(this); + this.hidePostDeletedModal = this.hidePostDeletedModal.bind(this); PostStore.clearDraftUploads(); @@ -77,7 +80,8 @@ class CreatePost extends React.Component { submitting: false, initialText: draft.messageText, ctrlSend: false, - showTutorialTip: false + showTutorialTip: false, + showPostDeletedModal: false }; } getCurrentDraft() { @@ -157,7 +161,6 @@ class CreatePost extends React.Component { post.pending_post_id = `${userId}:${time}`; post.user_id = userId; post.create_at = time; - post.root_id = this.state.rootId; post.parent_id = this.state.parentId; const channel = ChannelStore.get(this.state.channelId); @@ -177,20 +180,19 @@ class CreatePost extends React.Component { EventHelpers.emitPostRecievedEvent(data); }, (err) => { - const state = {}; - if (err.id === 'api.post.create_post.root_id.app_error') { - if ($('#post_deleted').length > 0) { - $('#post_deleted').modal('show'); - } + // this should never actually happen since you can't reply from this textbox + this.showPostDeletedModal(); + PostStore.removePendingPost(post.pending_post_id); } else { post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); } - state.submitting = false; - this.setState(state); + this.setState({ + submitting: false + }); } ); } @@ -374,6 +376,16 @@ class CreatePost extends React.Component { }); } } + showPostDeletedModal() { + this.setState({ + showPostDeletedModal: true + }); + } + hidePostDeletedModal() { + this.setState({ + showPostDeletedModal: false + }); + } createTutorialTip() { const screens = []; @@ -479,6 +491,10 @@ class CreatePost extends React.Component { {serverError} </div> </div> + <PostDeletedModal + show={this.state.showPostDeletedModal} + onHide={this.hidePostDeletedModal} + /> </form> ); } diff --git a/web/react/components/post_deleted_modal.jsx b/web/react/components/post_deleted_modal.jsx index 642befeab..be22989a6 100644 --- a/web/react/components/post_deleted_modal.jsx +++ b/web/react/components/post_deleted_modal.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import UserStore from '../stores/user_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import Constants from '../utils/constants.jsx'; @@ -9,20 +8,22 @@ import {FormattedMessage} from 'mm-intl'; var ActionTypes = Constants.ActionTypes; +const Modal = ReactBootstrap.Modal; + export default class PostDeletedModal extends React.Component { constructor(props) { super(props); - this.handleClose = this.handleClose.bind(this); - - this.state = {}; + this.handleHide = this.handleHide.bind(this); } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', () => { - this.handleClose(); - }); + + shouldComponentUpdate(nextProps) { + return nextProps.show !== this.props.show; } - handleClose() { + + handleHide(e) { + e.preventDefault(); + AppDispatcher.handleServerAction({ type: ActionTypes.RECEIVED_SEARCH, results: null @@ -39,67 +40,50 @@ export default class PostDeletedModal extends React.Component { type: ActionTypes.RECEIVED_POST_SELECTED, results: null }); - } - render() { - var currentUser = UserStore.getCurrentUser(); - if (currentUser != null) { - return ( - <div - className='modal fade' - ref='modal' - id='post_deleted' - tabIndex='-1' - role='dialog' - aria-hidden='true' - > - <div className='modal-dialog'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - > - <span aria-hidden='true'>{'×'}</span> - </button> - <h4 - className='modal-title' - id='myModalLabel' - > - <FormattedMessage - id='post_delete.notPosted' - defaultMessage='Comment could not be posted' - /> - </h4> - </div> - <div className='modal-body'> - <p> - <FormattedMessage - id='post_delete.someone' - defaultMessage='Someone deleted the message on which you tried to post a comment.' - /> - </p> - </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-primary' - data-dismiss='modal' - > - <FormattedMessage - id='post_delete.okay' - defaultMessage='Okay' - /> - </button> - </div> - </div> - </div> - </div> - ); - } + this.props.onHide(); + } - return <div/>; + render() { + return ( + <Modal + show={this.props.show} + onHide={this.handleHide} + > + <Modal.Header closeButton={true}> + <Modal.Title> + <FormattedMessage + id='post_delete.notPosted' + defaultMessage='Comment could not be posted' + /> + </Modal.Title> + </Modal.Header> + <Modal.Body> + <p> + <FormattedMessage + id='post_delete.someone' + defaultMessage='Someone deleted the message on which you tried to post a comment.' + /> + </p> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-primary' + onClick={this.handleHide} + > + <FormattedMessage + id='post_delete.okay' + defaultMessage='Okay' + /> + </button> + </Modal.Footer> + </Modal> + ); } } + +PostDeletedModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired +}; |