Added feature to the 'More...' PM channel list and fixed small cosmetic issues

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 (
+                if (self.state.loadingDMChannel === index) {
-                    <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}>{badge}{channel.display_name}</a></li>
+                    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>
             );
         });
 

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;
                 }
-
+                status = <span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} />;
-                if (self.state.loadingPMChannel === index) {
-                    status = <img className='channel-loading-gif' src='/static/images/load.gif'/>;
-                } else {
-                    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
+                // It's a direct message channel that doesn't exist yet so let's create it now
-                var ids = channel.name.split('__');
+                var otherUserId = utils.getUserIdFromChannelName(channel);
-                var otherUserId = '';
+
-                if (ids[0] === UserStore.getCurrentId()) {
+                if (self.state.loadingDMChannel === -1) {
-                    otherUserId = ids[1];
+                    handleClick = function clickHandler(e) {
-                } else {
+                        e.preventDefault();
-                    otherUserId = ids[0];
+                        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 (

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);
         }
     });

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;
+};

web/sass-files/sass/partials/_sidebar--left.scss

@@ -126,4 +126,5 @@
 .channel-loading-gif {
     height:15px;
     width:15px;
+    margin-top:2px;
 }