Fix autocomplete for old mechanisms and add partial fix for channel switcher (#4279)

6 files changed, 78 insertions, 50 deletions

diff --git a/webapp/actions/channel_actions.jsx b/webapp/actions/channel_actions.jsx
index 8364fe9b6..61c839652 100644
--- a/webapp/actions/channel_actions.jsx
+++ b/webapp/actions/channel_actions.jsx
@@ -118,7 +118,7 @@ export function removeUserFromChannel(channelId, userId, success, error) {
 
 export function openDirectChannelToUser(user, success, error) {
     const channelName = Utils.getDirectChannelName(UserStore.getCurrentId(), user.id);
-    let channel = ChannelStore.getByName(channelName);
+    const channel = ChannelStore.getByName(channelName);
 
     if (channel) {
         PreferenceStore.setPreference(Preferences.CATEGORY_DIRECT_CHANNEL_SHOW, user.id, 'true');
@@ -137,16 +137,6 @@ export function openDirectChannelToUser(user, success, error) {
         return;
     }
 
-    channel = {
-        name: channelName,
-        last_post_at: 0,
-        total_msg_count: 0,
-        type: 'D',
-        display_name: user.username,
-        teammate_id: user.id,
-        status: UserStore.getStatus(user.id)
-    };
-
     Client.createDirectChannel(
         user.id,
         (data) => {
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx
index 7d15a9c45..17193d196 100644
--- a/webapp/components/channel_switch_modal.jsx
+++ b/webapp/components/channel_switch_modal.jsx
@@ -18,6 +18,7 @@ import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
 import $ from 'jquery';
+
 export default class SwitchChannelModal extends React.Component {
     constructor() {
         super();
@@ -28,6 +29,8 @@ export default class SwitchChannelModal extends React.Component {
         this.onExited = this.onExited.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.switchToChannel = this.switchToChannel.bind(this);
+
         this.suggestionProviders = [new SwitchChannelProvider()];
 
         this.state = {
@@ -92,16 +95,21 @@ export default class SwitchChannelModal extends React.Component {
                     user,
                     (ch) => {
                         channel = ch;
+                        this.switchToChannel(channel);
                     },
                     () => {
                         channel = null;
+                        this.switchToChannel(channel);
                     }
                 );
             }
         } else {
             channel = ChannelStore.getByName(this.state.text.trim());
+            this.switchToChannel(channel);
         }
+    }
 
+    switchToChannel(channel) {
         if (channel !== null) {
             goToChannel(channel);
             this.onHide();
diff --git a/webapp/components/suggestion/channel_mention_provider.jsx b/webapp/components/suggestion/channel_mention_provider.jsx
index 17dbb6e48..0058bcc73 100644
--- a/webapp/components/suggestion/channel_mention_provider.jsx
+++ b/webapp/components/suggestion/channel_mention_provider.jsx
@@ -124,6 +124,7 @@ export default class ChannelMentionProvider {
 
             const mentions = wrapped.map((item) => '!' + item.channel.name);
 
+            SuggestionStore.clearSuggestions(suggestionId);
             SuggestionStore.addSuggestions(suggestionId, mentions, wrapped, ChannelMentionSuggestion, captured[2]);
         }
     }
diff --git a/webapp/components/suggestion/emoticon_provider.jsx b/webapp/components/suggestion/emoticon_provider.jsx
index af8cac070..2af61ea9e 100644
--- a/webapp/components/suggestion/emoticon_provider.jsx
+++ b/webapp/components/suggestion/emoticon_provider.jsx
@@ -91,6 +91,7 @@ export default class EmoticonProvider {
             const terms = matched.map((emoticon) => ':' + emoticon.name + ':');
 
             if (terms.length > 0) {
+                SuggestionStore.clearSuggestions(suggestionId);
                 SuggestionStore.addSuggestions(suggestionId, terms, matched, EmoticonSuggestion, text);
 
                 hasSuggestions = true;
diff --git a/webapp/components/suggestion/search_channel_provider.jsx b/webapp/components/suggestion/search_channel_provider.jsx
index 1bfcda77d..0f07b6e29 100644
--- a/webapp/components/suggestion/search_channel_provider.jsx
+++ b/webapp/components/suggestion/search_channel_provider.jsx
@@ -58,6 +58,7 @@ export default class SearchChannelProvider {
             privateChannels.sort((a, b) => a.name.localeCompare(b.name));
             const privateChannelNames = privateChannels.map((channel) => channel.name);
 
+            SuggestionStore.clearSuggestions(suggestionId);
             SuggestionStore.addSuggestions(suggestionId, publicChannelNames, publicChannels, SearchChannelSuggestion, channelPrefix);
             SuggestionStore.addSuggestions(suggestionId, privateChannelNames, privateChannels, SearchChannelSuggestion, channelPrefix);
         }
diff --git a/webapp/components/suggestion/switch_channel_provider.jsx b/webapp/components/suggestion/switch_channel_provider.jsx
index 94622b536..8921399ce 100644
--- a/webapp/components/suggestion/switch_channel_provider.jsx
+++ b/webapp/components/suggestion/switch_channel_provider.jsx
@@ -1,15 +1,18 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
+import Suggestion from './suggestion.jsx';
 
 import ChannelStore from 'stores/channel_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 {autocompleteUsersInTeam} from 'actions/user_actions.jsx';
+
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
+import {Constants, ActionTypes} from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';
 
+import React from 'react';
+
 class SwitchChannelSuggestion extends Suggestion {
     render() {
         const {item, isSelection} = this.props;
@@ -31,8 +34,6 @@ class SwitchChannelSuggestion extends Suggestion {
             icon = <div className='status'><i className='fa fa-globe'/></div>;
         } else if (item.type === Constants.PRIVATE_CHANNEL) {
             icon = <div className='status'><i className='fa fa-lock'/></div>;
-        } else {
-            icon = <StatusIcon status={item.status}/>;
         }
 
         return (
@@ -48,46 +49,72 @@ class SwitchChannelSuggestion extends Suggestion {
 }
 
 export default class SwitchChannelProvider {
+    constructor() {
+        this.timeoutId = '';
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeoutId);
+    }
+
     handlePretextChanged(suggestionId, channelPrefix) {
         if (channelPrefix) {
             const allChannels = ChannelStore.getAll();
             const channels = [];
 
-            for (const id of Object.keys(allChannels)) {
-                const channel = allChannels[id];
-                if (channel.display_name.toLowerCase().startsWith(channelPrefix.toLowerCase())) {
-                    channels.push(channel);
-                }
-
-                // TODO: Fix with  auto-complete refactor
-                /*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: otherUser.username,
-                        name: otherUser.username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
-                        type: Constants.DM_CHANNEL,
-                        status: UserStore.getStatus(otherUser.id) || 'offline'
-                    };
-                    channels.push(newChannel);
-                }*/
-            }
+            function autocomplete() {
+                autocompleteUsersInTeam(
+                    channelPrefix,
+                    (data) => {
+                        const users = data.in_team;
 
-            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);
-            });
+                        for (const id of Object.keys(allChannels)) {
+                            const channel = allChannels[id];
+                            if (channel.display_name.toLowerCase().startsWith(channelPrefix.toLowerCase())) {
+                                channels.push(channel);
+                            }
+                        }
+
+                        for (let i = 0; i < users.length; i++) {
+                            const user = users[i];
+                            const newChannel = {
+                                display_name: user.username,
+                                name: user.username + ' ' + Utils.localizeMessage('channel_switch_modal.dm', '(Direct Message)'),
+                                type: Constants.DM_CHANNEL
+                            };
+                            channels.push(newChannel);
+                        }
 
-            const channelNames = channels.map((channel) => channel.name);
+                        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);
+                        });
+
+                        const channelNames = channels.map((channel) => channel.name);
+
+                        AppDispatcher.handleServerAction({
+                            type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+                            id: suggestionId,
+                            matchedPretext: channelPrefix,
+                            terms: channelNames,
+                            items: channels,
+                            component: SwitchChannelSuggestion
+                        });
+                    }
+                );
+            }
 
-            SuggestionStore.addSuggestions(suggestionId, channelNames, channels, SwitchChannelSuggestion, channelPrefix);
+            this.timeoutId = setTimeout(
+                autocomplete.bind(this),
+                Constants.AUTOCOMPLETE_TIMEOUT
+            );
         }
     }
 }