refactor(comments): use state object for comment pagination

Author: NoaVel

js/render-comments.js

@@ -1,6 +1,9 @@
 const COUNT_STEP = 5;
-let currentCount = 0;
-let comments = [];
+
+const state = {
+  currentCount: 0,
+  comments: [],
+};
 
 const bigPictureNode = document.querySelector('.big-picture');
 const socialCommentsNode = bigPictureNode.querySelector('.social__comments');
@@ -9,7 +12,6 @@ const commentsTotalCountNode = bigPictureNode.querySelector('.social__comment-to
 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);
@@ -24,38 +26,46 @@ const createComment = ({ avatar, name, message}) => {
 
 const renderNextComments = () => {
   const socialCommentsFragment = document.createDocumentFragment();
-  const nextComments = comments.slice(currentCount, currentCount + COUNT_STEP);
+  const nextComments = state.comments.slice(
+    state.currentCount,
+    state.currentCount + COUNT_STEP
+  );
 
   nextComments.forEach((comment) => {
     socialCommentsFragment.appendChild(createComment(comment));
   });
 
   socialCommentsNode.appendChild(socialCommentsFragment);
-  currentCount += nextComments.length;
-  commentsShownCountNode.textContent = currentCount;
-  commentsTotalCountNode.textContent = comments.length;
+  state.currentCount += nextComments.length;
+  commentsShownCountNode.textContent = state.currentCount;
+  commentsTotalCountNode.textContent = state.comments.length;
 
-  if (currentCount >= comments.length) {
+  if (state.currentCount >= state.comments.length) {
     commentsLoaderNode.classList.add('hidden');
   }
 };
 
 const clearComments = () => {
-  currentCount = 0;
-  comments = [];
+  state.currentCount = 0;
+  state.comments = [];
   socialCommentsNode.innerHTML = '';
   commentsCountNode.classList.add('hidden');
   commentsLoaderNode.classList.add('hidden');
   commentsLoaderNode.removeEventListener('click', renderNextComments);
 };
 
 const renderComments = (currentPhotoComments) => {
-  comments = currentPhotoComments;
-  currentCount = 0;
+  state.comments = currentPhotoComments;
+  state.currentCount = 0;
   socialCommentsNode.innerHTML = '';
 
   commentsCountNode.classList.remove('hidden');
-  commentsLoaderNode.classList.remove('hidden');
+  if (state.comments.length > COUNT_STEP) {
+    commentsLoaderNode.classList.remove('hidden');
+  } else {
+    commentsLoaderNode.classList.add('hidden');
+  }
+  // commentsLoaderNode.classList.remove('hidden');
 
   commentsLoaderNode.removeEventListener('click', renderNextComments);
   commentsLoaderNode.addEventListener('click', renderNextComments);