root-level comment load more

app/controllers/post.js

@@ -43,6 +43,11 @@ class PostController extends SiteController {
     router.post('/:postSlug/comment/:commentId/block-author', authRequired, upload.none(), this.postBlockCommentAuthor.bind(this));
     router.post('/:postSlug/comment', authRequired, upload.none(), this.postComment.bind(this));
 
+    router.get('/:postSlug/comment',
+      limiterService.create(limiterService.config.post.getComments),
+      this.getComments.bind(this),
+    );
+
     router.get('/:postSlug',
       limiterService.create(limiterService.config.post.getView),
       this.getView.bind(this),
@@ -124,12 +129,49 @@ class PostController extends SiteController {
     }
   }
 
+  async getComments (req, res) {
+    const { comment: commentService } = this.dtp.services;
+    try {
+      const displayList = this.createDisplayList('add-recipient');
+      displayList.removeElement('li#load-more');
+
+      Object.assign(res.locals, req.app.locals);
+
+      res.locals.countPerPage = parseInt(req.query.cpp || "20", 10);
+      if (res.locals.countPerPage > 20) {
+        res.locals.countPerPage = 20;
+      }
+
+      res.locals.pagination = this.getPaginationParameters(req, res.locals.countPerPage);
+
+      res.locals.comments = await commentService.getForResource(
+        res.locals.post,
+        ['published', 'mod-warn', 'mod-removed', 'removed'],
+        res.locals.pagination,
+      );
+
+      const html = await commentService.renderTemplate('commentList', res.locals);
+
+      const replyList = `ul#post-comment-list`;
+      displayList.addElement(replyList, 'beforeEnd', html);
+
+      res.status(200).json({ success: true, displayList });
+    } catch (error) {
+      this.log.error('failed to fetch more commnets', { postId: res.locals.post._id, error });
+      return res.status(error.statusCode || 500).json({
+        success: false,
+        message: error.message,
+      });
+    }
+  }
+
   async getView (req, res, next) {
     const { comment: commentService, resource: resourceService } = this.dtp.services;
     try {
       await resourceService.recordView(req, 'Post', res.locals.post._id);
-      
-      res.locals.pagination = this.getPaginationParameters(req, 20);
+
+      res.locals.countPerPage = 20;
+      res.locals.pagination = this.getPaginationParameters(req, res.locals.countPerPage);
 
       if (req.query.comment) {
         res.locals.featuredComment = await commentService.getById(req.query.comment);

app/services/comment.js

@@ -51,7 +51,9 @@ class CommentService extends SiteService {
   async start ( ) {
     this.templates = { };
     this.templates.comment = pug.compileFile(path.join(this.dtp.config.root, 'app', 'views', 'comment', 'components', 'comment-standalone.pug'));
+
     this.templates.commentList = pug.compileFile(path.join(this.dtp.config.root, 'app', 'views', 'comment', 'components', 'comment-list-standalone.pug'));
+    this.templates.replyList = pug.compileFile(path.join(this.dtp.config.root, 'app', 'views', 'comment', 'components', 'reply-list-standalone.pug'));
   }
 
   async renderTemplate (templateName, viewModel) {
@@ -186,7 +188,7 @@ class CommentService extends SiteService {
   async getForResource (resource, statuses, pagination) {
     const comments = await Comment
       .find({ resource: resource._id, replyTo: { $exists: false }, status: { $in: statuses } })
-      .sort({ created: 1 })
+      .sort({ created: -1 })
       .skip(pagination.skip)
       .limit(pagination.cpp)
       .populate(this.populateComment)
@@ -213,7 +215,7 @@ class CommentService extends SiteService {
           $in: ['published', 'mod-warn', 'mod-removed']
         }
       })
-      .sort({ created: 1 })
+      .sort({ created: -1 })
       .skip(pagination.skip)
       .limit(pagination.cpp)
       .populate(this.populateComment)

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

@@ -1,4 +1,4 @@
 include ../../components/library
 include comment-list
 include composer
-+renderCommentList(comments)
++renderCommentList(comments, { rootUrl: `/post/${post.slug}/comment`, countPerPage })

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

@@ -1,11 +1,21 @@
 include comment
 
-mixin renderCommentList (comments)
+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
+          button(
+            type="button",
+            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/comment/components/reply-list-standalone.pug

@@ -0,0 +1,4 @@
+include ../../components/library
+include comment-list
+include composer
++renderCommentList(comments, { rootUrl: `/comment/${comment._id}/replies`, countPerPage })

app/views/post/view.pug

@@ -58,4 +58,4 @@ block content
     +renderSectionTitle('Comments')
 
   .uk-margin
-    +renderCommentList(comments)
+    +renderCommentList(comments, { countPerPage, rootUrl: `/post/${post.slug}/comment` })

client/js/site-app.js

@@ -782,6 +782,23 @@ export default class DtpSiteApp extends DtpApp {
 
     return true;
   }
+
+  async loadMoreComments (event) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const target = event.currentTarget || event.target;
+
+    const rootUrl = target.getAttribute('data-root-url');
+    const nextPage = target.getAttribute('data-next-page');
+
+    try {
+      const response = await fetch(`${rootUrl}?p=${nextPage}`);
+      await this.processResponse(response);
+    } catch (error) {
+      UIkit.modal.alert(`Failed to load more comments: ${error.message}`);
+    }
+  }
 }
 
 dtp.DtpSiteApp = DtpSiteApp;

config/limiter.js

@@ -174,6 +174,11 @@ module.exports = {
    * PostController
    */
   post: {
+    getComments: {
+      total: 20,
+      expire: ONE_MINUTE,
+      message: 'You are reading comments too quickly',
+    },
     getView: {
       total: 5,
       expire: ONE_MINUTE,