1 files changed, 58 insertions, 18 deletions

diff --git a/webapp/components/suggestion/search_user_provider.jsx b/webapp/components/suggestion/search_user_provider.jsx
index b5466cf39..baf91cd94 100644
--- a/webapp/components/suggestion/search_user_provider.jsx
+++ b/webapp/components/suggestion/search_user_provider.jsx
@@ -1,13 +1,16 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
+import Suggestion from './suggestion.jsx';
 
+import {autocompleteUsersInTeam} from 'actions/user_actions.jsx';
+
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import Client from 'client/web_client.jsx';
-import SuggestionStore from 'stores/suggestion_store.jsx';
-import UserStore from 'stores/user_store.jsx';
+import * as Utils from 'utils/utils.jsx';
+import {Constants, ActionTypes} from 'utils/constants.jsx';
 
-import Suggestion from './suggestion.jsx';
+import React from 'react';
 
 class SearchUserSuggestion extends Suggestion {
     render() {
@@ -18,6 +21,17 @@ class SearchUserSuggestion extends Suggestion {
             className += ' selected';
         }
 
+        const username = item.username;
+        let description = '';
+
+        if ((item.first_name || item.last_name) && item.nickname) {
+            description = `- ${Utils.getFullName(item)} (${item.nickname})`;
+        } else if (item.nickname) {
+            description = `- (${item.nickname})`;
+        } else if (item.first_name || item.last_name) {
+            description = `- ${Utils.getFullName(item)}`;
+        }
+
         return (
             <div
                 className={className}
@@ -27,34 +41,60 @@ class SearchUserSuggestion extends Suggestion {
                     className='profile-img rounded'
                     src={Client.getUsersRoute() + '/' + item.id + '/image?time=' + item.update_at}
                 />
-                <i className='fa fa fa-plus-square'/>{item.username}
+                <i className='fa fa fa-plus-square'/>
+                <div className='mention--align'>
+                    <span>
+                        {username}
+                    </span>
+                    <span className='mention__fullname'>
+                        {' '}
+                        {description}
+                    </span>
+                </div>
             </div>
         );
     }
 }
 
 export default class SearchUserProvider {
+    constructor() {
+        this.timeoutId = '';
+    }
+
+    componentWillUnmount() {
+        clearTimeout(this.timeoutId);
+    }
+
     handlePretextChanged(suggestionId, pretext) {
+        clearTimeout(this.timeoutId);
+
         const captured = (/\bfrom:\s*(\S*)$/i).exec(pretext.toLowerCase());
         if (captured) {
             const usernamePrefix = captured[1];
 
-            const users = UserStore.getProfiles();
-            let filtered = [];
-
-            for (const id of Object.keys(users)) {
-                const user = users[id];
+            function autocomplete() {
+                autocompleteUsersInTeam(
+                    usernamePrefix,
+                    (data) => {
+                        const users = data.in_team;
+                        const mentions = users.map((user) => user.username);
 
-                if (user.username.startsWith(usernamePrefix)) {
-                    filtered.push(user);
-                }
+                        AppDispatcher.handleServerAction({
+                            type: ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS,
+                            id: suggestionId,
+                            matchedPretext: usernamePrefix,
+                            terms: mentions,
+                            items: users,
+                            component: SearchUserSuggestion
+                        });
+                    }
+                );
             }
 
-            filtered = filtered.sort((a, b) => a.username.localeCompare(b.username));
-
-            const usernames = filtered.map((user) => user.username);
-
-            SuggestionStore.addSuggestions(suggestionId, usernames, filtered, SearchUserSuggestion, usernamePrefix);
+            this.timeoutId = setTimeout(
+                autocomplete.bind(this),
+                Constants.AUTOCOMPLETE_TIMEOUT
+            );
         }
     }
 }