Перламутровые пуговицы--

Решить проблему с удалением

js/components/filter.js

@@ -0,0 +1,59 @@
+import { debounce } from '../utils/debounce.js';
+
+const PICTURES_COUNT = 10;
+const Filter = {
+  DEFAULT: 'filter-default',
+  RANDOM: 'filter-random',
+  DISCUSSED: 'filter-discussed',
+};
+
+const filtersElement = document.querySelector('.img-filters');
+
+let currentFilter = '';
+let pictures = [];
+
+const randomSort = () => Math.random() - 0.5;
+
+const discussedSort = (pictureA, pictureB) =>
+  pictureB.comments.length - pictureA.comments.length;
+
+const filterPictures = () => {
+  switch (currentFilter) {
+    case Filter.RANDOM:
+      return [...pictures].sort(randomSort).slice(0, PICTURES_COUNT);
+    case Filter.DISCUSSED:
+      return [...pictures].sort(discussedSort);
+    default:
+      return [...pictures];
+  }
+};
+
+const turnFilterOn = (loadedPictures) => {
+  filtersElement.classList.remove('img-filters--inactive');
+  pictures = [...loadedPictures];
+  currentFilter = Filter.DEFAULT = '';
+};
+
+const setOnFilterClick = (cb) => {
+  const debouncedCallback = debounce(cb);
+
+  filtersElement.addEventListener('click', (evt) => {
+    if (!evt.target.classList.contains('img-filters__button')) {
+      return;
+    }
+
+    const clickedButton = evt.target;
+    if (clickedButton.id === currentFilter) {
+      return;
+    }
+
+    filtersElement
+      .querySelector('.img-filters__button--active')
+      .classList.remove('img-filters__button--active');
+    clickedButton.classList.add('img-filters__button--active');
+    currentFilter = clickedButton.id;
+    debouncedCallback(filterPictures());
+  });
+};
+
+export { setOnFilterClick, turnFilterOn, filterPictures };

js/main.js

@@ -17,6 +17,19 @@ import {
   showErrorMessage
 } from './components/message.js';
 
+import {
+  setOnFilterClick,
+  turnFilterOn,
+  filterPictures
+} from './components/filter.js';
+
+
+const onGetDataSuccess = (data) => {
+  turnFilterOn(data);
+  renderPictures(filterPictures());
+  setOnFilterClick(renderPictures);
+};
+
 const onSendDataSuccess = () => {
   hideModal();
   showSuccessMessage();
@@ -30,4 +43,4 @@ setOnFormSubmit(async (data) => {
   await sendData(onSendDataSuccess, onSendDataError, data);
 });
 
-getData(renderPictures, showAlert);
+getData(onGetDataSuccess, showAlert);

js/utils/debounce.js

@@ -0,0 +1,9 @@
+const debounce = (callback, timeoutDelay = 500) => {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+export { debounce };