From b18a6801478da8271eca2ca516361697407717e6 Mon Sep 17 00:00:00 2001
From: Daniil888-m <daniil.kolotygin80@gmail.com>
Date: Sat, 14 Dec 2024 22:34:08 +0300
Subject: [PATCH 1/2] realized functionality for loading comments

---
 js/big-picture-popup.js | 67 +++++++++++++++++++++++++++--------------
 js/consts.js            |  3 +-
 2 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js
index 167baf8..2037cc6 100644
--- a/js/big-picture-popup.js
+++ b/js/big-picture-popup.js
@@ -1,8 +1,13 @@
+import { COMMENTS_STEP } from './consts.js';
 import { getPhotos } from './get-photos.js';
 import { hide, show } from './utils.js';
 const photos = getPhotos();
 const bigPhotoPopup = document.querySelector('.big-picture');
 const popupCancelElement = document.querySelector('.big-picture__cancel');
+const commentsLoadBtn = bigPhotoPopup.querySelector('.comments-loader');
+
+let currentComments = null;
+let currentCommentsCount = 0;
 
 function onEscapeKeydown(e) {
   if (e.key === 'Escape') {
@@ -10,38 +15,55 @@ function onEscapeKeydown(e) {
   }
 }
 
-function renderComments(comments) {
-  const commentFragmentList = document.createDocumentFragment();
-  comments.forEach((comment) => {
-    const commEl = document.createElement('li');
-    commEl.className = 'social__comment';
+function onLoadBtnClick(e) {
+  e.preventDefault();
+  loadComments();
+}
+
+function loadComments() {
+  if (currentComments.length > currentCommentsCount) {
+    currentComments.slice(currentCommentsCount, currentCommentsCount + COMMENTS_STEP).forEach((comment) => {
+      const commEl = document.createElement('li');
+      commEl.className = 'social__comment';
 
-    const imgEl = document.createElement('img');
-    imgEl.className = 'social__picture';
-    imgEl.src = comment.avatar;
-    imgEl.alt = comment.name;
-    imgEl.width = 35;
-    imgEl.height = 35;
+      const imgEl = document.createElement('img');
+      imgEl.className = 'social__picture';
+      imgEl.src = comment.avatar;
+      imgEl.alt = comment.name;
+      imgEl.width = 35;
+      imgEl.height = 35;
 
-    const pEl = document.createElement('p');
-    pEl.className = 'social__text';
-    pEl.textContent = comment.message;
+      const pEl = document.createElement('p');
+      pEl.className = 'social__text';
+      pEl.textContent = comment.message;
 
-    commEl.append(imgEl);
-    commEl.append(pEl);
-    commentFragmentList.append(commEl);
+      commEl.append(imgEl);
+      commEl.append(pEl);
+      bigPhotoPopup.querySelector('.social__comments').append(commEl);
+      currentCommentsCount++;
+    });
 
-  });
+    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = bigPhotoPopup.querySelectorAll('.social__comment').length;
+  }
+}
 
+function clearComments() {
   bigPhotoPopup.querySelector('.social__comments').innerHTML = '';
-  bigPhotoPopup.querySelector('.social__comments').append(commentFragmentList);
+  currentCommentsCount = 0;
+}
 
+function renderComments(comments) {
+  clearComments();
+  currentComments = comments;
+  loadComments();
 }
 function hidePhotoPopup(e) {
   e.preventDefault();
+  clearComments();
   hide(bigPhotoPopup);
   document.removeEventListener('keydown', onEscapeKeydown);
   document.body.classList.remove('modal-open');
+
 }
 function showPhotoPopup() {
   document.body.classList.add('modal-open');
@@ -56,14 +78,13 @@ function openBigPhotoPopup(photoId) {
     renderComments(currentPhoto.comments);
     bigPhotoPopup.querySelector('.big-picture__img img').src = currentPhoto.url;
     bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes.length;
-    bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = currentPhoto.comments.length;
     bigPhotoPopup.querySelector('.social__comment-total-count').textContent = currentPhoto.comments.length;
     bigPhotoPopup.querySelector('.social__caption').textContent = currentPhoto.description;
-    hide(bigPhotoPopup.querySelector('.social__comment-shown-count'));
-    hide(bigPhotoPopup.querySelector('.comments-loader'));
+    bigPhotoPopup.querySelector('.likes-count').textContent = currentPhoto.likes;
+
   }
 }
 
 popupCancelElement.addEventListener('click', hidePhotoPopup);
-
+commentsLoadBtn.addEventListener('click', onLoadBtnClick);
 export { openBigPhotoPopup };
diff --git a/js/consts.js b/js/consts.js
index 36ed269..b127679 100644
--- a/js/consts.js
+++ b/js/consts.js
@@ -36,5 +36,6 @@ const MESSAGES = [
   'Лица у людей на фотке перекошены, как будто их избивают.Как можно было поймать такой неудачный момент ? !',
 ];
 const PHOTOS_COUNT = 25;
+const COMMENTS_STEP = 5;
 
-export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT };
+export { NAMES, DESCRIPTIONS, MESSAGES, PHOTOS_COUNT, COMMENTS_STEP };

From 676597cae4b01a7e1aa6425a7fe4bae6681f9e94 Mon Sep 17 00:00:00 2001
From: Daniil888-m <daniil.kolotygin80@gmail.com>
Date: Wed, 18 Dec 2024 22:24:49 +0300
Subject: [PATCH 2/2] realized point 4.8

---
 index.html              |  2 +-
 js/big-picture-popup.js | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index d9ad13b..f6735bc 100644
--- a/index.html
+++ b/index.html
@@ -40,7 +40,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
             </fieldset>
 
             <!-- Форма редактирования изображения -->
-            <div class="img-upload__overlay  hidden">
+            <div class="img-upload__overlay hidden">
               <div class="img-upload__wrapper">
                 <div class="img-upload__preview-container">
 
diff --git a/js/big-picture-popup.js b/js/big-picture-popup.js
index 2037cc6..9d2a09c 100644
--- a/js/big-picture-popup.js
+++ b/js/big-picture-popup.js
@@ -7,7 +7,7 @@ const popupCancelElement = document.querySelector('.big-picture__cancel');
 const commentsLoadBtn = bigPhotoPopup.querySelector('.comments-loader');
 
 let currentComments = null;
-let currentCommentsCount = 0;
+let currentShownCommentsCount = 0;
 
 function onEscapeKeydown(e) {
   if (e.key === 'Escape') {
@@ -21,8 +21,8 @@ function onLoadBtnClick(e) {
 }
 
 function loadComments() {
-  if (currentComments.length > currentCommentsCount) {
-    currentComments.slice(currentCommentsCount, currentCommentsCount + COMMENTS_STEP).forEach((comment) => {
+  if (currentComments.length > currentShownCommentsCount) {
+    currentComments.slice(currentShownCommentsCount, currentShownCommentsCount + COMMENTS_STEP).forEach((comment) => {
       const commEl = document.createElement('li');
       commEl.className = 'social__comment';
 
@@ -40,16 +40,17 @@ function loadComments() {
       commEl.append(imgEl);
       commEl.append(pEl);
       bigPhotoPopup.querySelector('.social__comments').append(commEl);
-      currentCommentsCount++;
+      currentShownCommentsCount++;
     });
 
     bigPhotoPopup.querySelector('.social__comment-shown-count').textContent = bigPhotoPopup.querySelectorAll('.social__comment').length;
+    checkShownCommentsCount();
   }
 }
 
 function clearComments() {
   bigPhotoPopup.querySelector('.social__comments').innerHTML = '';
-  currentCommentsCount = 0;
+  currentShownCommentsCount = 0;
 }
 
 function renderComments(comments) {
@@ -85,6 +86,14 @@ function openBigPhotoPopup(photoId) {
   }
 }
 
+function checkShownCommentsCount() {
+  if (currentComments.length <= currentShownCommentsCount) {
+    hide(commentsLoadBtn);
+  } else {
+    show(commentsLoadBtn);
+  }
+}
+
 popupCancelElement.addEventListener('click', hidePhotoPopup);
 commentsLoadBtn.addEventListener('click', onLoadBtnClick);
 export { openBigPhotoPopup };