From 12f659372786c9b9dd3261b4663a4e840da64372 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Tue, 31 May 2016 16:14:28 -0400
Subject: PLT-2643 Fixed asynchronous autocomplete incorrectly replacing text
 (#3167)

* Allowed different suggestions to match different text. Added a Suggestion base component. Improved text replacement used when filling in suggestions

* Fixed formatting
---
 webapp/components/suggestion/suggestion_list.jsx | 50 ++++++++++++------------
 1 file changed, 26 insertions(+), 24 deletions(-)

(limited to 'webapp/components/suggestion/suggestion_list.jsx')

diff --git a/webapp/components/suggestion/suggestion_list.jsx b/webapp/components/suggestion/suggestion_list.jsx
index 91f7443cb..7774f9a7d 100644
--- a/webapp/components/suggestion/suggestion_list.jsx
+++ b/webapp/components/suggestion/suggestion_list.jsx
@@ -12,6 +12,8 @@ export default class SuggestionList extends React.Component {
     constructor(props) {
         super(props);
 
+        this.getStateFromStores = this.getStateFromStores.bind(this);
+
         this.getContent = this.getContent.bind(this);
 
         this.handleItemClick = this.handleItemClick.bind(this);
@@ -19,11 +21,18 @@ export default class SuggestionList extends React.Component {
 
         this.scrollToItem = this.scrollToItem.bind(this);
 
-        this.state = {
-            items: [],
-            terms: [],
-            components: [],
-            selection: ''
+        this.state = this.getStateFromStores(props.suggestionId);
+    }
+
+    getStateFromStores(suggestionId) {
+        const suggestions = SuggestionStore.getSuggestions(suggestionId || this.props.suggestionId);
+
+        return {
+            matchedPretext: suggestions.matchedPretext,
+            items: suggestions.items,
+            terms: suggestions.terms,
+            components: suggestions.components,
+            selection: suggestions.selection
         };
     }
 
@@ -31,6 +40,12 @@ export default class SuggestionList extends React.Component {
         SuggestionStore.addSuggestionsChangedListener(this.props.suggestionId, this.handleSuggestionsChanged);
     }
 
+    componentDidUpdate(prevProps, prevState) {
+        if (this.state.selection !== prevState.selection && this.state.selection) {
+            this.scrollToItem(this.state.selection);
+        }
+    }
+
     componentWillUnmount() {
         SuggestionStore.removeSuggestionsChangedListener(this.props.suggestionId, this.handleSuggestionsChanged);
     }
@@ -39,25 +54,12 @@ export default class SuggestionList extends React.Component {
         return $(ReactDOM.findDOMNode(this.refs.content));
     }
 
-    handleItemClick(term, e) {
-        GlobalActions.emitCompleteWordSuggestion(this.props.suggestionId, term);
-
-        e.preventDefault();
+    handleItemClick(term, matchedPretext) {
+        GlobalActions.emitCompleteWordSuggestion(this.props.suggestionId, term, matchedPretext);
     }
 
     handleSuggestionsChanged() {
-        const selection = SuggestionStore.getSelection(this.props.suggestionId);
-
-        this.setState({
-            items: SuggestionStore.getItems(this.props.suggestionId),
-            terms: SuggestionStore.getTerms(this.props.suggestionId),
-            components: SuggestionStore.getComponents(this.props.suggestionId),
-            selection
-        });
-
-        if (selection) {
-            window.requestAnimationFrame(() => this.scrollToItem(this.state.selection));
-        }
+        this.setState(this.getStateFromStores());
     }
 
     scrollToItem(term) {
@@ -96,7 +98,6 @@ export default class SuggestionList extends React.Component {
 
         const items = [];
         for (let i = 0; i < this.state.items.length; i++) {
-            const item = this.state.items[i];
             const term = this.state.terms[i];
             const isSelection = term === this.state.selection;
 
@@ -107,10 +108,11 @@ export default class SuggestionList extends React.Component {
                 <Component
                     key={term}
                     ref={term}
-                    item={item}
+                    item={this.state.items[i]}
                     term={term}
+                    matchedPretext={this.state.matchedPretext[i]}
                     isSelection={isSelection}
-                    onClick={this.handleItemClick.bind(this, term)}
+                    onClick={this.handleItemClick}
                 />
             );
         }
-- 
cgit v1.2.3-1-g7c22