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

js/api.js

@@ -29,15 +29,15 @@ const load = async (route, method = Method.GET, body = null) => {
       throw new Error();
     }
 
-    return method === Method.GET ? response.json() : response;
+    return method === Method.GET ? await response.json() : await response;
 
   } catch {
     throw new Error(ErrorText[method]);
   }
 };
 
-const getData = () => load(Route.GET_DATA);
+const getData = async () => await load(Route.GET_DATA);
 
-const sendData = (body) => load(Route.SEND_DATA, Method.POST, body);
+const sendData = async (body) => await load(Route.SEND_DATA, Method.POST, body);
 
 export { getData, sendData };

js/main.js

@@ -1,28 +1,49 @@
 import { getData } from './api.js';
-import { renderGallery } from './ui/gallery.js';
+import { initGallery } from './ui/gallery.js';
 import { initBigPicture } from './ui/big-picture/meta.js';
 import { initCommentsLoader } from './ui/big-picture/comments.js';
 import { initForm } from './ui/form/index.js';
 import { showAlert } from './ui/messages.js';
+import { initFilters } from './ui/form/filter.js';
+import { debounce } from './utils/common.js';
 
-const container = document.querySelector('.pictures');
-const template = document.querySelector('#picture')?.content?.querySelector('.picture');
+const dom = {
+  container: document.querySelector('.pictures'),
+  template: document.querySelector('#picture')?.content?.querySelector('.picture'),
+  filters: document.querySelector('.img-filters'),
+};
 
 initBigPicture();
 initCommentsLoader();
 initForm();
 
-const initGallery = async () => {
+const initApp = async () => {
+  const { container, template, filters } = dom;
+
   if (!container || !template) {
     return;
   }
 
   try {
     const pictures = await getData();
-    renderGallery(pictures, container, template);
+
+    const gallery = initGallery({ container, template });
+
+    const debouncedRender = debounce((filtered) => {
+      gallery.render(filtered);
+    }, 500);
+
+    initFilters({
+      container: filters,
+      pictures,
+      onChange: debouncedRender,
+    });
+
+    gallery.render(pictures);
+
   } catch (err) {
     showAlert(err.message);
   }
 };
 
-initGallery();
+initApp();

js/ui/form/filter.js

@@ -0,0 +1,71 @@
+const PICTURES_COUNT = 10;
+
+const Filter = {
+  DEFAULT: 'filter-default',
+  RANDOM: 'filter-random',
+  DISCUSSED: 'filter-discussed',
+};
+
+const shuffle = (array) => {
+  const result = [...array];
+
+  for (let i = result.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [result[i], result[j]] = [result[j], result[i]];
+  }
+
+  return result;
+};
+
+const filterPictures = (pictures, filterType) => {
+  switch (filterType) {
+    case Filter.RANDOM:
+      return shuffle(pictures).slice(0, PICTURES_COUNT);
+
+    case Filter.DISCUSSED:
+      return [...pictures].sort(
+        (a, b) => b.comments.length - a.comments.length
+      );
+
+    case Filter.DEFAULT:
+    default:
+      return [...pictures];
+  }
+};
+
+const initFilters = ({ container, pictures, onChange }) => {
+  if (!(container instanceof HTMLElement)) {
+    throw new Error('Filter container not found');
+  }
+
+  let currentFilter = Filter.DEFAULT;
+
+  container.classList.remove('img-filters--inactive');
+
+  container.addEventListener('click', (evt) => {
+    const button = evt.target.closest('.img-filters__button');
+    if (!button) {
+      return;
+    }
+
+    const newFilter = button.id;
+
+    if (newFilter === currentFilter) {
+      return;
+    }
+
+    const activeButton = container.querySelector('.img-filters__button--active');
+    if (activeButton) {
+      activeButton.classList.remove('img-filters__button--active');
+    }
+
+    button.classList.add('img-filters__button--active');
+
+    currentFilter = newFilter;
+
+    const filtered = filterPictures(pictures, currentFilter);
+    onChange(filtered);
+  });
+};
+
+export { initFilters, filterPictures, Filter };

js/ui/gallery.js

@@ -1,21 +1,39 @@
 import { renderThumbnails } from './thumbnails.js';
 import { showBigPicture } from './big-picture/meta.js';
 
-const renderGallery = (pictures, container, template) => {
-  const picturesMap = new Map(pictures.map((item) => [item.id, item]));
+const initGallery = ({ container, template }) => {
+  let currentPictures = [];
 
-  container.addEventListener('click', (evt) => {
-    const thumbnail = evt.target.closest('[data-thumbnail-id]');
-    if (!thumbnail) {
-      return;
-    }
+  const render = (pictures) => {
+    currentPictures = pictures;
+    renderThumbnails(currentPictures, container, template);
+  };
 
-    evt.preventDefault();
-    const picture = picturesMap.get(Number(thumbnail.dataset.thumbnailId));
-    showBigPicture(picture);
-  });
+  const initEvents = () => {
+    container.addEventListener('click', (evt) => {
+      const thumbnail = evt.target.closest('[data-thumbnail-id]');
+      if (!thumbnail) {
+        return;
+      }
 
-  renderThumbnails(pictures, container, template);
+      evt.preventDefault();
+
+      const id = Number(thumbnail.dataset.thumbnailId);
+
+      const picture = currentPictures.find((item) => item.id === id);
+      if (!picture) {
+        return;
+      }
+
+      showBigPicture(picture);
+    });
+  };
+
+  initEvents();
+
+  return {
+    render,
+  };
 };
 
-export { renderGallery };
+export { initGallery };

js/ui/thumbnails.js

@@ -17,6 +17,8 @@ const renderThumbnails = (pictures, container, template) => {
     throw new TypeError('Pictures must be an array');
   }
 
+  container.querySelectorAll('.picture').forEach((element) => element.remove());
+
   const fragment = document.createDocumentFragment();
 
   pictures.forEach((picture) => {

js/utils/common.js

@@ -1,3 +1,11 @@
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
-export { isEscapeKey };
+const debounce = (callback, timeoutDelay = 500) => {
+  let timeoutId;
+  return (...rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback.apply(this, rest), timeoutDelay);
+  };
+};
+
+export { isEscapeKey, debounce };