summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/react/components/more_direct_channels.jsx37
-rw-r--r--web/react/components/sidebar.jsx55
-rw-r--r--web/react/utils/client.jsx4
-rw-r--r--web/react/utils/utils.jsx15
-rw-r--r--web/sass-files/sass/partials/_sidebar--left.scss1
5 files changed, 72 insertions, 40 deletions
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 65bf2d988..11ddbcbd1 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -3,6 +3,8 @@
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({
@@ -15,12 +17,12 @@ module.exports = React.createClass({
});
},
getInitialState: function() {
- return {channels: []};
+ return {channels: [], loadingDMChannel: -1};
},
render: function() {
var self = this;
- var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel) {
+ var directMessageItems = this.state.channels.map(function mapActivityToChannel(channel, index) {
var badge = '';
var titleClass = '';
var active = '';
@@ -41,14 +43,37 @@ module.exports = React.createClass({
utils.switchChannel(channel, channel.teammate_username);
$(self.refs.modal.getDOMNode()).modal('hide');
};
+ } else {
+ // It's a direct message channel that doesn't exist yet so let's create it now
+ var otherUserId = utils.getUserIdFromChannelName(channel);
- return (
- <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li>
- );
+ 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={TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name}>{badge}{channel.display_name}</a></li>
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li>
);
});
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 6883cd4f0..d79505e9e 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -286,7 +286,7 @@ module.exports = React.createClass({
},
getInitialState: function() {
var newState = getStateFromStores();
- newState.loadingPMChannel = -1;
+ newState.loadingDMChannel = -1;
return newState;
},
@@ -339,6 +339,8 @@ module.exports = React.createClass({
badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
}
+ } else if (self.state.loadingDMChannel === index && channel.type === 'D') {
+ badge = <img className='channel-loading-gif pull-right' src='/static/images/load.gif'/>;
}
// set up status icon for direct message channels
@@ -352,12 +354,7 @@ module.exports = React.createClass({
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
-
- if (self.state.loadingPMChannel === index) {
- status = <img className='channel-loading-gif' src='/static/images/load.gif'/>;
- } else {
- status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
- }
+ status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
}
// set up click handler to switch channels (or create a new channel for non-existant ones)
@@ -371,31 +368,27 @@ module.exports = React.createClass({
utils.switchChannel(channel);
};
} else if (channel.fake && teamURL) {
- // It's a direct message channel that doesn't exist yet so let's create it
- var ids = channel.name.split('__');
- var otherUserId = '';
- if (ids[0] === UserStore.getCurrentId()) {
- otherUserId = ids[1];
- } else {
- otherUserId = ids[0];
+ // 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 === -1) {
+ handleClick = function clickHandler(e) {
+ e.preventDefault();
+ self.setState({loadingDMChannel: index});
+
+ Client.createDirectChannel(channel, otherUserId,
+ function success(data) {
+ 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;
+ }
+ );
+ };
}
-
- handleClick = function clickHandler(e) {
- e.preventDefault();
- self.setState({loadingPMChannel: index});
-
- Client.createPMChannelIfNotExists(channel, otherUserId,
- function success(data) {
- self.setState({loadingPMChannel: -1});
- AsyncClient.getChannel(data.id);
- utils.switchChannel(data);
- },
- function error() {
- self.setState({loadingPMChannel: -1});
- window.location.href = teamURL + '/channels/' + channel.name;
- }
- );
- };
}
return (
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index 1b9ad942e..da0b74081 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -438,7 +438,7 @@ module.exports.createChannel = function(channel, success, error) {
module.exports.track('api', 'api_channels_create', channel.type, 'name', channel.name);
};
-module.exports.createPMChannelIfNotExists = function(channel, userId, success, error) {
+module.exports.createDirectChannel = function(channel, userId, success, error) {
$.ajax({
url: '/api/v1/channels/create_direct',
dataType: 'json',
@@ -447,7 +447,7 @@ module.exports.createPMChannelIfNotExists = function(channel, userId, success, e
data: JSON.stringify({user_id: userId}),
success: success,
error: function(xhr, status, err) {
- var e = handleError('createPMIfNotExists', xhr, status, err);
+ var e = handleError('createDirectChannel', xhr, status, err);
error(e);
}
});
diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx
index 32793809d..f1fd3da67 100644
--- a/web/react/utils/utils.jsx
+++ b/web/react/utils/utils.jsx
@@ -964,4 +964,17 @@ module.exports.generateId = function() {
module.exports.isBrowserFirefox = function() {
return navigator && navigator.userAgent && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-}
+};
+
+// Used to get the id of the other user from a DM channel
+module.exports.getUserIdFromChannelName = function(channel) {
+ var ids = channel.name.split('__');
+ var otherUserId = '';
+ if (ids[0] === UserStore.getCurrentId()) {
+ otherUserId = ids[1];
+ } else {
+ otherUserId = ids[0];
+ }
+
+ return otherUserId;
+};
diff --git a/web/sass-files/sass/partials/_sidebar--left.scss b/web/sass-files/sass/partials/_sidebar--left.scss
index a38d4e1f0..6d9f2ad8b 100644
--- a/web/sass-files/sass/partials/_sidebar--left.scss
+++ b/web/sass-files/sass/partials/_sidebar--left.scss
@@ -126,4 +126,5 @@
.channel-loading-gif {
height:15px;
width:15px;
+ margin-top:2px;
}
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-06-30 13:45:11 +0000