1 files changed, 80 insertions, 32 deletions

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 5261ed6a7..2b2c8b68d 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -14,11 +14,21 @@ 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 = '';
+        initState.joiningChannel = -1;
+        this.state = initState;
+    }
+    componentDidMount() {
+        ChannelStore.addMoreChangeListener(this.onListenerChange);
         $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() {
             asyncClient.getMoreChannels(true);
         });
@@ -28,43 +38,42 @@ 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) {
-        client.joinChannel(id,
-            function() {
+    }
+    handleJoin(channel, channelIndex) {
+        this.setState({joiningChannel: channelIndex});
+        client.joinChannel(channel.id,
+            function joinSuccess() {
                 $(this.refs.modal.getDOMNode()).modal('hide');
-                asyncClient.getChannel(id);
+                asyncClient.getChannel(channel.id);
+                utils.switchChannel(channel);
+                this.setState({joiningChannel: -1});
             }.bind(this),
-            function(err) {
+            function joinFail(err) {
+                this.setState({joiningChannel: -1});
                 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) {
@@ -74,14 +83,29 @@ module.exports = React.createClass({
                     moreChannels = (
                         <table className='more-channel-table table'>
                             <tbody>
-                                {channels.map(function cMap(channel) {
+                                {channels.map(function cMap(channel, index) {
+                                    var joinButton;
+                                    if (self.state.joiningChannel === index) {
+                                        joinButton = (<img
+                                                        className='join-channel-loading-gif'
+                                                        src='/static/images/load.gif'
+                                                    />);
+                                    } else {
+                                        joinButton = (<button
+                                                        onClick={self.handleJoin.bind(self, channel, index)}
+                                                        className='btn btn-primary'>Join
+                                                    </button>);
+                                    }
+
                                     return (
                                         <tr key={channel.id}>
                                             <td>
                                                 <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'>
+                                                {joinButton}
+                                            </td>
                                         </tr>
                                     );
                                 })}
@@ -102,23 +126,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>
@@ -126,4 +174,4 @@ module.exports = React.createClass({
 
         );
     }
-});
+}