Merge pull request #12 from MadinaSatem/module12-task1

Author: keksobot

js/filter.js

@@ -0,0 +1,48 @@
+import { renderThumbnails } from './render.js';
+import { debounce } from './util.js';
+
+const RANDOM_IMAGES_COUNT = 10;
+const filterForm = document.querySelector('.img-filters__form');
+const filterButtons = Array.from(filterForm.querySelectorAll('.img-filters__button'));
+
+let photosData = [];
+
+const getRandomPhotos = (arr) => {
+  const shuffled = arr.slice().sort(() => Math.random() - 0.5);
+  return shuffled.slice(0, RANDOM_IMAGES_COUNT);
+};
+
+const getDiscussedPhotos = (arr) => arr.slice().sort((a, b) => b.comments.length - a.comments.length);
+
+const applyFilter = (filterId) => {
+  let filtered = [];
+  switch (filterId) {
+    case 'filter-random':
+      filtered = getRandomPhotos(photosData);
+      break;
+    case 'filter-discussed':
+      filtered = getDiscussedPhotos(photosData);
+      break;
+    default:
+      filtered = photosData.slice();
+  }
+  renderThumbnails(filtered);
+};
+
+const onFilterClick = debounce((evt) => {
+  const btn = evt.target;
+  if (!btn.classList.contains('img-filters__button')) {
+    return;
+  }
+
+  filterButtons.forEach((button) => button.classList.remove('img-filters__button--active'));
+  btn.classList.add('img-filters__button--active');
+  applyFilter(btn.id);
+});
+
+const initFilters = (photos) => {
+  photosData = photos.slice();
+  filterForm.addEventListener('click', onFilterClick);
+};
+
+export { initFilters };

js/main.js

@@ -1,36 +1,27 @@
-import './util.js';
-import './form-message.js';
-import './form.js';
-import './effects.js';
-import { initEffects } from './effects.js';
+import { getPhotos } from './api.js';
 import { renderThumbnails, setThumbnailClickHandler } from './render.js';
-import { openUserModal, initModalListeners } from './modal.js';
+import { initFilters } from './filter.js';
+import { initModalListeners } from './modal.js';
 import { initFormListeners } from './form.js';
-import { getPhotos } from './api.js';
+import { initEffects } from './effects.js';
+
+const filtersContainer = document.querySelector('.img-filters');
 
 const init = async () => {
   try {
-    const photoDescriptions = await getPhotos();
+    const photos = await getPhotos();
 
-    renderThumbnails(photoDescriptions);
+    renderThumbnails(photos);
+    initFilters(photos);
 
-    setThumbnailClickHandler((photoId) => {
-      const photo = photoDescriptions.find((item) => item.id === photoId);
-      if (photo) {
-        openUserModal(photo);
-      }
-    });
-
-    document.querySelector('.img-filters').classList.remove('img-filters--inactive');
+    filtersContainer.classList.remove('img-filters--inactive');
   } catch (err) {
-    const template = document.querySelector('#data-error');
-    const errorElement = template.content.cloneNode(true);
-    document.body.appendChild(errorElement);
-
+    const errorTemplate = document.querySelector('#data-error').content.cloneNode(true);
+    document.body.appendChild(errorTemplate);
     setTimeout(() => {
-      const element = document.querySelector('.data-error');
-      if (element) {
-        element.remove();
+      const el = document.querySelector('.data-error');
+      if (el) {
+        el.remove();
       }
     }, 5000);
   }
@@ -41,4 +32,3 @@ const init = async () => {
 };
 
 init();
-

js/util.js

@@ -7,5 +7,14 @@ const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const isEnterKey = (evt) => evt.key === 'Enter';
 
+function debounce(callback, delay = 500) {
+  let timeoutId;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback(...args), delay);
+  };
+}
+
 export {getRandomArrayElement, isEscapeKey, isEnterKey};
 export {getRandomInteger};
+export { debounce };