add photos filtering

Author: AnastasiiaXX

js/helpers.js

@@ -1,58 +1,11 @@
-const checkStringLength = (string = 'str', maxLength = 1) => string.length <= maxLength;
+const debounce = (callback, timeoutDelay = 500) => {
+  let timeoutId;
 
-checkStringLength('string', 3);
-
-const isPalindrome = (string = '') => {
-  const newString = string.toLowerCase().replaceAll(' ', '');
-  let result = '';
-
-  for(let i = newString.length - 1; i >= 0; i -= 1) {
-    const char = newString[i];
-    result += char;
-  }
-
-  return newString === result;
-};
-
-isPalindrome('А роза упала на лапу азора');
-
-const parseStringToInt = (string) => {
-  string = string.toString();
-  let res = '';
-  for (let i = 0; i < string.length; i += 1) {
-    const parsed = parseInt(string[i], 10);
-    const isDigit = (!isNaN(parsed));
-    if (isDigit) {
-      res += parsed;
-    }
-  }
-
-  return res ? +res : NaN;
-};
-
-parseStringToInt('78 dogs');
-
-export const getRandomInteger = (num1, num2) => {
-  const lower = Math.ceil(Math.min(num1, num2));
-  const upper = Math.floor(Math.max(num1, num2));
-  const result = Math.random() * (upper - lower + 1) + lower;
-  return Math.floor(result);
-};
-
-export const getRandomElement = (arr) => arr[getRandomInteger(0, arr.length - 1)];
-
-const stringToMinutes = (string) => {
-  const [hours, minutes] = string.split(':').map((el) => parseInt(el, 10));
-  return hours * 60 + minutes;
-};
-
-export const checkWorkingTime = (workDayStart, workDayEnd, meetingStartTime, meetingDuration) => {
-  const workStart = stringToMinutes(workDayStart);
-  const workEnd = stringToMinutes(workDayEnd);
-  const meetingStart = stringToMinutes(meetingStartTime);
-  const meetingEnd = meetingStart + meetingDuration;
-
-  return meetingStart >= workStart && meetingEnd <= workEnd;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
 };
+const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export const isEscapeKey = (evt) => evt.key === 'Escape';
+export { debounce, isEscapeKey };

js/main.js

@@ -4,11 +4,14 @@ import { initUploadForm, resetUploadForm } from './upload-form.js';
 import { getData } from './api';
 import { showDataError, showSuccessMessage, showErrorMessage } from './notifications.js';
 import { setUploadFormSubmit } from './upload-form.js';
+import { showFilters, initPhotosFiltering } from './photos-filters.js';
 
 initUploadForm();
 getData()
   .then((photos) => {
     renderThumbnails(photos);
+    showFilters();
+    initPhotosFiltering(photos);
     showFullPhoto(photos);
   })
   .catch((e)=> {

js/photos-filters.js

@@ -0,0 +1,51 @@
+import { renderThumbnails } from './thumbnails.js';
+import { debounce } from './helpers.js';
+
+const RERENDER_TIME = 500;
+
+const filtersBlock = document.querySelector('.img-filters');
+const filterDefaultBtn = document.querySelector('#filter-default');
+const filterRandomBtn = document.querySelector('#filter-random');
+const filterDiscussedBtn = document.querySelector('#filter-discussed');
+
+const showFilters = () => {
+  filtersBlock.classList.remove('img-filters--inactive');
+};
+
+const clearThumbnails = () => {
+  const thumbnails = document.querySelectorAll('.picture');
+  thumbnails.forEach((thumbnail) => {
+    thumbnail.remove();
+  });
+};
+
+const toggleActiveBtn = (btnClicked, activeclass) => {
+  const activeBtn = document.querySelector(`.${activeclass}`);
+  activeBtn.classList.remove(activeclass);
+  btnClicked.classList.add(activeclass);
+};
+
+const rerenderThumbnails = (btn, photos, cb = null) => {
+  toggleActiveBtn(btn, 'img-filters__button--active');
+  const photosToRender = cb ? cb(photos) : photos;
+  clearThumbnails();
+  renderThumbnails(photosToRender);
+};
+
+const debouncedRender = debounce(rerenderThumbnails, RERENDER_TIME);
+
+const initPhotosFiltering = (photos) => {
+  filterDefaultBtn.addEventListener('click', () => {
+    debouncedRender(filterDefaultBtn, photos);
+  });
+
+  filterRandomBtn.addEventListener('click', () => {
+    debouncedRender(filterRandomBtn, photos, () => photos.slice().sort(() => 0.5 - Math.random()).slice(0, 10));
+  });
+
+  filterDiscussedBtn.addEventListener('click', () => {
+    debouncedRender(filterDiscussedBtn, photos, () => photos.slice().sort((a, b) => b.comments.length - a.comments.length));
+  });
+};
+
+export { showFilters, initPhotosFiltering };