Merge pull request #2191 from hmhealey/plt1256

PLT-1256 Ported PostDeletedModal to React-Bootstrap

3 files changed, 116 insertions, 93 deletions

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 5105cf23a..24e0ff6e9 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 a4e60191d..48b6594a1 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
+};