1 files changed, 88 insertions, 57 deletions

diff --git a/web/react/components/edit_post_modal.jsx b/web/react/components/edit_post_modal.jsx
index 1c5a1ed5e..fef60c715 100644
--- a/web/react/components/edit_post_modal.jsx
+++ b/web/react/components/edit_post_modal.jsx
@@ -3,13 +3,21 @@
 
 var Client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
-var Constants = require('../utils/constants.jsx');
-var utils = require('../utils/utils.jsx');
 var Textbox = require('./textbox.jsx');
 var BrowserStore = require('../stores/browser_store.jsx');
 
-module.exports = React.createClass({
-    handleEdit: function(e) {
+export default class EditPostModal extends React.Component {
+    constructor() {
+        super();
+
+        this.handleEdit = this.handleEdit.bind(this);
+        this.handleEditInput = this.handleEditInput.bind(this);
+        this.handleEditKeyPress = this.handleEditKeyPress.bind(this);
+        this.handleUserInput = this.handleUserInput.bind(this);
+
+        this.state = {editText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''};
+    }
+    handleEdit() {
         var updatedPost = {};
         updatedPost.message = this.state.editText.trim();
 
@@ -17,8 +25,8 @@ module.exports = React.createClass({
             var tempState = this.state;
             delete tempState.editText;
             BrowserStore.setItem('edit_state_transfer', tempState);
-            $("#edit_post").modal('hide');
-            $("#delete_post").modal('show');
+            $('#edit_post').modal('hide');
+            $('#delete_post').modal('show');
             return;
         }
 
@@ -26,79 +34,102 @@ module.exports = React.createClass({
         updatedPost.channel_id = this.state.channel_id;
 
         Client.updatePost(updatedPost,
-            function(data) {
+            function success() {
                 AsyncClient.getPosts(this.state.channel_id);
                 window.scrollTo(0, 0);
             }.bind(this),
-            function(err) {
-                AsyncClient.dispatchError(err, "updatePost");
-            }.bind(this)
+            function error(err) {
+                AsyncClient.dispatchError(err, 'updatePost');
+            }
         );
 
-        $("#edit_post").modal('hide');
+        $('#edit_post').modal('hide');
         $(this.state.refocusId).focus();
-    },
-    handleEditInput: function(editMessage) {
+    }
+    handleEditInput(editMessage) {
         this.setState({editText: editMessage});
-    },
-    handleEditKeyPress: function(e) {
-        if (e.which == 13 && !e.shiftKey && !e.altKey) {
+    }
+    handleEditKeyPress(e) {
+        if (e.which === 13 && !e.shiftKey && !e.altKey) {
             e.preventDefault();
-            this.refs.editbox.getDOMNode().blur();
+            React.findDOMNode(this.refs.editbox).blur();
             this.handleEdit(e);
         }
-    },
-    handleUserInput: function(e) {
-        this.setState({ editText: e.target.value });
-    },
-    componentDidMount: function() {
+    }
+    handleUserInput(e) {
+        this.setState({editText: e.target.value});
+    }
+    componentDidMount() {
         var self = this;
 
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
-            self.setState({editText: "", title: "", channel_id: "", post_id: "", comments: 0, refocusId: "", error: ''});
+        $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function onHidden() {
+            self.setState({editText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: ''});
         });
 
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function onShow(e) {
             var button = e.relatedTarget;
-            self.setState({ editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid') });
+            self.setState({editText: $(button).attr('data-message'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), post_id: $(button).attr('data-postid'), comments: $(button).attr('data-comments'), refocusId: $(button).attr('data-refoucsid')});
         });
 
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
+        $(React.findDOMNode(this.refs.modal)).on('shown.bs.modal', function onShown() {
             self.refs.editbox.resize();
         });
-    },
-    getInitialState: function() {
-        return { editText: "", title: "", post_id: "", channel_id: "", comments: 0, refocusId: "" };
-    },
-    render: function() {
-        var error = this.state.error ? <div className='form-group has-error'><br /><label className='control-label'>{ this.state.error }</label></div> : <div className='form-group'><br /></div>;
+    }
+    render() {
+        var error = (<div className='form-group'><br /></div>);
+        if (this.state.error) {
+            error = (<div className='form-group has-error'><br /><label className='control-label'>{this.state.error}</label></div>);
+        }
 
         return (
-            <div className="modal fade edit-modal" ref="modal" id="edit_post" role="dialog" tabIndex="-1" aria-hidden="true">
-              <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" onClick={this.handleEditClose}><span aria-hidden="true">&times;</span></button>
-                    <h4 className="modal-title">Edit {this.state.title}</h4>
-                  </div>
-                  <div className="edit-modal-body modal-body">
-                    <Textbox
-                        onUserInput={this.handleEditInput}
-                        onKeyPress={this.handleEditKeyPress}
-                        messageText={this.state.editText}
-                        createMessage="Edit the post..."
-                        id="edit_textbox"
-                        ref="editbox"
-                    />
-                    { error }
-                  </div>
-                  <div className="modal-footer">
-                    <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
-                    <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
-                  </div>
+            <div
+                className='modal fade edit-modal'
+                ref='modal'
+                id='edit_post'
+                role='dialog'
+                tabIndex='-1'
+                aria-hidden='true' >
+                <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'
+                                onClick={this.handleEditClose}>
+                                <span aria-hidden='true'>&times;</span>
+                            </button>
+                        <h4 className='modal-title'>Edit {this.state.title}</h4>
+                        </div>
+                        <div className='edit-modal-body modal-body'>
+                            <Textbox
+                                onUserInput={this.handleEditInput}
+                                onKeyPress={this.handleEditKeyPress}
+                                messageText={this.state.editText}
+                                createMessage='Edit the post...'
+                                id='edit_textbox'
+                                ref='editbox'
+                                />
+                            {error}
+                        </div>
+                        <div className='modal-footer'>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal' >
+                                Cancel
+                            </button>
+                            <button
+                                type='button'
+                                className='btn btn-primary'
+                                onClick={this.handleEdit}>
+                                Save
+                            </button>
+                        </div>
+                    </div>
                 </div>
-              </div>
             </div>
         );
     }
-});
+}