Открывается и закрывается (часть 2)

js/components/render-comments.js

@@ -1,4 +1,4 @@
-import { bigPicture } from './show-big-picture';
+const COMMENTS_PORTION = 5;
 
 const createComment = ({
   avatar,
@@ -17,24 +17,44 @@ const createComment = ({
   return comment;
 };
 
-const renderComments = (comments) => {
+
+const renderComments = (comments, bigPicture) => {
   const commentList = bigPicture.querySelector('.social__comments');
   const commentsLoader = bigPicture.querySelector('.comments-loader');
   const commentShowCount = bigPicture.querySelector('.social__comment-shown-count');
   let commentsShown = 0;
 
   const template = commentList.children[0];
-  const fragment = document.createDocumentFragment();
-
-
+  commentList.innerHTML = '';
 
-  comments.forEach((comment) => {
-    const commentElement = createComment(comment, template);
-    fragment.append(commentElement);
+  const shownComments = () => {
+    const startIndex = commentsShown * COMMENTS_PORTION;
+    commentsShown++;
+    const endIndex = Math.min(
+      startIndex + COMMENTS_PORTION,
+      comments.length
+    );
+
+    const slicedComments = comments.slice(startIndex, endIndex);
+
+    slicedComments.forEach((comment) => {
+      commentList.append(createComment(comment, template));
+    });
+
+    if (startIndex >= comments.length) {
+      commentsLoader.classList.add('hidden');
+      commentsShown = comments.length;
+    } else {
+      commentsLoader.classList.remove('hidden');
+    }
+    commentShowCount.textContent = endIndex;
+
+  };
+  shownComments();
+
+  commentsLoader.addEventListener('click', () => {
+    shownComments();
   });
-
-  commentList.innerHTML = '';
-  commentList.append(fragment);
 };
 
 export {

js/components/show-big-picture.js

@@ -52,5 +52,5 @@ const showBigPicture = ({
 cancelButton.addEventListener('click', onCancelButtonClick);
 
 export {
-  showBigPicture, bigPicture
+  showBigPicture
 };