From 0ff28c722609ab102149aa369cf6fccb912798a5 Mon Sep 17 00:00:00 2001 From: rob Date: Wed, 29 Dec 2021 20:05:58 -0500 Subject: [PATCH] comment reply pagination/load more --- app/controllers/comment.js | 19 ++++++++++-- app/controllers/post.js | 10 +++++-- app/models/lib/resource-stats.js | 2 ++ app/views/comment/components/comment-list.pug | 30 +++++++++---------- app/views/post/view.pug | 7 ++++- client/js/site-app.js | 3 +- lib/site-platform.js | 1 + 7 files changed, 49 insertions(+), 23 deletions(-) diff --git a/app/controllers/comment.js b/app/controllers/comment.js index 9890191..980e010 100644 --- a/app/controllers/comment.js +++ b/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) { diff --git a/app/controllers/post.js b/app/controllers/post.js index c0f020c..78774bc 100644 --- a/app/controllers/post.js +++ b/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) { diff --git a/app/models/lib/resource-stats.js b/app/models/lib/resource-stats.js index 7a15bc9..6d4dce8 100644 --- a/app/models/lib/resource-stats.js +++ b/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 }, diff --git a/app/views/comment/components/comment-list.pug b/app/views/comment/components/comment-list.pug index 89670fc..585ff74 100644 --- a/app/views/comment/components/comment-list.pug +++ b/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) + 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. \ No newline at end of file + if (comments.length >= options.countPerPage) + - 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 \ No newline at end of file diff --git a/app/views/post/view.pug b/app/views/post/view.pug index 3fccc93..2fb902a 100644 --- a/app/views/post/view.pug +++ b/app/views/post/view.pug @@ -58,4 +58,9 @@ block content +renderSectionTitle('Comments') .uk-margin - +renderCommentList(comments, { countPerPage, rootUrl: `/post/${post.slug}/comment` }) \ No newline at end of file + 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. \ No newline at end of file diff --git a/client/js/site-app.js b/client/js/site-app.js index 3430c4a..0115d67 100644 --- a/client/js/site-app.js +++ b/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}`); diff --git a/lib/site-platform.js b/lib/site-platform.js index 329dfbf..61d3675 100644 --- a/lib/site-platform.js +++ b/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');