Added icons next to channels in channel switcher (#3663)

webapp/components/suggestion/switch_channel_provider.jsx

@@ -4,9 +4,11 @@
 import React from 'react';
 
 import ChannelStore from 'stores/channel_store.jsx';
+import UserStore from 'stores/user_store.jsx';
 import SuggestionStore from 'stores/suggestion_store.jsx';
 import Suggestion from './suggestion.jsx';
 import Constants from 'utils/constants.jsx';
+import StatusIcon from 'components/status_icon.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 class SwitchChannelSuggestion extends Suggestion {
@@ -25,11 +27,21 @@ class SwitchChannelSuggestion extends Suggestion {
             displayName = item.display_name + ' (' + item.name + ')';
         }
 
+        let icon = null;
+        if (item.type === Constants.OPEN_CHANNEL) {
+            icon = <div className='status'><i className='fa fa-globe'></i></div>;
+        } else if (item.type === Constants.PRIVATE_CHANNEL) {
+            icon = <div className='status'><i className='fa fa-lock'></i></div>;
+        } else {
+            icon = <StatusIcon status={item.status}/>;
+        }
+
         return (
             <div
                 onClick={this.handleClick}
                 className={className}
             >
+            {icon}
             {displayName}
             </div>
         );
@@ -48,10 +60,12 @@ export default class SwitchChannelProvider {
                     channels.push(channel);
                 } else if (channel.type === Constants.DM_CHANNEL && Utils.getDirectTeammate(channel.id).username.startsWith(channelPrefix.toLowerCase())) {
                     // New channel to not modify existing channel
+                    const otherUser = Utils.getDirectTeammate(channel.id);
                     const newChannel = {
-                        display_name: Utils.getDirectTeammate(channel.id).username,
+                        display_name: otherUser.username,
-                        name: Utils.getDirectTeammate(channel.id).username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
+                        name: otherUser.username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
-                        type: Constants.DM_CHANNEL
+                        type: Constants.DM_CHANNEL,
+                        status: UserStore.getStatus(otherUser.id) || 'offline'
                     };
                     channels.push(newChannel);
                 }
@@ -59,6 +73,11 @@ export default class SwitchChannelProvider {
 
             channels.sort((a, b) => {
                 if (a.display_name === b.display_name) {
+                    if (a.type !== Constants.DM_CHANNEL && b.type === Constants.DM_CHANNEL) {
+                        return -1;
+                    } else if (a.type === Constants.DM_CHANNEL && b.type !== Constants.DM_CHANNEL) {
+                        return 1;
+                    }
                     return a.name.localeCompare(b.name);
                 }
                 return a.display_name.localeCompare(b.display_name);