From b66730a82b6892ba57ccd2ee5a8619eef954d8aa Mon Sep 17 00:00:00 2001
From: Van1s1mys <malkovsin@gmail.com>
Date: Fri, 22 Mar 2024 21:32:06 +0500
Subject: [PATCH] (bigpicture)[script]fixes

---
 js/bigPicture.js | 49 ++++++++++++++++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 16 deletions(-)

diff --git a/js/bigPicture.js b/js/bigPicture.js
index 7a93bb2..25641fc 100644
--- a/js/bigPicture.js
+++ b/js/bigPicture.js
@@ -1,26 +1,24 @@
-export const showBigPicture = (post) => {
+const openModal = () => {
   const bigPicture = document.querySelector('.big-picture');
   const body = document.querySelector('body');
 
   bigPicture.classList.remove('hidden');
   body.classList.add('modal-open');
+};
 
-  const bigPictureImage = bigPicture.querySelector('.big-picture__img img');
+const renderImageAndDescription = (post) => {
+  const bigPictureImage = document.querySelector('.big-picture__img img');
   bigPictureImage.src = post.url;
 
-  const bigPictureLikes = bigPicture.querySelector('.likes-count');
+  const bigPictureLikes = document.querySelector('.likes-count');
   bigPictureLikes.textContent = post.likes;
 
-  const bigPictureCommentsSize = bigPicture.querySelector('.social__comment-shown-count');
-  bigPictureCommentsSize.textContent = post.comments.length.toString();
-
-  const bigPictureCommentsTotal = bigPicture.querySelector('.social__comment-total-count');
-  bigPictureCommentsTotal.textContent = post.comments.length.toString();
-
-  const bigPictureCaption = bigPicture.querySelector('.social__caption');
+  const bigPictureCaption = document.querySelector('.social__caption');
   bigPictureCaption.textContent = post.description;
+};
 
-  const commentsContainer = bigPicture.querySelector('.social__comments');
+const renderComments = (post) => {
+  const commentsContainer = document.querySelector('.social__comments');
   post.comments.forEach((comment) => {
     const commentItem = document.createElement('li');
     commentItem.classList.add('social__comment');
@@ -41,8 +39,14 @@ export const showBigPicture = (post) => {
     commentsContainer.appendChild(commentItem);
   });
 
-  const commentCount = bigPicture.querySelector('.social__comment-count');
-  const commentsLoader = bigPicture.querySelector('.comments-loader');
+  const bigPictureCommentsSize = document.querySelector('.social__comment-shown-count');
+  bigPictureCommentsSize.textContent = post.comments.length.toString();
+
+  const bigPictureCommentsTotal = document.querySelector('.social__comment-total-count');
+  bigPictureCommentsTotal.textContent = post.comments.length.toString();
+
+  const commentCount = document.querySelector('.social__comment-count');
+  const commentsLoader = document.querySelector('.comments-loader');
   commentCount.classList.add('hidden');
   commentsLoader.classList.add('hidden');
 };
@@ -56,12 +60,25 @@ const close = () => {
 };
 
 export const closeBigPicture = () => {
-  document.addEventListener('keydown', (event) => {
+  const closeHandler = (event) => {
     if (event.key === 'Escape' || event.code === 'Escape') {
       close();
+      document.removeEventListener('keydown', closeHandler);
     }
-  });
+  };
+
+  document.addEventListener('keydown', closeHandler);
+
   const closeButton = document.getElementById('picture-cancel');
-  closeButton.addEventListener('click', close);
+  const clickHandler = () => {
+    close();
+    closeButton.removeEventListener('click', clickHandler);
+  };
+  closeButton.addEventListener('click', clickHandler);
+};
 
+export const showBigPicture = (post) => {
+  openModal();
+  renderImageAndDescription(post);
+  renderComments(post);
 };