comment reply pagination/load more

app/controllers/comment.js

@@ -51,6 +51,7 @@ class CommentController extends SiteController {
       if (!res.locals.comment) {
         return next(new SiteError(404, 'Comment not found'));
       }
+      res.locals.post = res.locals.comment.resource;
       return next();
     } catch (error) {
       this.log.error('failed to populate commentId', { commentId, error });
@@ -87,12 +88,24 @@ class CommentController extends SiteController {
     try {
       const displayList = this.createDisplayList('get-replies');
 
+      if (req.query.buttonId) {
+        displayList.removeElement(`li.dtp-load-more[data-button-id="${req.query.buttonId}"]`);
+      }
+
       Object.assign(res.locals, req.app.locals);
 
-      res.locals.pagination = this.getPaginationParameters(req, 20);
+      res.locals.countPerPage = parseInt(req.query.cpp || "20", 10);
+      if (res.locals.countPerPage < 1) {
+        res.locals.countPerPage = 1;
+      }
+      if (res.locals.countPerPage > 20) {
+        res.locals.countPerPage = 20;
+      }
+
+      res.locals.pagination = this.getPaginationParameters(req, res.locals.countPerPage);
       res.locals.comments = await commentService.getReplies(res.locals.comment, res.locals.pagination);
 
-      const html = await commentService.renderTemplate('commentList', res.locals);
+      const html = await commentService.renderTemplate('replyList', res.locals);
 
       const replyList = `ul.dtp-reply-list[data-comment-id="${res.locals.comment._id}"]`;
       displayList.addElement(replyList, 'beforeEnd', html);
@@ -102,9 +115,9 @@ class CommentController extends SiteController {
 
       res.status(200).json({ success: true, displayList });
     } catch (error) {
+      this.log.error('failed to display comment replies', { error });
       res.status(error.statusCode || 500).json({ success: false, message: error.message });
     }
-
   }
 
   async deleteComment (req, res) {

app/controllers/post.js

@@ -133,11 +133,17 @@ class PostController extends SiteController {
     const { comment: commentService } = this.dtp.services;
     try {
       const displayList = this.createDisplayList('add-recipient');
-      displayList.removeElement('li#load-more');
+
+      if (req.query.buttonId) {
+        displayList.removeElement(`li.dtp-load-more[data-button-id="${req.query.buttonId}"]`);
+      }
 
       Object.assign(res.locals, req.app.locals);
 
       res.locals.countPerPage = parseInt(req.query.cpp || "20", 10);
+      if (res.locals.countPerPage < 1) {
+        res.locals.countPerPage = 1;
+      }
       if (res.locals.countPerPage > 20) {
         res.locals.countPerPage = 20;
       }
@@ -170,7 +176,7 @@ class PostController extends SiteController {
     try {
       await resourceService.recordView(req, 'Post', res.locals.post._id);
 
-      res.locals.countPerPage = 20;
+      res.locals.countPerPage = 5;
       res.locals.pagination = this.getPaginationParameters(req, res.locals.countPerPage);
 
       if (req.query.comment) {

app/models/lib/resource-stats.js

@@ -8,6 +8,8 @@ const mongoose = require('mongoose');
 
 const Schema = mongoose.Schema;
 
+module.exports.RESOURCE_TYPE_LIST = ['Page', 'Post'];
+
 module.exports.ResourceStats = new Schema({
   uniqueVisitCount: { type: Number, default: 0, required: true, index: -1 },
   totalVisitCount: { type: Number, default: 0, required: true },

app/views/comment/components/comment-list.pug

@@ -2,20 +2,18 @@ include comment
 
 mixin renderCommentList (comments, options = { })
   if Array.isArray(comments) && (comments.length > 0)
-    ul#post-comment-list.uk-list.uk-list-divider.uk-list-large
     each comment in comments
       li(data-comment-id= comment._id)
         +renderComment(comment)
 
     if (comments.length >= options.countPerPage)
-        li#load-more.uk-text-center
+      - var buttonId = mongoose.Types.ObjectId();
+      li(data-button-id= buttonId).dtp-load-more.uk-text-center
         button(
           type="button",
+          data-button-id= buttonId,
           data-post-id= post._id,
           data-next-page= pagination.p + 1,
           data-root-url= options.rootUrl,
           onclick= `return dtp.app.loadMoreComments(event);`,
         ).uk-button.dtp-button-primary LOAD MORE
-  else
-    ul#post-comment-list.uk-list.uk-list-divider.uk-list-large
-    div There are no comments at this time. Please check back later.

app/views/post/view.pug

@@ -58,4 +58,9 @@ block content
     +renderSectionTitle('Comments')
 
   .uk-margin
+    if Array.isArray(comments) && (comments.length > 0)
+      ul#post-comment-list.uk-list.uk-list-divider.uk-list-large
         +renderCommentList(comments, { countPerPage, rootUrl: `/post/${post.slug}/comment` })
+    else
+      ul#post-comment-list.uk-list.uk-list-divider.uk-list-large
+      div There are no comments at this time. Please check back later.

client/js/site-app.js

@@ -789,11 +789,12 @@ export default class DtpSiteApp extends DtpApp {
 
     const target = event.currentTarget || event.target;
 
+    const buttonId = target.getAttribute('data-button-id');
     const rootUrl = target.getAttribute('data-root-url');
     const nextPage = target.getAttribute('data-next-page');
 
     try {
-      const response = await fetch(`${rootUrl}?p=${nextPage}`);
+      const response = await fetch(`${rootUrl}?p=${nextPage}&buttonId=${buttonId}`);
       await this.processResponse(response);
     } catch (error) {
       UIkit.modal.alert(`Failed to load more comments: ${error.message}`);

lib/site-platform.js

@@ -214,6 +214,7 @@ module.exports.startWebServer = async (dtp) => {
   module.app.locals.DTP_SCRIPT_DEBUG = (process.env.NODE_ENV === 'local');
   module.app.locals.dtp = dtp;
   module.app.locals.pkg = require(path.join(dtp.config.root, 'package.json'));
+  module.app.locals.mongoose = require('mongoose');
   module.app.locals.moment = require('moment');
   module.app.locals.numeral = require('numeral');
   module.app.locals.phoneNumberJS = require('libphonenumber-js');