diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-20 12:04:36 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-20 12:13:36 -0700 |
commit | 7fa8f7febcc552befe4399a8e3f2a6397d347016 (patch) | |
tree | af3ac53c1f4b6db51573075b0393f39f7eb2ffa8 /web/react/components | |
parent | 173326941d9f4aa7f907fd6f2615fad8c7511272 (diff) | |
download | chat-7fa8f7febcc552befe4399a8e3f2a6397d347016.tar.gz chat-7fa8f7febcc552befe4399a8e3f2a6397d347016.tar.bz2 chat-7fa8f7febcc552befe4399a8e3f2a6397d347016.zip |
Fixed issue with channel name in url and added loading icon to replace 'Join' button for slow connections
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/more_channels.jsx | 34 |
1 files changed, 24 insertions, 10 deletions
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> ); |