Fixes multiple ajax request and incorrect data being set for the current issuable

1 files changed, 47 insertions, 16 deletions

diff --git a/app/assets/javascripts/gfm_auto_complete.js.coffee b/app/assets/javascripts/gfm_auto_complete.js.coffee
index 4718bcf7a1e..61e3f811e73 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.coffee
+++ b/app/assets/javascripts/gfm_auto_complete.js.coffee
@@ -2,6 +2,8 @@
 
 window.GitLab ?= {}
 GitLab.GfmAutoComplete =
+  dataLoading: false
+
   dataSource: ''
 
   # Emoji
@@ -17,17 +19,41 @@ GitLab.GfmAutoComplete =
     template: '<li><small>${id}</small> ${title}</li>'
 
   # Add GFM auto-completion to all input fields, that accept GFM input.
-  setup: ->
-    input = $('.js-gfm-input')
+  setup: (wrap) ->
+    @input = $('.js-gfm-input')
+
+    # destroy previous instances
+    @destroyAtWho()
+
+    # set up instances
+    @setupAtWho()
+
+    if @dataSource
+      if !@dataLoading
+        @dataLoading = true
 
+        # We should wait until initializations are done
+        # and only trigger the last .setup since
+        # The previous .dataSource belongs to the previous issuable
+        # and the last one will have the **proper** .dataSource property
+        # TODO: Make this a singleton and turn off events when moving to another page
+        setTimeout( =>
+          fetch = @fetchData(@dataSource)
+          fetch.done (data) =>
+            @dataLoading = false
+            @loadData(data)
+        , 1000)
+
+
+  setupAtWho: ->
     # Emoji
-    input.atwho
+    @input.atwho
       at: ':'
       displayTpl: @Emoji.template
       insertTpl: ':${name}:'
 
     # Team Members
-    input.atwho
+    @input.atwho
       at: '@'
       displayTpl: @Members.template
       insertTpl: '${atwho-at}${username}'
@@ -42,7 +68,7 @@ GitLab.GfmAutoComplete =
             title:    sanitize(title)
             search:   sanitize("#{m.username} #{m.name}")
 
-    input.atwho
+    @input.atwho
       at: '#'
       alias: 'issues'
       searchKey: 'search'
@@ -55,7 +81,7 @@ GitLab.GfmAutoComplete =
             title:  sanitize(i.title)
             search: "#{i.iid} #{i.title}"
 
-    input.atwho
+    @input.atwho
       at: '!'
       alias: 'mergerequests'
       searchKey: 'search'
@@ -68,13 +94,18 @@ GitLab.GfmAutoComplete =
             title:  sanitize(m.title)
             search: "#{m.iid} #{m.title}"
 
-    if @dataSource
-      $.getJSON(@dataSource).done (data) ->
-        # load members
-        input.atwho 'load', '@', data.members
-        # load issues
-        input.atwho 'load', 'issues', data.issues
-        # load merge requests
-        input.atwho 'load', 'mergerequests', data.mergerequests
-        # load emojis
-        input.atwho 'load', ':', data.emojis
+  destroyAtWho: ->
+    @input.atwho('destroy')
+
+  fetchData: (dataSource) ->
+    $.getJSON(dataSource)
+
+  loadData: (data) ->
+    # load members
+    @input.atwho 'load', '@', data.members
+    # load issues
+    @input.atwho 'load', 'issues', data.issues
+    # load merge requests
+    @input.atwho 'load', 'mergerequests', data.mergerequests
+    # load emojis
+    @input.atwho 'load', ':', data.emojis