From f2b06cfc7c847f687582b1855959fdd885e3fac8 Mon Sep 17 00:00:00 2001 From: Reed Garmsen Date: Fri, 14 Aug 2015 18:26:09 -0700 Subject: Added feature to the 'More...' PM channel list and fixed small cosmetic issues --- web/react/components/more_direct_channels.jsx | 37 +++++++++++++--- web/react/components/sidebar.jsx | 55 +++++++++++------------- web/react/utils/client.jsx | 4 +- web/react/utils/utils.jsx | 15 ++++++- web/sass-files/sass/partials/_sidebar--left.scss | 1 + 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 ( -
  • {badge}{channel.display_name}
    • - ); + if (self.state.loadingDMChannel === index) { + badge = ; + } + + 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 ( -
  • {badge}{channel.display_name}
    • +
  • {badge}{channel.display_name}
    • ); }); 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 = {channelMember.mention_count}; badgesActive = true; } + } else if (self.state.loadingDMChannel === index && channel.type === 'D') { + badge = ; } // 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 = ; - } else { - status = ; - } + status = ; } // 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; } -- cgit v1.2.3-1-g7c22