summaryrefslogtreecommitdiffstats
path: root/web/react/components/more_channels.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/more_channels.jsx')
-rw-r--r--web/react/components/more_channels.jsx109
1 files changed, 109 insertions, 0 deletions
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
new file mode 100644
index 000000000..be2a5e93c
--- /dev/null
+++ b/web/react/components/more_channels.jsx
@@ -0,0 +1,109 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+
+var utils = require('../utils/utils.jsx');
+var client = require('../utils/client.jsx');
+var asyncClient = require('../utils/async_client.jsx');
+var UserStore = require('../stores/user_store.jsx');
+var ChannelStore = require('../stores/channel_store.jsx');
+
+function getStateFromStores() {
+ return {
+ channels: ChannelStore.getMoreAll(),
+ server_error: null
+ };
+}
+
+module.exports = React.createClass({
+ componentDidMount: function() {
+ ChannelStore.addMoreChangeListener(this._onChange);
+ $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
+ asyncClient.getMoreChannels(true);
+ });
+
+ var self = this;
+ $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+ var button = e.relatedTarget;
+ self.setState({ channel_type: $(button).attr('data-channeltype') });
+ });
+ },
+ componentWillUnmount: function() {
+ ChannelStore.removeMoreChangeListener(this._onChange);
+ },
+ _onChange: function() {
+ var newState = getStateFromStores();
+ if (!utils.areStatesEqual(newState.channels, this.state.channels)) {
+ this.setState(newState);
+ }
+ },
+ getInitialState: function() {
+ var initState = getStateFromStores();
+ initState.channel_type = "";
+ return initState;
+ },
+ handleJoin: function(e) {
+ var self = this;
+ client.joinChannel(e,
+ function(data) {
+ $(self.refs.modal.getDOMNode()).modal('hide');
+ asyncClient.getChannels(true);
+ }.bind(this),
+ function(err) {
+ this.state.server_error = err.message;
+ this.setState(this.state);
+ }.bind(this)
+ );
+ },
+ handleNewChannel: function() {
+ $(this.refs.modal.getDOMNode()).modal('hide');
+ },
+ 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;
+
+ return (
+ <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">
+ <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.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>
+ </div>}
+ { server_error }
+ </div>
+ <div className="modal-footer">
+ <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ );
+ }
+});