From d1955b982c32dfa7a1eff9988b4570cb870fa8df Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Thu, 20 Aug 2015 09:46:51 -0700
Subject: Users are now placed in the channel after joining it from the
 'More...' channel menu

---
 web/react/components/more_channels.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'web')

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 5261ed6a7..56366cde4 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -45,9 +45,10 @@ module.exports = React.createClass({
     },
     handleJoin: function(id) {
         client.joinChannel(id,
-            function() {
+            function(data) {
                 $(this.refs.modal.getDOMNode()).modal('hide');
                 asyncClient.getChannel(id);
+                utils.switchChannel(data);
             }.bind(this),
             function(err) {
                 this.state.serverError = err.message;
-- 
cgit v1.2.3-1-g7c22


From 173326941d9f4aa7f907fd6f2615fad8c7511272 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Thu, 20 Aug 2015 11:40:53 -0700
Subject: Cosmetic reformatting of more_channels.jsx

---
 web/react/components/more_channels.jsx | 91 +++++++++++++++++++++++-----------
 1 file changed, 62 insertions(+), 29 deletions(-)

(limited to 'web')

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 56366cde4..bc634ba55 100644
--- a/web/react/components/more_channels.jsx
+++ b/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({
 
         );
     }
-});
+}
-- 
cgit v1.2.3-1-g7c22


From 7fa8f7febcc552befe4399a8e3f2a6397d347016 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Thu, 20 Aug 2015 12:04:36 -0700
Subject: Fixed issue with channel name in url and added loading icon to
 replace 'Join' button for slow connections

---
 web/react/components/more_channels.jsx           | 34 +++++++++++++++++-------
 web/sass-files/sass/partials/_sidebar--left.scss | 14 +++++++---
 2 files changed, 35 insertions(+), 13 deletions(-)

(limited to 'web')

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index bc634ba55..2b2c8b68d 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -24,6 +24,7 @@ export default class MoreChannels extends React.Component {
 
         var initState = getStateFromStores();
         initState.channelType = '';
+        initState.joiningChannel = -1;
         this.state = initState;
     }
     componentDidMount() {
@@ -47,14 +48,17 @@ export default class MoreChannels extends React.Component {
             this.setState(newState);
         }
     }
-    handleJoin(id) {
-        client.joinChannel(id,
-            function joinSuccess(data) {
+    handleJoin(channel, channelIndex) {
+        this.setState({joiningChannel: channelIndex});
+        client.joinChannel(channel.id,
+            function joinSuccess() {
                 $(this.refs.modal.getDOMNode()).modal('hide');
-                asyncClient.getChannel(id);
-                utils.switchChannel(data);
+                asyncClient.getChannel(channel.id);
+                utils.switchChannel(channel);
+                this.setState({joiningChannel: -1});
             }.bind(this),
             function joinFail(err) {
+                this.setState({joiningChannel: -1});
                 this.state.serverError = err.message;
                 this.setState(this.state);
             }.bind(this)
@@ -79,7 +83,20 @@ export default class MoreChannels extends React.Component {
                     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>
@@ -87,10 +104,7 @@ export default class MoreChannels extends React.Component {
                                                 <p className='more-channel-description'>{channel.description}</p>
                                             </td>
                                             <td className='td--action'>
-                                                <button
-                                                    onClick={self.handleJoin.bind(self, channel.id)}
-                                                    className='btn btn-primary'>Join
-                                                </button>
+                                                {joinButton}
                                             </td>
                                         </tr>
                                     );
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index 6d9f2ad8b..7bbaa21cb 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -124,7 +124,15 @@
 }
 
 .channel-loading-gif {
-    height:15px;
-    width:15px;
-    margin-top:2px;
+    height: 15px;
+    width: 15px;
+    margin-top: 2px;
+}
+
+.join-channel-loading-gif {
+    margin-top: 5px;
+    margin-left: 10px;
+    height: 25px;
+    width: 25px;
+
 }
-- 
cgit v1.2.3-1-g7c22