fix: переделала всю логику фильтров

index.html

@@ -35,7 +35,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
 
             <!-- Изначальное состояние поля для загрузки изображения -->
             <fieldset class="img-upload__start">
-              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required>
+              <input type="file" id="upload-file" class="img-upload__input  visually-hidden" name="filename" required accept="image/png, image/jpeg">
               <label for="upload-file" class="img-upload__label  img-upload__control">Загрузить</label>
             </fieldset>
 

js/filters.js

@@ -1,3 +1,6 @@
+import { renderThumbnails } from './render-photos.js';
+import { debounce } from './utils.js';
+
 const filters = document.querySelector('.img-filters');
 const filtersButtons = filters.querySelectorAll('.img-filters__button');
 
@@ -16,34 +19,37 @@ const ACTIVE_BUTTON_CLASS = 'img-filters__button--active';
 const PHOTO_NUMBERS_DEFAULT = 25;
 const PHOTO_NUMBERS_RANDOM = 10;
 
-
 const showFilters = () => filters.classList.remove('img-filters--inactive');
 
-const setFilterClick = (cb) => {
-  filters.addEventListener('click', (evt) => {
-    if(evt.target.classList.contains('img-filters__button') && !evt.target.classList.contains(ACTIVE_BUTTON_CLASS)) {
-      filtersButtons.forEach((button) => button.classList.remove(ACTIVE_BUTTON_CLASS));
-      const currentFilter = evt.target;
-      currentFilter.classList.add(ACTIVE_BUTTON_CLASS);
-      const dataFilterId = currentFilter.getAttribute('id');
-      cb(dataFilterId);
-    }
-  });
-};
+let dataFilterId;
+let photos = [];
 
-const getPhotosToRender = (photos, filter) => {
+const getPhotosToRender = (filter) => {
   let photosToRender = [];
   const copyPhotos = photos.slice();
   if (filter === FILTERS.random) {
     photosToRender = copyPhotos.sort(SORT_FUNCTIONS.random).slice(0, PHOTO_NUMBERS_RANDOM);
-    return photosToRender;
   } else if (filter === FILTERS.discussed) {
     photosToRender = copyPhotos.sort(SORT_FUNCTIONS.discussed).slice(0, PHOTO_NUMBERS_DEFAULT);
-    return photosToRender;
   } else{
     photosToRender = copyPhotos.slice(0, PHOTO_NUMBERS_DEFAULT);
-    return photosToRender;
   }
+  debounce(renderThumbnails(photosToRender));
+};
+
+const setFilterClick = (evt) => {
+  if(evt.target.classList.contains('img-filters__button') && !evt.target.classList.contains(ACTIVE_BUTTON_CLASS)) {
+    filtersButtons.forEach((button) => button.classList.remove(ACTIVE_BUTTON_CLASS));
+    const currentFilter = evt.target;
+    currentFilter.classList.add(ACTIVE_BUTTON_CLASS);
+    dataFilterId = currentFilter.getAttribute('id');
+    getPhotosToRender(dataFilterId);
+  }
+};
+
+const setFilters = (photosData) => {
+  filters.addEventListener('click', setFilterClick);
+  photos = photosData;
 };
 
-export { showFilters, setFilterClick, getPhotosToRender };
+export { showFilters, setFilters, getPhotosToRender };

js/main.js

@@ -1,28 +1,25 @@
 import { renderThumbnails } from './render-photos.js';
-import { getPhotosToRender } from './filters.js';
+// import { getPhotosToRender } from './filters.js';
 import { getBigPicture } from './open-full-photo.js';
 import { renderFullPhoto } from './render-full-photo.js';
 import {setUserFormSubmit} from './validate-form.js';
 import {closeUploadForm} from './open-form.js';
 import './effects-photo.js';
 import { getData, ErrorIdTemplates } from './api.js';
-import { showRequestInfoTimeout, debounce } from './utils.js';
-import { showFilters, setFilterClick } from './filters.js';
+import { showRequestInfoTimeout } from './utils.js';
+import { showFilters, setFilters } from './filters.js';
 import './upload-photo.js';
 
 const PHOTO_ITEMS_NUMBER = 25;
-const RERENDER_DELAY = 500;
+// const RERENDER_DELAY = 500;
 
 getData()
   .then((photos) => {
     const newPhotos = photos.slice(0, PHOTO_ITEMS_NUMBER);
     renderThumbnails(newPhotos);
-    setFilterClick(debounce(
-      (cb) => renderThumbnails(getPhotosToRender(photos, cb)),
-      RERENDER_DELAY,
-    ));
-    getBigPicture((chosenPhotoID) => renderFullPhoto(chosenPhotoID, newPhotos));
     showFilters();
+    setFilters(photos);
+    getBigPicture((chosenPhotoID) => renderFullPhoto(chosenPhotoID, newPhotos));
   })
   .catch(() => {
     showRequestInfoTimeout(ErrorIdTemplates.LOAD_ERROR);

js/upload-photo.js

@@ -1,6 +1,8 @@
 import { imgUploadForm } from './open-form.js';
+import { showRequestInfoTimeout } from './utils.js';
+import { ErrorIdTemplates } from './api.js';
 
-const FILE_TYPES = ['jpg', 'jpeg', 'png'];
+const FILE_TYPES = ['.jpg', '.jpeg', '.png'];
 
 const fileChooser = imgUploadForm.querySelector('.img-upload__input');
 
@@ -14,5 +16,7 @@ fileChooser.addEventListener('change', () => {
 
   if (matches) {
     imgPhotoPreview.src = URL.createObjectURL(file);
+  } else{
+    showRequestInfoTimeout(ErrorIdTemplates. LOAD_ERROR, 'Неверный тип файла');
   }
 });

js/utils.js

@@ -37,9 +37,12 @@ const showRequestInfo = (templateId) => {
 };
 
 
-const showRequestInfoTimeout = (templateId) => {
+const showRequestInfoTimeout = (templateId, message) => {
   const template = findTemplate(templateId);
   const errorElement = template.cloneNode(true);
+  if(message) {
+    errorElement.querySelector('.data-error__title').textContent = message;
+  }
   document.body.append(errorElement);
 
   setTimeout(() => {