Merge pull request #13 from PAVLUXAN/module12-task1

Author: keksobot

js/api.js

@@ -1,32 +1,32 @@
-const getData = (onSuccess, onError) => {
-  fetch('https://31.javascript.htmlacademy.pro/kekstagram/data')
-    .then((response) => {
-      if (response.ok) {
-        return response.json();
-      }
-      throw new Error(`${response.status} - ${response.statusText}`);
-    })
-    .then((data) => onSuccess(data))
-    .catch(() => onError());
-};
+const getData = () => fetch('https://31.javascript.htmlacademy.pro/kekstagram/data')
+  .then((response) => {
+    if (response.ok) {
+      return response.json();
+    }
+    throw new Error(`${response.status} - ${response.statusText}`);
+  })
+  .then((data) => ({
+    hasError: false,
+    data,
+  }))
+  .catch((error) => ({
+    hasError: true,
+    error,
+  }));
+
+const sendData = (body) => fetch('https://31.javascript.htmlacademy.pro/kekstagram',
+  {
+    method: 'POST',
+    body
+  }
+)
+  .then((response) => {
+    if (response.ok) {
+      return null;
+    }
+    throw new Error(`${response.status} - ${response.statusText}`);
+  })
+  .catch((error) => error);
 
-const sendData = (onSuccess, onError, body) => {
-  fetch('https://31.javascript.htmlacademy.pro/kekstagram',
-    {
-      method: 'POST',
-      body,
-    },
-  )
-    .then((response) => {
-      if (response.ok) {
-        onSuccess();
-        return;
-      }
-      onError();
-    })
-    .catch(() => {
-      onError();
-    });
-};
 
 export { getData, sendData };

js/filter.js

@@ -0,0 +1,51 @@
+import {debounce} from './util.js';
+
+import { renderPhoto } from './render-photo.js';
+
+const FILTER = {
+  default:'filter-default',
+  random: 'filter-random',
+  discussed: 'filter-discussed'
+};
+
+let currentFilter = FILTER.default;
+
+const filterPanel = document.querySelector('.img-filters');
+const ACTIVE_BUTTON_CLASS = 'img-filters__button--active';
+
+const debounceRender = debounce(renderPhoto);
+
+const applyFilter = (photos) => {
+  let filteredPictures = [];
+  if(currentFilter === FILTER.default) {
+    filteredPictures = photos;
+  }
+  if(currentFilter === FILTER.random) {
+    filteredPictures = photos.toSorted(() => 0.5 - Math.random()).slice(0, 10);
+  }
+  if(currentFilter === FILTER.discussed) {
+    filteredPictures = photos.toSorted((a,b) => b.comments.length - a.comments.length);
+  }
+  //renderPhoto(filteredPictures);
+  debounceRender(filteredPictures);
+};
+
+const getHandleFilter = (photos) => (evt) => {
+  const targetButton = evt.target;
+  const activeButton = document.querySelector(`.${ACTIVE_BUTTON_CLASS}`);
+  if (!targetButton.matches('button')) {
+    return;
+  }
+  if (activeButton === targetButton) {
+    return;
+  }
+  activeButton.classList.toggle(ACTIVE_BUTTON_CLASS);
+  targetButton.classList.toggle(ACTIVE_BUTTON_CLASS);
+  currentFilter = targetButton.getAttribute('id');
+  applyFilter(photos);
+};
+
+export const initFilter = (photos) => {
+  filterPanel.classList.remove('img-filters--inactive');
+  filterPanel.addEventListener('click', getHandleFilter(photos));
+};

js/img-form-uploader.js

@@ -105,21 +105,18 @@ const unblockSubmitButton = () => {
 const handleSubmit = (evt) =>{
   evt.preventDefault();
   blockSubmitButton();
-
-  sendData(
-    () => {
-      document.removeEventListener('keydown', onEscapeKeydown);
+  sendData(new FormData(evt.target))
+    .then((error) => {
       unblockSubmitButton();
-      showSuccess();
-    },
-    () => {
       document.removeEventListener('keydown', onEscapeKeydown);
-      showErrorSending();
-      unblockSubmitButton();
-    },
-    new FormData(evt.target),
-  );
-};
 
-imgUploadForm.addEventListener('submit', handleSubmit);
+      if (error) {
+        showErrorSending();
+        return;
+      }
 
+      showSuccess();
+      uploadOverlay.classList.add('hidden');
+    });
+};
+imgUploadForm.addEventListener('submit', handleSubmit);

js/main.js

@@ -2,6 +2,16 @@ import {renderPhoto} from './render-photo.js';
 import './img-form-uploader.js';
 import { getData } from './api.js';
 import { showErrorGetting } from './response.js';
+import { initFilter } from './filter.js';
 
-getData(renderPhoto, showErrorGetting);
+getData()
+  .then((response) => {
+    if (response.hasError) {
+      showErrorGetting();
+      return;
+    }
+    const { data = [] } = response;
+    renderPhoto(data);
+    initFilter(data);
+  });
 

js/render-big-photo.js

@@ -28,9 +28,8 @@ const closeBigPicture = () =>{
   document.removeEventListener('keydown', onEscKeyDown);
 };
 
-export const openBigPicture = (pictureId, photos) =>{
-  const currentPhoto = photos.find((photo) => photo.id === Number(pictureId));
-
+export const openBigPicture = (photo) =>{
+  const currentPhoto = photo;
   bigPictureImgNode.src = currentPhoto.url;
   likesCountNode.textContent = currentPhoto.likes;
   commentsCaptionNode.textContent = currentPhoto.description;

js/render-photo.js

@@ -1,26 +1,42 @@
-//import {photos} from './create-desc.js';
 import { openBigPicture } from './render-big-photo.js';
 
 const template = document.querySelector('#picture').content.querySelector('.picture');
 const container = document.querySelector('.pictures');
 const fragment = document.createDocumentFragment();
 
+const clearPhotos = () => {
+  document.querySelectorAll('a.picture').forEach((item) => item.remove());
+};
+
+let currentPhotos = [];
+
+const onPictureClick = (evt) => {
+  const target = evt.target.closest('.picture');
+  if (!target) {
+    return;
+  }
+
+  const id = Number(target.dataset.pictureId);
+  const photo = currentPhotos.find((p) => p.id === id);
+  if (photo) {
+    openBigPicture(photo);
+  }
+};
+
 export const renderPhoto = (photos) => {
-  photos.forEach((photo) => {
+  clearPhotos();
+  currentPhotos = photos;
+
+  currentPhotos.forEach((photo) => {
     const thumbnail = template.cloneNode(true);
     thumbnail.dataset.pictureId = photo.id;
-    const image = thumbnail.querySelector('.picture__img');
-    image.src = photo.url;
-    image.alt = photo.description;
+    thumbnail.querySelector('.picture__img').src = photo.url;
+    thumbnail.querySelector('.picture__img').alt = photo.description;
     thumbnail.querySelector('.picture__comments').textContent = photo.comments.length;
     thumbnail.querySelector('.picture__likes').textContent = photo.likes;
     fragment.appendChild(thumbnail);
   });
+
   container.appendChild(fragment);
-  container.addEventListener('click', (evt) => {
-    const currentPictureNode = evt.target.closest('.picture');
-    if (currentPictureNode) {
-      openBigPicture(currentPictureNode.dataset.pictureId, photos);
-    }
-  });
+  container.addEventListener('click',onPictureClick);
 };

js/util.js

@@ -18,4 +18,14 @@ const selectWordByCount = (num, nominative, genitiveSingular, genitivePlural) =>
     : genitiveSingular;
 };
 
-export {getRandomNumber, getRandomItem, isEscapeKey, selectWordByCount,};
+const debounce = (callback, timeoutDelay = 500) => {
+  let timeoutId;
+  return (rest) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      callback.call(this,rest);
+    }, timeoutDelay);
+  };
+};
+
+export {getRandomNumber, getRandomItem, isEscapeKey, selectWordByCount, debounce};