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
119
120
121
122
123
124
125
126
127
128
129
|
// 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 ChannelStore = require('../stores/channel_store.jsx');
var LoadingScreen = require('./loading_screen.jsx');
function getStateFromStores() {
return {
channels: ChannelStore.getMoreAll(),
serverError: null
};
}
module.exports = React.createClass({
displayName: 'MoreChannelsModal',
componentDidMount: function() {
ChannelStore.addMoreChangeListener(this._onChange);
$(this.refs.modal.getDOMNode()).on('shown.bs.modal', function shown() {
asyncClient.getMoreChannels(true);
});
var self = this;
$(this.refs.modal.getDOMNode()).on('show.bs.modal', function show(e) {
var button = e.relatedTarget;
self.setState({channelType: $(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.channelType = '';
return initState;
},
handleJoin: function(id) {
client.joinChannel(id,
function() {
$(this.refs.modal.getDOMNode()).modal('hide');
asyncClient.getChannel(id);
}.bind(this),
function(err) {
this.state.serverError = err.message;
this.setState(this.state);
}.bind(this)
);
},
handleNewChannel: function() {
$(this.refs.modal.getDOMNode()).modal('hide');
},
render: function() {
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 moreChannels;
if (this.state.channels != null) {
var channels = this.state.channels;
if (!channels.loading) {
if (channels.length) {
moreChannels = (
<table className='more-channel-table table'>
<tbody>
{moreChannels.map(function cMap(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>
);
} else {
moreChannels = (
<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>
);
}
} else {
moreChannels = <LoadingScreen />;
}
}
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.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>
</div>
</div>
</div>
</div>
);
}
});
|
