refactor message handlers

js/comments.js

@@ -1,5 +1,6 @@
-export const COMMENTS_PER_PAGE = 5;
-export const renderComments = (commentsData, container) => {
+const COMMENTS_PER_PAGE = 5;
+
+const renderComments = (commentsData, container) => {
   commentsData.forEach((commentData) => {
     const comment = document.createElement('li');
     const avatar = document.createElement('img');
@@ -14,24 +15,20 @@ export const renderComments = (commentsData, container) => {
     commentText.classList.add('social__text');
     commentText.textContent = commentData.message;
 
-    comment.append(avatar);
-    comment.append(commentText);
-
+    comment.append(avatar, commentText);
     container.append(comment);
   });
 };
 
-export const paginateComments = (comments, container) => {
-  const firstComments = comments.slice(0, COMMENTS_PER_PAGE);
-  let currentIndex = COMMENTS_PER_PAGE;
-  renderComments(firstComments, container);
-  const loadMoreComments = () => {
-    const nextCommentsChunk = comments.slice(currentIndex, currentIndex + COMMENTS_PER_PAGE);
-    renderComments(nextCommentsChunk, container);
-    currentIndex += COMMENTS_PER_PAGE;
-  };
-  return {
-    loadMore: loadMoreComments,
-    getShownCount: () => container.children.length
-  };
+const initCommentsPagination = (comments, container) => {
+  renderComments(comments.slice(0, COMMENTS_PER_PAGE), container);
+  return COMMENTS_PER_PAGE;
 };
+
+const loadMoreComments = (comments, container, currentIndex) => {
+  const nextChunk = comments.slice(currentIndex, currentIndex + COMMENTS_PER_PAGE);
+  renderComments(nextChunk, container);
+  return currentIndex + COMMENTS_PER_PAGE;
+};
+
+export { COMMENTS_PER_PAGE, loadMoreComments, initCommentsPagination };

js/notifications.js

@@ -4,6 +4,7 @@ const ERROR_SHOW_TIME = 5000;
 
 const dataErrorTemplate = document.querySelector('#data-error');
 const body = document.querySelector('body');
+
 const showDataError = () => {
   const template = dataErrorTemplate.content.cloneNode(true);
   const errorDiv = template.firstElementChild;
@@ -12,36 +13,36 @@ const showDataError = () => {
     errorDiv.remove();
   }, ERROR_SHOW_TIME);
 };
-const showMessage = (templateId, buttonClass) => {
-  let onDocumentKeydown = null;
-  let onMessageDivClick = null;
 
+const showMessage = (templateId, buttonClass) => {
   const template = document.querySelector(templateId).content.cloneNode(true);
   const messageDiv = template.firstElementChild;
   const messageButton = messageDiv.querySelector(buttonClass);
   body.append(template);
 
-  const onMessageButtonClick = () => {
+  const closeMessage = () => {
     messageDiv.remove();
-    document.removeEventListener('keydown', onDocumentKeydown, true);
-    messageDiv.removeEventListener('click', onMessageDivClick);
+    document.removeEventListener('keydown', handleKeydown, true);
+    messageButton.removeEventListener('click', closeMessage);
+    messageDiv.removeEventListener('click', handleOverlayClick);
   };
 
-  onDocumentKeydown = (evt) => {
+  function handleKeydown(evt) {
     evt.stopPropagation();
     if (isEscapeKey(evt)) {
-      onMessageButtonClick();
+      closeMessage();
     }
-  };
+  }
 
-  onMessageDivClick = (evt) => {
+  function handleOverlayClick(evt) {
     if (evt.target === messageDiv) {
-      onMessageButtonClick();
+      closeMessage();
     }
-  };
-  messageButton.addEventListener('click', onMessageButtonClick);
-  document.addEventListener('keydown', onDocumentKeydown, true);
-  messageDiv.addEventListener('click', onMessageDivClick);
+  }
+
+  messageButton.addEventListener('click', closeMessage);
+  document.addEventListener('keydown', handleKeydown, true);
+  messageDiv.addEventListener('click', handleOverlayClick);
 };
 
 const showSuccessMessage = () => showMessage('#success', '.success__button');

js/photos-filters.js

@@ -1,3 +1,5 @@
+const ACTIVE_FILTER_CLASS = 'img-filters__button--active';
+
 const filtersBlock = document.querySelector('.img-filters');
 const filterDefault = document.querySelector('#filter-default');
 const filterRandom = document.querySelector('#filter-random');
@@ -17,18 +19,18 @@ const toggleActiveBtn = (btnClicked, activeClass) => {
 };
 const initPhotosFiltering = (photos, onRender) => {
   const onFilterDefaultClick = () => {
-    toggleActiveBtn(filterDefault, 'img-filters__button--active');
+    toggleActiveBtn(filterDefault, ACTIVE_FILTER_CLASS);
     onRender(photos);
   };
 
   const onFilterRandomClick = () => {
-    toggleActiveBtn(filterRandom, 'img-filters__button--active');
+    toggleActiveBtn(filterRandom, ACTIVE_FILTER_CLASS);
     const randomPhotos = photos.slice().sort(() => 0.5 - Math.random()).slice(0, 10);
     onRender(randomPhotos);
   };
 
   const onFilterDiscussedClick = () => {
-    toggleActiveBtn(filterDiscussed, 'img-filters__button--active');
+    toggleActiveBtn(filterDiscussed, ACTIVE_FILTER_CLASS);
     const discussedPhotos = photos.slice().sort((a, b) => b.comments.length - a.comments.length);
     onRender(discussedPhotos);
   };

js/show-full-photo.js

@@ -1,5 +1,5 @@
 import { closeModal, openModal } from './modal.js';
-import { COMMENTS_PER_PAGE, paginateComments } from './comments.js';
+import { COMMENTS_PER_PAGE, initCommentsPagination, loadMoreComments } from './comments.js';
 
 const fullPhotoModal = document.querySelector('.big-picture');
 const body = document.querySelector('body');
@@ -37,14 +37,16 @@ export const showFullPhoto = (photos) => {
     fillPhotoData(currentPhoto);
 
     commentsLoader.classList.toggle('hidden', currentPhoto.comments.length <= COMMENTS_PER_PAGE);
-    const pagination = paginateComments(currentPhoto.comments, comments);
-    shownCommentsCount.textContent = pagination.getShownCount();
+
+    let currentIndex = initCommentsPagination(currentPhoto.comments, comments);
+    shownCommentsCount.textContent = comments.children.length;
 
     const onCommentsLoaderClick = () => {
-      pagination.loadMore();
-      shownCommentsCount.textContent = pagination.getShownCount();
-      commentsLoader.classList.toggle('hidden', pagination.getShownCount() >= currentPhoto.comments.length);
+      currentIndex = loadMoreComments(currentPhoto.comments, comments, currentIndex);
+      shownCommentsCount.textContent = comments.children.length;
+      commentsLoader.classList.toggle('hidden', comments.children.length >= currentPhoto.comments.length);
     };
+
     if (currentCommentsHandler) {
       commentsLoader.removeEventListener('click', currentCommentsHandler);
       currentCommentsHandler = null;