Refactor content creation

app/views/request_for_comments/show.html.erb

@@ -137,6 +137,7 @@ also, all settings from the rails model needed for the editor configuration in t
     currentEditor.getSession().setMode($(editor).data('mode'));
     currentEditor.getSession().setOption("useWorker", false);
 
+    currentEditor.annotationsByLine = {};
     setAnnotations(currentEditor, $(editor).data('file-id'));
     currentEditor.on("guttermousedown", handleSidebarClick);
   });
@@ -153,21 +154,10 @@ also, all settings from the rails model needed for the editor configuration in t
     return commentText.replace(/\n/g, '<br>');
   }
 
-  function setAnnotations(editor, fileid) {
+  function clusterComments(comments) {
-    var session = editor.getSession();
+    var clusters = {};
-
-    var jqrequest = $.ajax({
-        dataType: 'json',
-        method: 'GET',
-        url: '/comments',
-        data: {
-          file_id: fileid
-        }
-    });
-
-    jqrequest.done(function(response){
     // comments need to be sorted to cluster them per line
-      var comments = response.slice().sort(function (a, b) {
+    comments.sort(function (a, b) {
       return a.row - b.row;
     });
     while (comments.length > 0) {
@@ -182,40 +172,68 @@ also, all settings from the rails model needed for the editor configuration in t
       cluster = cluster.sort(function (a, b) {
         return a.id - b.id;
       });
-
+      clusters[clusterRow] = cluster;
-        // build the markup for the current line's popover
-        var popupContent = '';
-        cluster.forEach(function(comment, index) {
-            if (index !== 0) {
-                popupContent += '<div class="popover-divider"></div>'
     }
-            popupContent += '<p class="comment">';
+    return clusters;
-            popupContent += '<div class="popover-header">' +
+  }
+
+  function generateCommentHtmlContent(comments) {
+    var htmlContent = '';
+    comments.forEach(function(comment, index) {
+      if (index !== 0) {
+        htmlContent += '<div class="popover-divider"></div>'
+      }
+      htmlContent += '<p class="comment">';
+      htmlContent += '<div class="popover-header">' +
         '<div class="popover-username">' + preprocess(comment.username) + '</div>' +
         '<div class="popover-date">' + comment.date + '</div>';
       if (comment.updated) {
-                popupContent += '<div class="popover-updated">' +
+        htmlContent += '<div class="popover-updated">' +
           '<i class="fa fa-pencil" aria-hidden="true"></i>' +
           '<%= t('request_for_comments.comment_edited') %>' +
           '</div>'
       }
-            popupContent += '</div>';
+      htmlContent += '</div>';
-            popupContent += '<div class="popover-comment">' + preprocess(comment.text) + '</div>';
+      htmlContent += '<div class="popover-comment">' + preprocess(comment.text) + '</div>';
-            popupContent += '</p>';
+      htmlContent += '</p>';
     });
+    return htmlContent;
+  }
 
+  function buildPopover(fileid, line, htmlContent) {
     // attach the popover to the ace sidebar (where the comment icon is displayed)
     var icon = $('*[data-file-id="' + fileid + '"]')          // the editor for this file
       .find('.ace_gutter > .ace_gutter-layer')                // the sidebar
-                .find('div:nth-child(' + (clusterRow + 1) + ')'); // the correct line
+      .find('div:nth-child(' + (parseInt(line) + 1) + ')');   // the correct line
     icon.popover({
-          content: popupContent,
+      content: htmlContent,
       html: true, // necessary to style comments. XSS is not possible due to comment pre-processing (sanitizing)
       trigger: 'hover',
       container: 'body'
     });
   }
 
+  function setAnnotations(editor, fileid) {
+    var session = editor.getSession();
+
+    var jqrequest = $.ajax({
+      dataType: 'json',
+      method: 'GET',
+      url: '/comments',
+      data: {
+        file_id: fileid
+      }
+    });
+
+    jqrequest.done(function(response){
+      editor.annotationsByLine = clusterComments(response.slice());
+      for (var line in editor.annotationsByLine) {
+        if (editor.annotationsByLine.hasOwnProperty(line)) {
+          var htmlContent = generateCommentHtmlContent(editor.annotationsByLine[line]);
+          buildPopover(fileid, line, htmlContent);
+        }
+      }
+
       $.each(response, function(index, comment) {
         comment.className = 'code-ocean_comment';
       });