feat: batch comment loading (5 at a time)

Author: NoaVel

js/full-size-picture.js

@@ -1,41 +1,14 @@
 import { photos } from './create-array-photos.js';
+import { clearComments, renderComments } from './render-comments.js';
 
 const bigPictureNode = document.querySelector('.big-picture');
 const bigPictureImgNode = bigPictureNode.querySelector('.big-picture__img').querySelector('img');
 const likesCountNode = bigPictureNode.querySelector('.likes-count');
-const commentsShownCountNode = bigPictureNode.querySelector('.social__comment-shown-count');
-const commentsTotalCountNode = bigPictureNode.querySelector('.social__comment-total-count');
-const socialCommentsNode = bigPictureNode.querySelector('.social__comments');
-const socialCommentTemplate = socialCommentsNode.querySelector('.social__comment');
 const commentsCaptionNode = bigPictureNode.querySelector('.social__caption');
-const commentsCountNode = bigPictureNode.querySelector('.social__comment-count');
-const commentsLoaderNode = bigPictureNode.querySelector('.social__comments-loader');
 const bigPictureCancelNode = bigPictureNode.querySelector('.big-picture__cancel');
 
-const createSocialComment = ({ avatar, name, message}) => {
-  const socialCommentNode = socialCommentTemplate.cloneNode(true);
-
-  const socialPictureNode = socialCommentNode.querySelector('.social__picture');
-  socialPictureNode.src = avatar;
-  socialPictureNode.alt = name;
-  socialCommentNode.querySelector('.social__text').textContent = message;
-
-  return socialCommentNode;
-};
-
-const renderComments = (comments) => {
-  const socialCommentsFragment = document.createDocumentFragment();
-
-  const appendComment = (comment) => {
-    socialCommentsFragment.appendChild(createSocialComment(comment));
-  };
-
-  comments.forEach(appendComment);
-  socialCommentsNode.innerHTML = '';
-  socialCommentsNode.appendChild(socialCommentsFragment);
-};
-
 const closeBigPicture = () => {
+  clearComments();
   bigPictureNode.classList.add('hidden');
   document.body.classList.remove('modal-open');
   document.removeEventListener('keydown', onEscKeydown);
@@ -62,15 +35,10 @@ const openBigPicture = (pictureId) => {
   bigPictureImgNode.src = currentPhoto.url;
   bigPictureImgNode.alt = currentPhoto.description;
   likesCountNode.textContent = currentPhoto.likes;
-  commentsShownCountNode.textContent = currentPhoto.comments.length;
-  commentsTotalCountNode.textContent = currentPhoto.comments.length;
   commentsCaptionNode.textContent = currentPhoto.description;
 
   renderComments(currentPhoto.comments);
 
-  commentsCountNode.classList.add('hidden');
-  commentsLoaderNode.classList.add('hidden');
-
   bigPictureNode.classList.remove('hidden');
   document.body.classList.add('modal-open');
   document.addEventListener('keydown', onEscKeydown);

js/render-comments.js

@@ -0,0 +1,67 @@
+const COUNT_STEP = 5;
+let currentCount = 0;
+let comments = [];
+
+const bigPictureNode = document.querySelector('.big-picture');
+const socialCommentsNode = bigPictureNode.querySelector('.social__comments');
+const commentsShownCountNode = bigPictureNode.querySelector('.social__comment-shown-count');
+const commentsTotalCountNode = bigPictureNode.querySelector('.social__comment-total-count');
+const socialCommentTemplate = socialCommentsNode.querySelector('.social__comment');
+const commentsCountNode = bigPictureNode.querySelector('.social__comment-count');
+const commentsLoaderNode = bigPictureNode.querySelector('.social__comments-loader');
+// socialCommentsNode.innerHTML = '';
+
+const createComment = ({ avatar, name, message}) => {
+  const socialCommentNode = socialCommentTemplate.cloneNode(true);
+  const socialPictureNode = socialCommentNode.querySelector('.social__picture');
+
+  socialPictureNode.src = avatar;
+  socialPictureNode.alt = name;
+  socialCommentNode.querySelector('.social__text').textContent = message;
+
+  return socialCommentNode;
+};
+
+const renderNextComments = () => {
+  const socialCommentsFragment = document.createDocumentFragment();
+  const nextComments = comments.slice(currentCount, currentCount + COUNT_STEP);
+
+  nextComments.forEach((comment) => {
+    socialCommentsFragment.appendChild(createComment(comment));
+  });
+
+  socialCommentsNode.appendChild(socialCommentsFragment);
+  currentCount += nextComments.length;
+  commentsShownCountNode.textContent = currentCount;
+  commentsTotalCountNode.textContent = comments.length;
+
+  if (currentCount >= comments.length) {
+    commentsLoaderNode.classList.add('hidden');
+  }
+};
+
+const clearComments = () => {
+  currentCount = 0;
+  comments = [];
+  socialCommentsNode.innerHTML = '';
+  commentsCountNode.classList.add('hidden');
+  commentsLoaderNode.classList.add('hidden');
+  commentsLoaderNode.removeEventListener('click', renderNextComments);
+};
+
+const renderComments = (currentPhotoComments) => {
+  comments = currentPhotoComments;
+  currentCount = 0;
+  socialCommentsNode.innerHTML = '';
+
+  commentsCountNode.classList.remove('hidden');
+  commentsLoaderNode.classList.remove('hidden');
+
+  commentsLoaderNode.removeEventListener('click', renderNextComments);
+  commentsLoaderNode.addEventListener('click', renderNextComments);
+
+  renderNextComments();
+};
+
+export {clearComments, renderComments};
+