Merge pull request #14 from natalya87324/criteria-check-and-tests

исправляет ошибки

Author: Spearance

index.html

@@ -257,4 +257,4 @@ <h2 class="data-error__title">Не удалось загрузить данны
   <script src="./js/main.js" type="module"></script>
 </body>
 
-</html>
+</html>

js/api.js

@@ -1,55 +1,36 @@
-import { initFilters } from './photos-filters.js';
-
 const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
 
+const STATUS_CODE_SUCCESS = 200;
+
 const Route = {
   GET_DATA: '/data',
   SEND_DATA: '/',
 };
 
-const DELAY_TIME = 5000;
-
-const dataErrorTemplate = document.querySelector('#data-error').content;
-
-const showErrorMessage = () => {
-  const errorElement = dataErrorTemplate.cloneNode(true);
-  const errorMessage = errorElement.querySelector('.data-error');
-  document.body.appendChild(errorMessage);
-  setTimeout(() => {
-    document.body.removeChild(errorMessage);
-  }, DELAY_TIME);
-  return errorMessage;
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
 };
 
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные. Попробуйте обновить страницу',
+  SEND_DATA: 'Не удалось отправить форму. Попробуйте ещё раз',
+};
 
-const getData = (onSuccess) => {
-  fetch(`${BASE_URL}${Route.GET_DATA}`)
+const load = (route, errorText, method = Method.GET, body = null) =>
+  fetch(`${BASE_URL}${route}`, { method, body })
     .then((response) => {
-      if (!response.ok) {
-        throw new Error(showErrorMessage);
+      if (response.status !== STATUS_CODE_SUCCESS) {
+        throw new Error();
       }
       return response.json();
     })
-    .then((photos) => {
-      onSuccess(photos);
-      initFilters(photos);
-    })
-    .catch((error) => showErrorMessage(error));
-};
-
-const sendData = (onSuccess, onFail, body) => {
-  fetch(`${BASE_URL}${Route.SEND_DATA}`,
-    {
-      method: 'POST',
-      body,
-    },
-  )
-    .then(() => {
-      onSuccess();
-    })
     .catch(() => {
-      onFail();
+      throw new Error(errorText);
     });
-};
 
-export { getData, sendData, showErrorMessage };
+const getData = () => load(Route.GET_DATA, ErrorText.GET_DATA);
+
+const sendData = (body) => load(Route.SEND_DATA, ErrorText.SEND_DATA, Method.POST, body);
+
+export { getData, sendData };

js/full-size-photo.js

@@ -1,16 +1,16 @@
 import { toggleClass, isEscapeKey } from './util.js';
 
+const COMMENT_STEP = 5;
+
 const fullSizePhotoContainer = document.querySelector('.big-picture');
 const fullSizePhoto = fullSizePhotoContainer.querySelector('.big-picture__img img');
 const likesCount = document.querySelector('.likes-count');
 const commentCount = document.querySelector('.social__comment-count');
 const userCommentsContainer = document.querySelector('.social__comments');
 const userComment = userCommentsContainer.querySelector('.social__comment');
-const commentsLoaderBtn = document.querySelector('.comments-loader');
+const commentsLoaderButton = document.querySelector('.comments-loader');
 const caption = document.querySelector('.social__caption');
-const closeBtn = document.querySelector('#picture-cancel');
-
-const COMMENT_STEP = 5;
+const closeButton = document.querySelector('.big-picture__cancel');
 
 const commentFragment = document.createDocumentFragment();
 
@@ -53,15 +53,15 @@ const renderComments = () => {
   }
 
   if (currentComments.length <= COMMENT_STEP || commentsCount >= currentComments.length) {
-    commentsLoaderBtn.classList.add('hidden');
+    commentsLoaderButton.classList.add('hidden');
   } else {
-    commentsLoaderBtn.classList.remove('hidden');
+    commentsLoaderButton.classList.remove('hidden');
   }
 
   userCommentsContainer.appendChild(commentFragment);
 };
 
-const onCloseFullSizePhoto = () => {
+const onCloseFullSizePhotoClick = () => {
   closeFullSizePhoto();
 };
 
@@ -74,11 +74,11 @@ const onFullSizePhotoEscKey = (evt) => {
 
 function closeFullSizePhoto() {
   commentsCount = COMMENT_STEP;
-  document.removeEventListener('keydown', onFullSizePhotoEscKey);
   toggleModal();
+  document.removeEventListener('keydown', onFullSizePhotoEscKey);
 }
 
-const onCommentsLoaderBtn = () => {
+const onCommentsLoaderButtonClick = () => {
   commentsCount += COMMENT_STEP;
   renderComments();
 };
@@ -87,12 +87,12 @@ const renderFullSizePhoto = (photo) => {
   currentComments = photo.comments.slice();
   show(photo);
   renderComments();
-  document.addEventListener('keydown', onFullSizePhotoEscKey);
   toggleModal();
+  document.addEventListener('keydown', onFullSizePhotoEscKey);
 };
 
-commentsLoaderBtn.addEventListener('click', onCommentsLoaderBtn);
-closeBtn.addEventListener('click', onCloseFullSizePhoto);
+commentsLoaderButton.addEventListener('click', onCommentsLoaderButtonClick);
+closeButton.addEventListener('click', onCloseFullSizePhotoClick);
 
 
 export { renderFullSizePhoto };

js/main.js

@@ -1,14 +1,19 @@
 import { renderPhotos } from './photos.js';
 import { getData } from './api.js';
-import { initPhotoUploadForm, setUserFormSubmit, showSuccess, showError } from './upload-photo.js';
-
-
-getData((photos) => {
-  renderPhotos(photos);
-});
+import { initPhotoUploadForm } from './upload-photo.js';
+import { initFilters } from './photos-filters.js';
+import { showErrorMessage } from './util.js';
 
+initPhotoUploadForm();
 
-setUserFormSubmit(showSuccess, showError);
+const displayPhotos = (data) => {
+  renderPhotos(data);
+  initFilters(data);
+};
 
-initPhotoUploadForm();
+getData()
+  .then((photos) => {
+    displayPhotos(photos.slice());
+  })
+  .catch((showErrorMessage));
 

js/photos-filters.js

@@ -5,7 +5,7 @@ const MAX_RANDOM_PHOTO_COUNT = 10;
 
 const RENDER_DELAY = 500;
 
-const FilterNames = {
+const FilterName = {
   DEFAULT: 'filter-default',
   RANDOM: 'filter-random',
   POPULAR: 'filter-discussed'
@@ -25,24 +25,18 @@ let posts = [];
 
 const renderWithDelay = debounce(renderPhotos, RENDER_DELAY);
 
-const removeFilteredPhotos = () => {
-  const filteredPhotos = document.querySelectorAll('.picture');
-  filteredPhotos.forEach((photo) => photo.remove());
-};
-
 const setFilter = (filter) => {
   let filterFunction = filterFunctions.setDefault;
 
   switch (filter) {
-    case FilterNames.RANDOM:
+    case FilterName.RANDOM:
       filterFunction = filterFunctions.setRandom;
       break;
-    case FilterNames.POPULAR:
+    case FilterName.POPULAR:
       filterFunction = filterFunctions.setPopular;
       break;
   }
 
-  removeFilteredPhotos();
   renderWithDelay(filterFunction(posts));
 };
 
@@ -60,10 +54,8 @@ const onPhotosFilterFormClick = (evt) => {
 
 const initFilters = (data) => {
   posts = data;
-
   photosFilterContainer.classList.remove('img-filters--inactive');
   photosFilterForm.addEventListener('click', onPhotosFilterFormClick);
-
 };
 
 export { initFilters };

js/photos.js

@@ -20,10 +20,11 @@ const renderPhoto = (photo) => {
 };
 
 const renderPhotos = (photos) => {
-  photos?.slice().forEach((photo) => {
+  photos?.forEach((photo) => {
     userPhotosFragment.appendChild(renderPhoto(photo));
   });
 
+  userPhotosContainer.querySelectorAll('.picture').forEach((photo) => photo.remove());
   userPhotosContainer.appendChild(userPhotosFragment);
 };
 

js/update-photo-mode.js

@@ -6,8 +6,8 @@ const Scale = {
 };
 
 const scaleValueField = document.querySelector('.scale__control--value');
-const scaleDownBtn = document.querySelector('.scale__control--smaller');
-const scaleUpBtn = document.querySelector('.scale__control--bigger');
+const scaleDownButton = document.querySelector('.scale__control--smaller');
+const scaleUpButton = document.querySelector('.scale__control--bigger');
 const preview = document.querySelector('.img-upload__preview img');
 const sliderContainer = document.querySelector('.img-upload__effect-level');
 const sliderElement = document.querySelector('.effect-level__slider');
@@ -123,12 +123,12 @@ function onEffectItemClick() {
   sliderContainer.style.display = '';
   sliderElement.noUiSlider.updateOptions(currentEffect.options);
   preview.style.filter = currentEffect.setFilter(currentEffect.options.range.max);
-  sliderElement.noUiSlider.set(100);
+  sliderElement.noUiSlider.set(Scale.MAX);
 }
 
 const updateScale = () => {
-  scaleUpBtn.addEventListener('click', onScaleUp);
-  scaleDownBtn.addEventListener('click', onScaleDown);
+  scaleUpButton.addEventListener('click', onScaleUp);
+  scaleDownButton.addEventListener('click', onScaleDown);
 };