Converted DeletePostModal to React-Bootstrap

web/react/components/create_comment.jsx

@@ -194,7 +194,8 @@ export default class CreateComment extends React.Component {
                 title: 'Comment',
                 message: lastPost.message,
                 postId: lastPost.id,
-                channelId: lastPost.channel_id
+                channelId: lastPost.channel_id,
+                comments: PostStore.getCommentCount(lastPost)
             });
         }
     }

web/react/components/create_post.jsx

@@ -372,7 +372,8 @@ export default class CreatePost extends React.Component {
                 title: type,
                 message: lastPost.message,
                 postId: lastPost.id,
-                channelId: lastPost.channel_id
+                channelId: lastPost.channel_id,
+                comments: PostStore.getCommentCount(lastPost)
             });
         }
     }

web/react/components/delete_post_modal.jsx

@@ -3,7 +3,8 @@
 
 var Client = require('../utils/client.jsx');
 var PostStore = require('../stores/post_store.jsx');
-var BrowserStore = require('../stores/browser_store.jsx');
+var ModalStore = require('../stores/modal_store.jsx');
+var Modal = ReactBootstrap.Modal;
 var Utils = require('../utils/utils.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
@@ -15,18 +16,40 @@ export default class DeletePostModal extends React.Component {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
+        this.handleToggle = this.handleToggle.bind(this);
+        this.handleHide = this.handleHide.bind(this);
         this.onListenerChange = this.onListenerChange.bind(this);
-        this.onShow = this.onShow.bind(this);
 
-        this.state = {title: '', postId: '', channelId: '', selectedList: PostStore.getSelectedPost(), comments: 0};
+        this.selectedList = null;
+
+        this.state = {
+            show: true,
+            post: null,
+            commentCount: 0,
+            error: ''
+        };
     }
+
+    componentDidMount() {
+        ModalStore.addModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
+        PostStore.addSelectedPostChangeListener(this.onListenerChange);
+    }
+
+    componentWillUnmount() {
+        PostStore.removeSelectedPostChangeListener(this.onListenerChange);
+        ModalStore.removeModalListener(ActionTypes.TOGGLE_DELETE_POST_MODAL, this.handleToggle);
+    }
+
     handleDelete() {
-        Client.deletePost(this.state.channelId, this.state.postId,
-            function deleteSuccess() {
-                var selectedList = this.state.selectedList;
+        Client.deletePost(
+            this.state.post.channel_id,
+            this.state.post.id,
+            () => {
+                var selectedList = this.selectedList;
+
                 if (selectedList && selectedList.order && selectedList.order.length > 0) {
                     var selectedPost = selectedList.posts[selectedList.order[0]];
-                    if ((selectedPost.id === this.state.postId && this.state.title === 'Post') || selectedPost.root_id === this.state.postId) {
+                    if ((selectedPost.id === this.state.post.id && !this.state.root_id) || selectedPost.root_id === this.state.post.id) {
                         AppDispatcher.handleServerAction({
                             type: ActionTypes.RECIEVED_SEARCH,
                             results: null
@@ -36,7 +59,7 @@ export default class DeletePostModal extends React.Component {
                             type: ActionTypes.RECIEVED_POST_SELECTED,
                             results: null
                         });
-                    } else if (selectedPost.id === this.state.postId && this.state.title === 'Comment') {
+                    } else if (selectedPost.id === this.state.post.id && this.state.root_id) {
                         if (selectedPost.root_id && selectedPost.root_id.length > 0 && selectedList.posts[selectedPost.root_id]) {
                             selectedList.order = [selectedPost.root_id];
                             delete selectedList.posts[selectedPost.id];
@@ -53,98 +76,96 @@ export default class DeletePostModal extends React.Component {
                         }
                     }
                 }
-                PostStore.removePost(this.state.postId, this.state.channelId);
-                AsyncClient.getPosts(this.state.channelId);
-            }.bind(this),
-            function deleteFailed(err) {
+
+                PostStore.removePost(this.state.post.id, this.state.post.channel_id);
+                AsyncClient.getPosts(this.state.post.channel_id);
+            },
+            (err) => {
                 AsyncClient.dispatchError(err, 'deletePost');
             }
         );
+
+        this.handleHide();
     }
-    onShow(e) {
-        var newState = {};
-        if (BrowserStore.getItem('edit_state_transfer')) {
-            newState = BrowserStore.getItem('edit_state_transfer');
-            BrowserStore.removeItem('edit_state_transfer');
-        } else {
-            var button = e.relatedTarget;
-            newState = {title: $(button).attr('data-title'), channelId: $(button).attr('data-channelid'), postId: $(button).attr('data-postid'), comments: $(button).attr('data-comments')};
-        }
-        this.setState(newState);
+
+    handleToggle(value, args) {
+        this.setState({
+            show: value,
+            post: args.post,
+            commentCount: args.commentCount,
+            error: ''
+        });
     }
-    componentDidMount() {
-        $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow);
-        PostStore.addSelectedPostChangeListener(this.onListenerChange);
-    }
-    componentWillUnmount() {
-        PostStore.removeSelectedPostChangeListener(this.onListenerChange);
+
+    handleHide() {
+        this.setState({show: false});
     }
+
     onListenerChange() {
         var newList = PostStore.getSelectedPost();
-        if (!Utils.areObjectsEqual(this.state.selectedList, newList)) {
-            this.setState({selectedList: newList});
+        if (!Utils.areObjectsEqual(this.selectedList, newList)) {
+            this.selectedList = newList;
         }
     }
+
     render() {
+        if (!this.state.post) {
+            return null;
+        }
+
         var error = null;
         if (this.state.error) {
             error = <div className='form-group has-error'><label className='control-label'>{this.state.error}</label></div>;
         }
 
         var commentWarning = '';
-        if (this.state.comments > 0) {
-            commentWarning = 'This post has ' + this.state.comments + ' comment(s) on it.';
+        if (this.state.commentCount > 0) {
+            commentWarning = 'This post has ' + this.state.commentCount + ' comment(s) on it.';
         }
 
+        const postTerm = Utils.getPostTerm(this.state.post);
+
         return (
-            <div
-                className='modal fade'
-                id='delete_post'
-                ref='modal'
-                role='dialog'
-                tabIndex='-1'
-                aria-hidden='true'
+            <Modal
+                show={this.state.show}
+                onHide={this.handleHide}
             >
-              <div className='modal-dialog modal-push-down'>
-                <div className='modal-content'>
-                  <div className='modal-header'>
-                    <button
-                        type='button'
-                        className='close'
-                        data-dismiss='modal'
-                        aria-label='Close'
-                    >
-                        <span aria-hidden='true'>&times;</span>
-                    </button>
-                    <h4 className='modal-title'>Confirm {this.state.title} Delete</h4>
-                  </div>
-                  <div className='modal-body'>
-                    Are you sure you want to delete the {this.state.title.toLowerCase()}?
-                    <br/>
-                    <br/>
+                <Modal.Header closeButton={true}>
+                    {`Confirm ${postTerm} Delete`}
+                </Modal.Header>
+                <Modal.Body>
+                    {`Are you sure you want to delete this ${postTerm.toLowerCase()}?`}
+                    <br />
+                    <br />
                     {commentWarning}
-                  </div>
-                  {error}
-                  <div className='modal-footer'>
+                    {error}
+                </Modal.Body>
+                <Modal.Footer>
                     <button
                         type='button'
                         className='btn btn-default'
-                        data-dismiss='modal'
+                        onClick={this.handleHide}
                     >
-                        Cancel
+                        {'Cancel'}
                     </button>
                     <button
                         type='button'
                         className='btn btn-danger'
-                        data-dismiss='modal'
                         onClick={this.handleDelete}
                     >
-                        Delete
+                        {'Delete'}
                     </button>
-                  </div>
-                </div>
-              </div>
-            </div>
+                </Modal.Footer>
+            </Modal>
         );
     }
+
+    static show(post, commentCount) {
+        AppDispatcher.handleViewAction({
+            type: ActionTypes.TOGGLE_DELETE_POST_MODAL,
+            value: true,
+            post,
+            commentCount: commentCount || 0
+        });
+    }
 }

web/react/components/edit_post_modal.jsx

@@ -3,6 +3,7 @@
 
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
+var DeletePostModal = require('./delete_post_modal.jsx');
 var Textbox = require('./textbox.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
 var PostStore = require('../stores/post_store.jsx');
@@ -34,7 +35,7 @@ export default class EditPostModal extends React.Component {
             delete tempState.editText;
             BrowserStore.setItem('edit_state_transfer', tempState);
             $('#edit_post').modal('hide');
-            $('#delete_post').modal('show');
+            DeletePostModal.show(PostStore.getPost(this.state.channel_id, this.state.post_id), this.state.comments);
             return;
         }
 

web/react/components/post_info.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var DeletePostModal = require('./delete_post_modal.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var utils = require('../utils/utils.jsx');
 var TimeSince = require('./time_since.jsx');
@@ -50,7 +51,7 @@ export default class PostInfo extends React.Component {
                         data-channelid={post.channel_id}
                         data-comments={dataComments}
                     >
-                        Edit
+                        {'Edit'}
                     </a>
                 </li>
             );
@@ -65,14 +66,9 @@ export default class PostInfo extends React.Component {
                     <a
                         href='#'
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#delete_post'
-                        data-title={type}
-                        data-postid={post.id}
-                        data-channelid={post.channel_id}
-                        data-comments={dataComments}
+                        onClick={() => DeletePostModal.show(post, dataComments)}
                     >
-                        Delete
+                        {'Delete'}
                     </a>
                 </li>
             );
@@ -89,7 +85,7 @@ export default class PostInfo extends React.Component {
                         href='#'
                         onClick={this.props.handleCommentClick}
                     >
-                        Reply
+                        {'Reply'}
                     </a>
                 </li>
             );

web/react/components/rhs_comment.jsx

@@ -8,6 +8,7 @@ var UserStore = require('../stores/user_store.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Utils = require('../utils/utils.jsx');
 var Constants = require('../utils/constants.jsx');
+var DeletePostModal = require('./delete_post_modal.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
@@ -114,12 +115,7 @@ export default class RhsComment extends React.Component {
                     <a
                         href='#'
                         role='menuitem'
-                        data-toggle='modal'
-                        data-target='#delete_post'
-                        data-title='Comment'
-                        data-postid={post.id}
-                        data-channelid={post.channel_id}
-                        data-comments={0}
+                        onClick={() => DeletePostModal.show(post, 0)}
                     >
                         {'Delete'}
                     </a>

web/react/components/rhs_root_post.jsx

@@ -6,6 +6,7 @@ var UserProfile = require('./user_profile.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TextFormatting = require('../utils/text_formatting.jsx');
 var utils = require('../utils/utils.jsx');
+var DeletePostModal = require('./delete_post_modal.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
 var twemoji = require('twemoji');
 var Constants = require('../utils/constants.jsx');
@@ -86,21 +87,16 @@ export default class RhsRootPost extends React.Component {
                                 data-postid={post.id}
                                 data-channelid={post.channel_id}
                             >
-                                Edit
+                                {'Edit'}
                             </a>
                         </li>
                         <li role='presentation'>
                             <a
                                 href='#'
                                 role='menuitem'
-                                data-toggle='modal'
-                                data-target='#delete_post'
-                                data-title={type}
-                                data-postid={post.id}
-                                data-channelid={post.channel_id}
-                                data-comments={this.props.commentCount}
+                                onClick={() => DeletePostModal.show(post, this.props.commentCount)}
                             >
-                                Delete
+                                {'Delete'}
                             </a>
                         </li>
                     </ul>