diff options
author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-14 18:26:09 -0700 |
---|---|---|
committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-08-18 08:47:14 -0700 |
commit | f2b06cfc7c847f687582b1855959fdd885e3fac8 (patch) | |
tree | a92fa666bd612dd077378d02db6dfd84bc28ff1b /web | |
parent | 56eeb2f6efd04a8ff7b9f6aec18cda5089db1b28 (diff) | |
download | chat-f2b06cfc7c847f687582b1855959fdd885e3fac8.tar.gz chat-f2b06cfc7c847f687582b1855959fdd885e3fac8.tar.bz2 chat-f2b06cfc7c847f687582b1855959fdd885e3fac8.zip |
Added feature to the 'More...' PM channel list and fixed small cosmetic issues
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/more_direct_channels.jsx | 37 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 55 | ||||
-rw-r--r-- | web/react/utils/client.jsx | 4 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 15 | ||||
-rw-r--r-- | 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 ( - <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; } |