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