Bug 1109137 - When viewing a question, we should let people load more comments

app/css/question.css

@@ -80,3 +80,19 @@
     font-weight: normal;
     text-transform: uppercase;
 }
+
+
+.QuestionLoadMore {
+    background: #f5f5f5;
+    color: #5f5f5f;
+    display: block;
+    font-size: 15px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+    margin: 0 -10px;
+}
+
+.QuestionLoadMore-button {
+  display: block;
+}

app/js/question_controller.js

@@ -327,31 +327,64 @@
       close_question();
     }
 
-    if (answers.length) {
-      last_displayed_answer = answers[0].id;
+    if (answers.results.length) {
+      last_displayed_answer = answers.results[0].id;
     }
 
     display_sign_in_if_needed(question);
 
-    answers.push(question);
-    answers.reverse();
-
-    answers = answers.map(format_answer);
-
     add_thread_header(question);
-    User.get_user().then(function(user) {
-      var html = nunjucks.render('thread.html', {
-        author: question.creator.display_name || question.creator.username,
-        user: user,
-        is_my_question: question.creator.username === user.username,
-        solution_id: solution_id,
-        results: answers
-      });
+
+    format_thread_html(answers, question).then(function(html) {
       var list = document.getElementById('comment-list');
       list.insertAdjacentHTML('beforeend', html);
     });
   }
 
+  function load_more_answers(evt) {
+    if (!evt.target.dataset.next) {
+      return;
+    }
+
+    SumoDB.fetch_json(evt.target.dataset.next)
+    .then(format_thread_html)
+    .then(function(html) {
+      // Replace load more button
+      evt.target.parentNode.outerHTML = html;
+    });
+  }
+
+  function format_thread_html(answers, question) {
+    var next;
+    if (answers.next) {
+      next = answers.next;
+    }
+
+    answers = answers.results;
+    answers.reverse();
+
+    if (question) {
+      question = format_answer(question);
+    }
+
+    var author = question_object.creator.display_name ||
+      question_object.creator.username;
+
+    answers = answers.map(format_answer);
+    return User.get_user().then(function(user) {
+
+      return nunjucks.render('thread.html', {
+        author: author,
+        user: user,
+        is_my_question: question_object.creator.username === user.username,
+        solution_id: solution_id,
+        results: answers,
+        next: next,
+        question: question
+      });
+    });
+  }
+
   function take_question(evt) {
     if (evt.target.value.length !== 1) {
       return;
@@ -459,6 +492,7 @@
 
       question_thread = document.getElementById('question-thread');
       question_thread.addEventListener('click', handle_event);
+      question_thread.addEventListener('click', load_more_answers);
       suggestions = document.getElementById('suggestions');
       thread_introduction = document.getElementById('thread-introduction');
 

app/js/questions_controller.js

@@ -130,7 +130,7 @@
     var container = load_more_button.parentElement
         .getElementsByClassName('js-question-container')[0];
     if (container) {
-      SumoDB.get_question_list(url).then(function(response) {
+      SumoDB.fetch_json(url).then(function(response) {
         display_questions(response, container, load_more_button);
       });
     }

app/js/sumo_db.js

@@ -248,18 +248,17 @@
       });
     },
 
-    get_question_list: function(url) {
+    fetch_json: function(url) {
       return request(url, 'GET').then(JSON.parse);
     },
 
     get_answers_for_question: function(question_id) {
       var endpoint = API_V2_BASE + 'answer/';
       endpoint += '?question=' + question_id;
+      endpoint += '&ordering=-created';
       endpoint += '&format=json'; // TODO bug 1088014
 
-      return request(endpoint, 'GET').then(function(response) {
-        return JSON.parse(response).results;
-      });
+      return SumoDB.fetch_json(endpoint);
     },
 
     get_unanswered_questions: function(locale) {

app/js/templates.js

@@ -434,23 +434,19 @@ var lineno = null;
 var colno = null;
 var output = "";
 try {
-frame = frame.push();
-var t_3 = runtime.contextOrFrameLookup(context, frame, "results");
-if(t_3) {var t_2 = t_3.length;
-for(var t_1=0; t_1 < t_3.length; t_1++) {
-var t_4 = t_3[t_1];
-frame.set("comment", t_4);
-frame.set("loop.index", t_1 + 1);
-frame.set("loop.index0", t_1);
-frame.set("loop.revindex", t_2 - t_1);
-frame.set("loop.revindex0", t_2 - t_1 - 1);
-frame.set("loop.first", t_1 === 0);
-frame.set("loop.last", t_1 === t_2 - 1);
-frame.set("loop.length", t_2);
+if(runtime.contextOrFrameLookup(context, frame, "question")) {
+output += "\n  ";
+var t_1;
+t_1 = runtime.contextOrFrameLookup(context, frame, "question");
+frame.set("comment", t_1, true);
+if(!frame.parent) {
+context.setVariable("comment", t_1);
+context.addExport("comment");
+}
 output += "\n  <li\n  data-id=\"";
-output += runtime.suppressValue(runtime.memberLookup((t_4),"id", env.autoesc), env.autoesc);
+output += runtime.suppressValue(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "comment")),"id", env.autoesc), env.autoesc);
 output += "\"\n  class=\"Comment vbox\n  ";
-if(runtime.memberLookup((t_4),"author", env.autoesc) != runtime.contextOrFrameLookup(context, frame, "author")) {
+if(runtime.memberLookup((runtime.contextOrFrameLookup(context, frame, "comment")),"author", env.autoesc) != runtime.contextOrFrameLookup(context, frame, "author")) {
 output += "\n    Comment--helper\n  ";
 ;
 }
@@ -459,11 +455,56 @@ output += "\n    Comment--helpee\n  ";
 ;
 }
 output += "\">\n    ";
-env.getTemplate("comment.html", function(t_7,t_5) {
-if(t_7) { cb(t_7); return; }
-t_5.render(context.getVariables(), frame.push(), function(t_8,t_6) {
-if(t_8) { cb(t_8); return; }
-output += t_6
+env.getTemplate("comment.html", function(t_4,t_2) {
+if(t_4) { cb(t_4); return; }
+t_2.render(context.getVariables(), frame.push(), function(t_5,t_3) {
+if(t_5) { cb(t_5); return; }
+output += t_3
+output += "\n  </li>\n";
+})});
+}
+output += "\n\n";
+if(runtime.contextOrFrameLookup(context, frame, "next")) {
+output += "\n  <li class=\"QuestionLoadMore\">\n    <a role=\"button\" data-next=\"";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "next"), env.autoesc);
+output += "\" href=\"#\" class=\"QuestionLoadMore-button\">Load more</a>\n  </li>\n";
+;
+}
+output += "\n\n";
+frame = frame.push();
+var t_8 = runtime.contextOrFrameLookup(context, frame, "results");
+if(t_8) {var t_7 = t_8.length;
+for(var t_6=0; t_6 < t_8.length; t_6++) {
+var t_9 = t_8[t_6];
+frame.set("comment", t_9);
+frame.set("loop.index", t_6 + 1);
+frame.set("loop.index0", t_6);
+frame.set("loop.revindex", t_7 - t_6);
+frame.set("loop.revindex0", t_7 - t_6 - 1);
+frame.set("loop.first", t_6 === 0);
+frame.set("loop.last", t_6 === t_7 - 1);
+frame.set("loop.length", t_7);
+output += "\n  <!-- ";
+output += runtime.suppressValue(runtime.memberLookup((t_9),"author", env.autoesc), env.autoesc);
+output += " - ";
+output += runtime.suppressValue(runtime.contextOrFrameLookup(context, frame, "author"), env.autoesc);
+output += " -->\n  <li\n  data-id=\"";
+output += runtime.suppressValue(runtime.memberLookup((t_9),"id", env.autoesc), env.autoesc);
+output += "\"\n  class=\"Comment vbox\n  ";
+if(runtime.memberLookup((t_9),"author", env.autoesc) != runtime.contextOrFrameLookup(context, frame, "author")) {
+output += "\n    Comment--helper\n  ";
+;
+}
+else {
+output += "\n    Comment--helpee\n  ";
+;
+}
+output += "\">\n    ";
+env.getTemplate("comment.html", function(t_12,t_10) {
+if(t_12) { cb(t_12); return; }
+t_10.render(context.getVariables(), frame.push(), function(t_13,t_11) {
+if(t_13) { cb(t_13); return; }
+output += t_11
 output += "\n  </li>\n";
 })});
 }

app/views/thread.html

@@ -1,4 +1,25 @@
+{% if question %}
+  {% set comment = question %}
+  <li
+  data-id="{{ comment.id }}"
+  class="Comment vbox
+  {% if comment.author != author %}
+    Comment--helper
+  {% else %}
+    Comment--helpee
+  {% endif %}">
+    {% include 'comment.html' %}
+  </li>
+{% endif %}
+
+{% if next %}
+  <li class="QuestionLoadMore">
+    <a role="button" data-next="{{ next }}" href="#" class="QuestionLoadMore-button">Load more</a>
+  </li>
+{% endif %}
+
 {% for comment in results %}
+  <!-- {{ comment.author }} - {{ author }} -->
   <li
   data-id="{{ comment.id }}"
   class="Comment vbox