Merge pull request #12 from lenapokrovskaya/module11-task1

js/api.js

@@ -0,0 +1,33 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные.',
+  SEND_DATA: 'Не удалось отправить форму.',
+};
+
+const load = (route, errorText, method = Method.GET, body = null) =>
+  fetch(`${BASE_URL}${route}`, { method, body })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    })
+    .catch(() => {
+      throw new Error(errorText);
+    });
+
+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/form-validation.js

@@ -1,11 +1,20 @@
+import {sendData} from './api.js';
+import {showError, showSuccess} from './notifications.js';
+
 const MAX_HASHTAGS = 5;
 const MAX_COMMENT_LENGTH = 140;
 
-const imgUploadFormElement = document.querySelector('.img-upload__form');
+const bodyElement = document.body;
+const imgUploadFormElement = bodyElement.querySelector('.img-upload__form');
+const submitButtonElement = imgUploadFormElement.querySelector('.img-upload__submit');
+const templateErrorElement = bodyElement.querySelector('#error').content.querySelector('.error');
+const errorElement = templateErrorElement.cloneNode(true);
+
 const hashtagsInputElement = imgUploadFormElement.querySelector('.text__hashtags');
 const descriptionInutElement = imgUploadFormElement.querySelector('.text__description');
 const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/i;
 
+
 //Создали объект и передали конфиг
 const pristine = new Pristine(imgUploadFormElement, {
   classTo: 'img-upload__field-wrapper',
@@ -35,18 +44,40 @@ const validatesHashtagRepeats = (value) => {
   return duplicates.length === 0;
 };
 
+const blockSubmitButton = () => {
+  submitButtonElement.disabled = true;
+};
+
+const unblockSubmitButton = () => {
+  submitButtonElement.disabled = false;
+};
+
+const setUserFormSubmit = (onSuccess) => {
+  imgUploadFormElement.addEventListener('submit', (evt) => {
+    evt.preventDefault();
+    const isValid = pristine.validate(); // Проверка валидности формы
+
+    if (isValid) {
+      blockSubmitButton();
+      const formData = new FormData(evt.target);
+      const sendDataPromise = sendData(formData);
+      sendDataPromise
+        .then(() => {
+          showSuccess();
+          imgUploadFormElement.reset();
+        })
+        .then(onSuccess)
+        .catch(() => {
+          showError(errorElement);
+        })
+        .finally(unblockSubmitButton);
+    }
+  });
+};
+
 pristine.addValidator(hashtagsInputElement, validatesHashtagCount, 'Превышено количество хэштегов');
 pristine.addValidator(hashtagsInputElement, validatesHashtagWithRegex, 'Введён невалидный хэштег');
 pristine.addValidator(hashtagsInputElement, validatesHashtagRepeats, 'Хэштеги повторяются');
 pristine.addValidator(descriptionInutElement, validatesCommentLength, `Длина комментария больше ${MAX_COMMENT_LENGTH} символов`);
 
-const onFormSubmit = (evt) => {
-  evt.preventDefault();
-  const isValid = pristine.validate();
-  if (isValid) {
-    evt.target.submit();
-  }
-};
-
-export {onFormSubmit};
-
+export {setUserFormSubmit};

js/main.js

@@ -1,10 +1,26 @@
-import {createPosts} from './data.js';
+import {openUploadForm, closeUploadForm} from './upload-photo-form.js';
+import {setUserFormSubmit} from './form-validation.js';
+import {getData} from './api.js';
 import {createFragment} from './thumbnails.js';
 import {renderModal} from './modal.js';
-import {openUploadForm} from './upload-photo-form.js';
+import {showDataError} from './notifications.js';
+
+const ERROR_DISPLAY_TIME = 5000;
+const templateDataErrorElement = document.querySelector('#data-error').content.querySelector('.data-error');
+const dataErrorElement = templateDataErrorElement.cloneNode(true);
 
-const posts = createPosts();
-createFragment(posts);
-renderModal(posts);
 openUploadForm();
 
+getData()
+  .then((posts) => {
+    createFragment(posts);
+    renderModal(posts);
+  })
+  .catch(() => {
+    showDataError(dataErrorElement);
+    setTimeout(() => {
+      dataErrorElement.remove();
+    }, ERROR_DISPLAY_TIME);
+  });
+
+setUserFormSubmit(closeUploadForm);

js/modal.js

@@ -5,7 +5,7 @@ import {clearComments} from './comments.js';
 const renderModal = (posts) => {
   const bigPictureElement = document.body.querySelector('.big-picture');
   const picturesParentElement = document.querySelector('.pictures');
-  const pictureCloseButton = bigPictureElement.querySelector('.big-picture__cancel');
+  const pictureCloseButtonElement = bigPictureElement.querySelector('.big-picture__cancel');
 
 
   //Функция-обработчик закрытия модалки ESC
@@ -34,7 +34,7 @@ const renderModal = (posts) => {
     });
   };
 
-  onCloseButtonClick(pictureCloseButton);
+  onCloseButtonClick(pictureCloseButtonElement);
 
   //Функция открытия модалки
   const openModal = () => {
@@ -51,7 +51,7 @@ const renderModal = (posts) => {
     if (currentPictureElement) {
       evt.preventDefault();
       //Находим элемент из массива постов с таким же id как у текущего элемента
-      const foundedPictureByIdElement = posts.find((picture) => picture.id === Number(currentPictureElement.getAttribute('pictureId')));
+      const foundedPictureByIdElement = posts.find((picture) => picture.id === Number(currentPictureElement.getAttribute('data-picture-id')));
       renderBigPicture(foundedPictureByIdElement);
       openModal();
     }

js/notifications.js

@@ -0,0 +1,64 @@
+import {isEscapeKey} from './util.js';
+
+const bodyElement = document.body;
+const fragmentElement = document.createDocumentFragment();
+const templateErrorElement = bodyElement.querySelector('#error').content.querySelector('.error');
+const errorElement = templateErrorElement.cloneNode(true);
+const errorButtonElement = errorElement.querySelector('.error__button');
+const errorBlockElement = errorElement.querySelector('.error__inner');
+
+const templateSuccessElement = bodyElement.querySelector('#success').content.querySelector('.success');
+const successElement = templateSuccessElement.cloneNode(true);
+const successButtonElement = successElement.querySelector('.success__button');
+const successBlockElement = successElement.querySelector('.success__inner');
+
+const showDataError = (error) => {
+  fragmentElement.appendChild(error);
+  bodyElement.append(fragmentElement);
+};
+
+// Функция для удаления сообщения
+const closeMessageBox = (element) => {
+  if (element) {
+    element.remove(); // Удаляем элемент
+  }
+};
+
+// Обработчик закрытия окна сообщения по клику
+const onClickCloseMessage = (element) => {
+  closeMessageBox(element);
+};
+
+// Обработчик закрытия окна сообщения по Esc
+const onEscCloseMessage = (evt, element) => {
+  if(isEscapeKey(evt)) {
+    closeMessageBox(element);
+  }
+};
+
+// Обработчик закрытия окна сообщения по нажатию на оверлэй
+const onOverlayClick = (evt, messageBlock, element) => {
+  if(!messageBlock.contains(evt.target)) {
+    closeMessageBox(element);
+  }
+};
+
+//Показ сообщения об ошибке отправки данных
+const showError = () => {
+  fragmentElement.appendChild(errorElement);
+  bodyElement.append(fragmentElement);
+  errorButtonElement.addEventListener('click', () => onClickCloseMessage(errorElement));
+  document.addEventListener('keydown', (evt) => onEscCloseMessage(evt, errorElement));
+  document.addEventListener('click', (evt) => onOverlayClick(evt, errorBlockElement, errorElement));
+};
+
+//Показ сообщения об успехе отправки данных
+const showSuccess = () => {
+  fragmentElement.appendChild(successElement);
+  bodyElement.append(fragmentElement);
+  successButtonElement.addEventListener('click', () => onClickCloseMessage(successElement));
+  document.addEventListener('keydown', (evt) => onEscCloseMessage(evt, successElement));
+  document.addEventListener('click', (evt) => onOverlayClick(evt, successBlockElement, successElement));
+};
+
+export {showDataError, showError, showSuccess};

js/thumbnails.js

@@ -7,7 +7,7 @@ const createThumbnail = ({id, url, description, likes, comments}) => {
   const thumbnailElement = templateElement.cloneNode(true);
   const imageElement = thumbnailElement.querySelector('.picture__img');
   thumbnailElement.setAttribute('href','');
-  thumbnailElement.setAttribute('pictureId', id);
+  thumbnailElement.setAttribute('data-picture-id', id);
   imageElement.setAttribute('src', url);
   imageElement.setAttribute('alt', description);
   thumbnailElement.querySelector('.picture__likes').textContent = likes;