summaryrefslogtreecommitdiffstats
path: root/web/react/components/more_direct_channels.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/more_direct_channels.jsx')
-rw-r--r--web/react/components/more_direct_channels.jsx93
1 files changed, 64 insertions, 29 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 901cd228f..11ddbcbd1 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -3,67 +3,102 @@
var ChannelStore = require('../stores/channel_store.jsx');
var TeamStore = require('../stores/team_store.jsx');
+var Client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
var utils = require('../utils/utils.jsx');
module.exports = React.createClass({
+ displayName: 'MoreDirectChannels',
componentDidMount: function() {
var self = this;
- $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
+ $(this.refs.modal.getDOMNode()).on('show.bs.modal', function showModal(e) {
var button = e.relatedTarget;
- self.setState({ channels: $(button).data('channels') });
+ self.setState({channels: $(button).data('channels')});
});
},
getInitialState: function() {
- return { channels: [] };
+ return {channels: [], loadingDMChannel: -1};
},
render: function() {
var self = this;
- var directMessageItems = this.state.channels.map(function(channel) {
- var badge = "";
- var titleClass = ""
+ var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) {
+ var badge = '';
+ var titleClass = '';
+ var active = '';
+ var handleClick = null;
if (!channel.fake) {
- var active = channel.id === ChannelStore.getCurrentId() ? "active" : "";
+ if (channel.id === ChannelStore.getCurrentId()) {
+ active = 'active';
+ }
if (channel.unread) {
- badge = <span className="badge pull-right small">{channel.unread}</span>;
- badgesActive = true;
- titleClass = "unread-title"
+ badge = <span className='badge pull-right small'>{channel.unread}</span>;
+ titleClass = 'unread-title';
}
- return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username); $(self.refs.modal.getDOMNode()).modal('hide')}}>{badge}{channel.display_name}</a></li>
- );
+
+ handleClick = function clickHandler(e) {
+ e.preventDefault();
+ utils.switchChannel(channel, channel.teammate_username);
+ $(self.refs.modal.getDOMNode()).modal('hide');
+ };
} else {
- return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={TeamStore.getCurrentTeamUrl() + "/channels/"+channel.name}>{badge}{channel.display_name}</a></li>
- );
+ // It's a direct message channel that doesn't exist yet so let's create it now
+ var otherUserId = utils.getUserIdFromChannelName(channel);
+
+ if (self.state.loadingDMChannel === index) {
+ badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>;
+ }
+
+ if (self.state.loadingDMChannel === -1) {
+ handleClick = function clickHandler(e) {
+ e.preventDefault();
+ self.setState({loadingDMChannel: index});
+
+ Client.createDirectChannel(channel, otherUserId,
+ function success(data) {
+ $(self.refs.modal.getDOMNode()).modal('hide');
+ self.setState({loadingDMChannel: -1});
+ AsyncClient.getChannel(data.id);
+ utils.switchChannel(data);
+ },
+ function error() {
+ self.setState({loadingDMChannel: -1});
+ window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
+ }
+ );
+ };
+ }
}
+
+ return (
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li>
+ );
});
return (
- <div className="modal fade" id="more_direct_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>
+ <div className='modal fade' id='more_direct_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 Private Messages</h4>
+ <h4 className='modal-title'>More Private Messages</h4>
</div>
- <div className="modal-body">
- <ul className="nav nav-pills nav-stacked">
+ <div className='modal-body'>
+ <ul className='nav nav-pills nav-stacked'>
{directMessageItems}
</ul>
</div>
- <div className="modal-footer">
- <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+ <div className='modal-footer'>
+ <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
-
);
}
});