1 files changed, 83 insertions, 46 deletions

diff --git a/web/react/components/removed_from_channel_modal.jsx b/web/react/components/removed_from_channel_modal.jsx
index 4a49e1c98..b7ec85457 100644
--- a/web/react/components/removed_from_channel_modal.jsx
+++ b/web/react/components/removed_from_channel_modal.jsx
@@ -3,62 +3,99 @@
 
 var ChannelStore = require('../stores/channel_store.jsx');
 var UserStore = require('../stores/user_store.jsx');
-var BrowserStore = require('../stores/browser_store.jsx')
+var BrowserStore = require('../stores/browser_store.jsx');
 var utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
-    handleShow: function() {
-      var newState = {};
-      if(BrowserStore.getItem("channel-removed-state")) {
-        newState = BrowserStore.getItem("channel-removed-state");
-        BrowserStore.removeItem("channel-removed-state");
-      }
+export default class RemovedFromChannelModal extends React.Component {
+    constructor(props) {
+        super(props);
 
-      this.setState(newState);
-    },
-    handleClose: function() {
-      var townSquare = ChannelStore.getByName("town-square");
-      utils.switchChannel(townSquare);
+        this.handleShow = this.handleShow.bind(this);
+        this.handleClose = this.handleClose.bind(this);
 
-      this.setState({channelName: "", remover: ""});
-    },
-    componentDidMount: function() {
-      $(this.getDOMNode()).on('show.bs.modal',this.handleShow);
-      $(this.getDOMNode()).on('hidden.bs.modal',this.handleClose);
-    },
-    componentWillUnmount: function() {
-      $(this.getDOMNode()).off('show.bs.modal',this.handleShow);
-      $(this.getDOMNode()).off('hidden.bs.modal',this.handleClose);
-    },
-    getInitialState: function() {
-      return {channelName: "", remover: ""}
-    },
-    render: function() {
+        this.state = {
+            channelName: '',
+            remover: ''
+        };
+    }
+
+    handleShow() {
+        var newState = {};
+        if (BrowserStore.getItem('channel-removed-state')) {
+            newState = BrowserStore.getItem('channel-removed-state');
+            BrowserStore.removeItem('channel-removed-state');
+        }
+
+        this.setState(newState);
+    }
+
+    handleClose() {
+        var townSquare = ChannelStore.getByName('town-square');
+        utils.switchChannel(townSquare);
+
+        this.setState({channelName: '', remover: ''});
+    }
+
+    componentDidMount() {
+        $(React.findDOMNode(this)).on('show.bs.modal', this.handleShow);
+        $(React.findDOMNode(this)).on('hidden.bs.modal', this.handleClose);
+    }
+
+    componentWillUnmount() {
+        $(React.findDOMNode(this)).off('show.bs.modal', this.handleShow);
+        $(React.findDOMNode(this)).off('hidden.bs.modal', this.handleClose);
+    }
+
+    render() {
         var currentUser = UserStore.getCurrentUser();
-        var channelName = this.state.channelName ? this.state.channelName : "the channel"
-        var remover = this.state.remover ? this.state.remover : "Someone"
+
+        var channelName = 'the channel';
+        if (this.state.channelName) {
+            channelName = this.state.channelName;
+        }
+
+        var remover = 'Someone';
+        if (this.state.remover) {
+            remover = this.state.remover;
+        }
 
         if (currentUser != null) {
             return (
-                <div className='modal fade' ref='modal' id='removed_from_channel' 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'>&times;</span></button>
-                          <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
-                        </div>
-                        <div className='modal-body'>
-                            <p>{remover} removed you from {channelName}</p>
+                <div
+                    className='modal fade'
+                    ref='modal'
+                    id='removed_from_channel'
+                    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'>&times;</span></button>
+                                <h4 className='modal-title'>Removed from <span className='name'>{channelName}</span></h4>
+                            </div>
+                            <div className='modal-body'>
+                                  <p>{remover} removed you from {channelName}</p>
+                            </div>
+                            <div className='modal-footer'>
+                                <button
+                                    type='button'
+                                    className='btn btn-primary'
+                                    data-dismiss='modal'
+                                >Okay</button>
+                            </div>
                         </div>
-                        <div className='modal-footer'>
-                          <button type='button' className='btn btn-primary' data-dismiss='modal'>Okay</button>
-                        </div>
-                      </div>
-                   </div>
+                    </div>
                 </div>
             );
-        } else {
-            return <div/>;
         }
+
+        return <div/>;
     }
-});
\ No newline at end of file
+}
\ No newline at end of file