Cosmetic reformatting of more_channels.jsx

web/react/components/more_channels.jsx

@@ -14,11 +14,20 @@ function getStateFromStores() {
     };
 }
 
-module.exports = React.createClass({
-    displayName: 'MoreChannelsModal',
+export default class MoreChannels extends React.Component {
+    constructor(props) {
+        super(props);
 
-    componentDidMount: function() {
-        ChannelStore.addMoreChangeListener(this._onChange);
+        this.onListenerChange = this.onListenerChange.bind(this);
+        this.handleJoin = this.handleJoin.bind(this);
+        this.handleNewChannel = this.handleNewChannel.bind(this);
+
+        var initState = getStateFromStores();
+        initState.channelType = '';
+        this.state = initState;
+    }
+    componentDidMount() {
+        ChannelStore.addMoreChangeListener(this.onListenerChange);
         $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() {
             asyncClient.getMoreChannels(true);
         });
@@ -28,44 +37,39 @@ module.exports = React.createClass({
             var button = e.relatedTarget;
             self.setState({channelType: $(button).attr('data-channeltype')});
         });
-    },
-    componentWillUnmount: function() {
-        ChannelStore.removeMoreChangeListener(this._onChange);
-    },
-    _onChange: function() {
+    }
+    componentWillUnmount() {
+        ChannelStore.removeMoreChangeListener(this.onListenerChange);
+    }
+    onListenerChange() {
         var newState = getStateFromStores();
         if (!utils.areStatesEqual(newState.channels, this.state.channels)) {
             this.setState(newState);
         }
-    },
-    getInitialState: function() {
-        var initState = getStateFromStores();
-        initState.channelType = '';
-        return initState;
-    },
-    handleJoin: function(id) {
+    }
+    handleJoin(id) {
         client.joinChannel(id,
-            function(data) {
+            function joinSuccess(data) {
                 $(this.refs.modal.getDOMNode()).modal('hide');
                 asyncClient.getChannel(id);
                 utils.switchChannel(data);
             }.bind(this),
-            function(err) {
+            function joinFail(err) {
                 this.state.serverError = err.message;
                 this.setState(this.state);
             }.bind(this)
         );
-    },
-    handleNewChannel: function() {
+    }
+    handleNewChannel() {
         $(this.refs.modal.getDOMNode()).modal('hide');
-    },
-    render: function() {
+    }
+    render() {
         var serverError;
         if (this.state.serverError) {
             serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
         }
 
-        var outter = this;
+        var self = this;
         var moreChannels;
 
         if (this.state.channels != null) {
@@ -82,7 +86,12 @@ module.exports = React.createClass({
                                                 <p className='more-channel-name'>{channel.display_name}</p>
                                                 <p className='more-channel-description'>{channel.description}</p>
                                             </td>
-                                            <td className='td--action'><button onClick={outter.handleJoin.bind(outter, channel.id)} className='btn btn-primary'>Join</button></td>
+                                            <td className='td--action'>
+                                                <button
+                                                    onClick={self.handleJoin.bind(self, channel.id)}
+                                                    className='btn btn-primary'>Join
+                                                </button>
+                                            </td>
                                         </tr>
                                     );
                                 })}
@@ -103,23 +112,47 @@ module.exports = React.createClass({
         }
 
         return (
-            <div className='modal fade' id='more_channels' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'>
+            <div
+                className='modal fade'
+                id='more_channels'
+                ref='modal'
+                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'>
+                            <button
+                                type='button'
+                                className='close'
+                                data-dismiss='modal'
+                            >
                                 <span aria-hidden='true'>&times;</span>
                                 <span className='sr-only'>Close</span>
                             </button>
                             <h4 className='modal-title'>More Channels</h4>
-                            <button data-toggle='modal' data-target='#new_channel' data-channeltype={this.state.channelType} type='button' className='btn btn-primary channel-create-btn' onClick={this.handleNewChannel}>Create New Channel</button>
+                            <button
+                                data-toggle='modal'
+                                data-target='#new_channel'
+                                data-channeltype={this.state.channelType}
+                                type='button'
+                                className='btn btn-primary channel-create-btn'
+                                onClick={this.handleNewChannel}>Create New Channel
+                            </button>
                         </div>
                         <div className='modal-body'>
                             {moreChannels}
                             {serverError}
                         </div>
                         <div className='modal-footer'>
-                            <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal'
+                            >
+                                Close
+                            </button>
                         </div>
                     </div>
                 </div>
@@ -127,4 +160,4 @@ module.exports = React.createClass({
 
         );
     }
-});
+}