1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
// 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');
var LoadingScreen = require('./loading_screen.jsx');
function getStateFromStores() {
return {
channels: ChannelStore.getMoreAll(),
server_error: null
};
}
module.exports = React.createClass({
displayName: "MoreChannelsModal",
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;
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">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">
<span aria-hidden="true">×</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">
{!moreChannels.loading ?
(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="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>)
: <LoadingScreen /> }
{ server_error }
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
);
}
});
|
