Переписал функции отправки формы

js/api/get-data-variables.js

@@ -0,0 +1,19 @@
+export const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+export const sendErrorTemplate = document.querySelector('#error').content.querySelector('.error');
+export const sendFormErrorTemplate = document.querySelector('#success').content.querySelector('.success');
+export const SHOW_ERROR_TIME = 5000;
+export const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagra';
+export const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+export const submitButton = document.querySelector('.img-upload__submit');
+export const submitButtonText = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Загрузка...'
+};
+
+export const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};

js/api/index.js

@@ -0,0 +1,18 @@
+import {BASE_URL, Route, Method} from './get-data-variables';
+
+const load = (route, 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();
+    });
+
+const getData = () => load(Route.GET_DATA);
+const sendData = (body) => load(Route.SEND_DATA, Method.POST, body);
+
+export {getData, sendData};

js/api/secondary-functions.js

@@ -0,0 +1,92 @@
+import {onCloseChangePhotoEsc} from '../upload-photo';
+import {dataErrorTemplate, sendErrorTemplate, sendFormErrorTemplate, SHOW_ERROR_TIME, submitButtonText} from './get-data-variables';
+
+const submitButton = document.querySelector('.img-upload__submit');
+
+
+const onSendSuccessClose = () => {
+  const successMessage = document.querySelector('.success');
+  successMessage.remove();
+  document.removeEventListener('click', onClickOutModalSuccess);
+};
+
+const onSendErrorMessageClose = () => {
+  const errorMessage = document.querySelector('.error');
+  errorMessage.remove();
+  document.removeEventListener('click', onClickOutModalError);
+  document.addEventListener('keydown', onCloseChangePhotoEsc);
+  document.removeEventListener('keydown', onSendErrorMessageCloseEsc);
+};
+
+function onClickOutModalSuccess (evt) {
+  if(evt.target.closest('.success__inner')){
+    return;
+  }
+  onSendSuccessClose();
+}
+
+function onClickOutModalError (evt) {
+  if(evt.target.closest('.error__inner')){
+    return;
+  }
+  onSendErrorMessageClose();
+}
+
+function onSendErrorMessageCloseEsc (evt) {
+  if (evt.key === 'Escape') {
+    onSendErrorMessageClose();
+  }
+}
+
+function onSendSuccessMessageCloseEsc (evt) {
+  if (evt.key === 'Escape') {
+    onSendSuccessClose();
+  }
+}
+
+const onSendErrorMessage = () => {
+  const errorFragmentSend = document.createDocumentFragment();
+  const errorItemSend = sendErrorTemplate.cloneNode(true);
+  const sendButttonClose = errorItemSend.querySelector('.error__button');
+  sendButttonClose.addEventListener('click', onSendErrorMessageClose);
+  errorFragmentSend.append(errorItemSend);
+  document.body.append(errorFragmentSend);
+  document.addEventListener('keydown', onSendErrorMessageCloseEsc);
+  document.addEventListener('click', onClickOutModalError);
+  document.removeEventListener('keydown', onCloseChangePhotoEsc);
+};
+
+const onShowErrorGetData = () => {
+  const errorFragment = document.createDocumentFragment();
+  const errorItem = dataErrorTemplate.cloneNode(true);
+  errorFragment.append(errorItem);
+  document.body.append(errorFragment);
+  const dataError = document.querySelector('.data-error');
+
+  setTimeout(() => {
+    dataError.remove();
+  }, SHOW_ERROR_TIME);
+};
+
+const onSendSuccessMessage = () => {
+  const errorFragmentSend = document.createDocumentFragment();
+  const errorItemSend = sendFormErrorTemplate.cloneNode(true);
+  const closeButton = errorItemSend.querySelector('.success__button');
+  errorFragmentSend.append(errorItemSend);
+  document.body.append(errorFragmentSend);
+  closeButton.addEventListener('click', onSendSuccessClose);
+  document.addEventListener('click', onClickOutModalSuccess);
+  document.addEventListener('keydown', onSendSuccessMessageCloseEsc);
+};
+
+const blockSubmitButton = () => {
+  submitButton.disabled = true;
+  submitButton.textContent = submitButtonText.SENDING;
+};
+
+const unblockSubmitButton = () => {
+  submitButton.disabled = false;
+  submitButton.textContent = submitButtonText.IDLE;
+};
+
+export {onSendErrorMessage, onShowErrorGetData, onSendSuccessMessage, onSendSuccessClose, blockSubmitButton, unblockSubmitButton};

js/create-thumbnails/index.js

@@ -1,17 +1,11 @@
-// import {dataUserPhoto} from '../generate-data';
 import {onOpenBigPicture } from '../show-large-picture';
 
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureList = document.querySelector('.pictures');
-// const createPhotoUsers = dataUserPhoto;
 
-// const getPhoto = (photoUsers) => photoUsers;
-
-// console.log(getPhoto(photoUsers));
-let createPhotoUsers = '';
 const addPhotoThumbnailsUsers = (photoUsers) => {
   const listFragmentPhoto = document.createDocumentFragment();
-  createPhotoUsers = photoUsers;
+  // createPhotoUsers = photoUsers;
   photoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');
@@ -20,19 +14,22 @@ const addPhotoThumbnailsUsers = (photoUsers) => {
     pictureImage.alt = element.description;
     pictureItem.querySelector('.picture__likes').textContent = element.likes;
     pictureItem.querySelector('.picture__comments').textContent = element.comments.length;
-    listFragmentPhoto.appendChild(pictureItem);
+    listFragmentPhoto.append(pictureItem);
   });
 
-  return pictureList.appendChild(listFragmentPhoto);
+  return pictureList.append(listFragmentPhoto);
 };
 
-pictureList.addEventListener('click', (evt) => {
-  const target = evt.target;
-  if (target.closest('.picture')) {
-    evt.preventDefault();
-    const elementPhoto = createPhotoUsers.find((photo) => photo.id === Number(target.dataset.id));
-    onOpenBigPicture(elementPhoto);
-  }
-});
+const elementPhotoListener = (photoUsers) => {
+  pictureList.addEventListener('click', (evt) => {
+    const target = evt.target;
+    if (target.closest('.picture')) {
+      evt.preventDefault();
+      const elementPhoto = photoUsers.find((photo) => photo.id === Number(target.dataset.id));
+      onOpenBigPicture(elementPhoto);
+    }
+  });
+
+};
 
-export {addPhotoThumbnailsUsers};
+export {addPhotoThumbnailsUsers , elementPhotoListener};

js/main.js

@@ -2,16 +2,19 @@ import {onOpenChangePhotoListener} from './upload-photo';
 import {validateListener} from './validation-form';
 import {scaleListener} from './add-effects-scale';
 import {effectCheckedListener} from './slider-effects';
-import {getData} from './get-data';
-import {addPhotoThumbnailsUsers} from './create-thumbnails';
-
-effectCheckedListener();
-scaleListener();
-validateListener();
-onOpenChangePhotoListener();
-
+import {getData} from './api';
+import {addPhotoThumbnailsUsers, elementPhotoListener} from './create-thumbnails';
+import {onShowErrorGetData } from './api/secondary-functions';
 
 getData()
   .then((photos) => {
     addPhotoThumbnailsUsers(photos);
+    elementPhotoListener(photos);
+  }).catch(() => {
+    onShowErrorGetData();
   });
+
+effectCheckedListener();
+scaleListener();
+validateListener();
+onOpenChangePhotoListener();

js/validation-form/index.js

@@ -1,6 +1,8 @@
-import {sendSuccessMessage, sendErrorMessage} from '../get-data';
+import {sendData} from '../api';
+import {onSendSuccessMessage, onSendErrorMessage, blockSubmitButton, unblockSubmitButton} from '../api/secondary-functions';
 import {onCloseChangePhoto} from '../upload-photo';
 
+
 export const imgUploadForm = document.querySelector('.img-upload__form');
 export const inputTextHashtag = imgUploadForm.querySelector('.text__hashtags');
 export const commentForm = imgUploadForm.querySelector('.text__description');
@@ -47,24 +49,18 @@ const validateListener = () => {
   imgUploadForm.addEventListener('submit', (evt) => {
     evt.preventDefault();
     if(pristine.validate()) {
-      fetch(
-        'https://31.javascript.htmlacademy.pro/kekstagram',
-        {
-          method: 'POST',
-          body: new FormData(evt.target),
-        })
-        .then((response) => {
-          if (response.ok) {
-            sendSuccessMessage();
-            onCloseChangePhoto();
-          }else{
-            throw new Error ();
-          }
+      blockSubmitButton();
+      sendData(new FormData(evt.target))
+        .then(() => {
+          onSendSuccessMessage();
+          onCloseChangePhoto();
         })
         .catch(() => {
-          throw new Error(
-            sendErrorMessage()
-          );
+          onSendErrorMessage();
+        }
+        )
+        .finally(() => {
+          unblockSubmitButton();
         }
         );
     }