summaryrefslogtreecommitdiffstats
path: root/web/react/components
diff options
context:
space:
mode:
authorasaadmahmoodspin <asaad@battlehouse.com>2015-07-08 22:39:44 +0500
committerasaadmahmoodspin <asaad@battlehouse.com>2015-07-08 22:39:44 +0500
commitc721a3deace26222d96f3b6e1dcba9efba803997 (patch)
treeb82294d6327f5eecfd921568c92f511eafeb68c4 /web/react/components
parent37fbd62a7c47261f1d922844faaa2c96cce5f0d6 (diff)
parentff4b94f02b038bf754ba3fcb00b7dd2a421a2d71 (diff)
downloadchat-c721a3deace26222d96f3b6e1dcba9efba803997.tar.gz
chat-c721a3deace26222d96f3b6e1dcba9efba803997.tar.bz2
chat-c721a3deace26222d96f3b6e1dcba9efba803997.zip
Merge pull request #1 from rgarmsen2295/mm-1469
MM-1469 Added loading animation logic to the "Get More Channels Menu" ("More...")
Diffstat (limited to 'web/react/components')
-rw-r--r--web/react/components/more_channels.jsx51
1 files changed, 32 insertions, 19 deletions
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index be2a5e93c..dad0a644a 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -61,6 +61,10 @@ module.exports = React.createClass({
render: function() {
var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
var outter = this;
+ var moreChannels;
+
+ if (this.state.channels != null)
+ moreChannels = this.state.channels;
return (
<div className="modal fade" id="more_channels" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
@@ -75,25 +79,34 @@ module.exports = React.createClass({
<button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
</div>
<div className="modal-body">
- {this.state.channels.length ?
- <table className="more-channel-table table">
- <tbody>
- {this.state.channels.map(function(channel) {
- 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="pull-right btn btn-primary">Join</button></td>
- </tr>
- )
- })}
- </tbody>
- </table>
- : <div className="no-channel-message">
- <p className="primary-message">No more channels to join</p>
- <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
+ {moreChannels ?
+ (moreChannels.length ?
+ <table className="more-channel-table table">
+ <tbody>
+ {moreChannels.map(function(channel) {
+ 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="pull-right btn btn-primary">Join</button></td>
+ </tr>
+ )
+ })}
+ </tbody>
+ </table>
+ : <div className="no-channel-message">
+ <p className="primary-message">No more channels to join</p>
+ <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
+ </div>)
+ : <div ref="loadingscreen" className="channel-loading-message">
+ <div className="loading__content">
+ <h3>Loading</h3>
+ <div id="round_1" className="round"></div>
+ <div id="round_2" className="round"></div>
+ <div id="round_3" className="round"></div>
+ </div>
</div>}
{ server_error }
</div>