Merge pull request #1579 from hmhealey/plt1298

PLT-1298 Converted Command and @Mention autocomplete to new suggestion components

web/react/stores/search_store.jsx

@@ -12,8 +12,6 @@ var ActionTypes = Constants.ActionTypes;
 var CHANGE_EVENT = 'change';
 var SEARCH_CHANGE_EVENT = 'search_change';
 var SEARCH_TERM_CHANGE_EVENT = 'search_term_change';
-var MENTION_DATA_CHANGE_EVENT = 'mention_data_change';
-var ADD_MENTION_EVENT = 'add_mention';
 var SHOW_SEARCH_EVENT = 'show_search';
 
 class SearchStoreClass extends EventEmitter {
@@ -32,10 +30,6 @@ class SearchStoreClass extends EventEmitter {
         this.addSearchTermChangeListener = this.addSearchTermChangeListener.bind(this);
         this.removeSearchTermChangeListener = this.removeSearchTermChangeListener.bind(this);
 
-        this.emitMentionDataChange = this.emitMentionDataChange.bind(this);
-        this.addMentionDataChangeListener = this.addMentionDataChangeListener.bind(this);
-        this.removeMentionDataChangeListener = this.removeMentionDataChangeListener.bind(this);
-
         this.emitShowSearch = this.emitShowSearch.bind(this);
         this.addShowSearchListener = this.addShowSearchListener.bind(this);
         this.removeShowSearchListener = this.removeShowSearchListener.bind(this);
@@ -113,30 +107,6 @@ class SearchStoreClass extends EventEmitter {
         return BrowserStore.getItem('search_term');
     }
 
-    emitMentionDataChange(id, mentionText) {
-        this.emit(MENTION_DATA_CHANGE_EVENT, id, mentionText);
-    }
-
-    addMentionDataChangeListener(callback) {
-        this.on(MENTION_DATA_CHANGE_EVENT, callback);
-    }
-
-    removeMentionDataChangeListener(callback) {
-        this.removeListener(MENTION_DATA_CHANGE_EVENT, callback);
-    }
-
-    emitAddMention(id, username) {
-        this.emit(ADD_MENTION_EVENT, id, username);
-    }
-
-    addAddMentionListener(callback) {
-        this.on(ADD_MENTION_EVENT, callback);
-    }
-
-    removeAddMentionListener(callback) {
-        this.removeListener(ADD_MENTION_EVENT, callback);
-    }
-
     storeSearchResults(results, isMentionSearch) {
         BrowserStore.setItem('search_results', results);
         BrowserStore.setItem('is_mention_search', Boolean(isMentionSearch));
@@ -157,12 +127,6 @@ SearchStore.dispatchToken = AppDispatcher.register((payload) => {
         SearchStore.storeSearchTerm(action.term);
         SearchStore.emitSearchTermChange(action.do_search, action.is_mention_search);
         break;
-    case ActionTypes.RECIEVED_MENTION_DATA:
-        SearchStore.emitMentionDataChange(action.id, action.mention_text);
-        break;
-    case ActionTypes.RECIEVED_ADD_MENTION:
-        SearchStore.emitAddMention(action.id, action.username);
-        break;
     case ActionTypes.SHOW_SEARCH:
         SearchStore.emitShowSearch();
         break;

web/react/stores/suggestion_store.jsx

@@ -38,6 +38,7 @@ class SuggestionStore extends EventEmitter {
         // items: a list of objects backing the terms which may be used in rendering
         // components: a list of react components that can be used to render their corresponding item
         // selection: the term currently selected by the keyboard
+        // completeOnSpace: whether or not space will trigger the term to be autocompleted
         this.suggestions = new Map();
     }
 
@@ -78,7 +79,8 @@ class SuggestionStore extends EventEmitter {
             terms: [],
             items: [],
             components: [],
-            selection: ''
+            selection: '',
+            completeOnSpace: true
         });
     }
 
@@ -93,6 +95,12 @@ class SuggestionStore extends EventEmitter {
         suggestion.terms = [];
         suggestion.items = [];
         suggestion.components = [];
+        suggestion.completeOnSpace = true;
+    }
+
+    clearSelection(id) {
+        const suggestion = this.suggestions.get(id);
+
         suggestion.selection = '';
     }
 
@@ -112,6 +120,12 @@ class SuggestionStore extends EventEmitter {
         suggestion.matchedPretext = matchedPretext;
     }
 
+    setCompleteOnSpace(id, completeOnSpace) {
+        const suggestion = this.suggestions.get(id);
+
+        suggestion.completeOnSpace = completeOnSpace;
+    }
+
     addSuggestion(id, term, item, component) {
         const suggestion = this.suggestions.get(id);
 
@@ -175,6 +189,10 @@ class SuggestionStore extends EventEmitter {
         return this.suggestions.get(id).selection;
     }
 
+    shouldCompleteOnSpace(id) {
+        return this.suggestions.get(id).completeOnSpace;
+    }
+
     selectNext(id) {
         this.setSelectionByDelta(id, 1);
     }
@@ -218,11 +236,13 @@ class SuggestionStore extends EventEmitter {
             this.emitSuggestionsChanged(id);
             break;
         case ActionTypes.SUGGESTION_RECEIVED_SUGGESTIONS:
-            this.setMatchedPretext(id, other.matchedPretext);
-            this.addSuggestions(id, other.terms, other.items, other.componentType);
+            if (other.matchedPretext === this.getMatchedPretext(id)) {
+                // ensure the matched pretext hasn't changed so that we don't receive suggestions for outdated pretext
+                this.addSuggestions(id, other.terms, other.items, other.component);
 
-            this.ensureSelectionExists(id);
-            this.emitSuggestionsChanged(id);
+                this.ensureSelectionExists(id);
+                this.emitSuggestionsChanged(id);
+            }
             break;
         case ActionTypes.SUGGESTION_SELECT_NEXT:
             this.selectNext(id);
@@ -237,10 +257,11 @@ class SuggestionStore extends EventEmitter {
 
             this.setPretext(id, '');
             this.clearSuggestions(id);
+            this.clearSelection(id);
             this.emitSuggestionsChanged(id);
             break;
         }
     }
 }
 
-export default new SuggestionStore();
+export default new SuggestionStore();