Merge pull request #12 from YouAreNotReady/module11-task1

Author: keksobot

index.html

@@ -4,8 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="vendor/nouislider/nouislider.css">
+  <link rel="stylesheet" href="css/style.css">
   <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
   <title>Кекстаграм</title>
 </head>

js/api.js

@@ -0,0 +1,86 @@
+import { uploadFormCloseHandler } from './image-upload.js';
+import { unblockSubmitButton } from './image-upload.js';
+
+const dataErrorTemplateNode = document.querySelector('#data-error').content.querySelector('.data-error');
+const successTemplateNode = document.querySelector('#success').content.querySelector('.success');
+const errorTemplateNode = document.querySelector('#error').content.querySelector('.error');
+const ERROR_TIMEOUT_MS = 5000;
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const showError = () => {
+  const errorMessage = dataErrorTemplateNode.cloneNode(true);
+  document.body.appendChild(errorMessage);
+  setTimeout(() => {
+    errorMessage.remove();
+  }, ERROR_TIMEOUT_MS);
+};
+
+const uploadSuccessful = () => {
+  const successMessage = successTemplateNode.cloneNode(true);
+  document.body.appendChild(successMessage);
+
+  const successTemplateNodeClickHandler = (evt) => {
+    if(!evt.target.closest('div') || evt.target.closest('button')) {
+      successMessage.remove();
+      document.body.removeEventListener('click', successTemplateNodeClickHandler);
+    }
+  };
+  document.body.addEventListener('click', successTemplateNodeClickHandler);
+
+  uploadFormCloseHandler();
+};
+
+const uploadError = () => {
+  const errorMessage = errorTemplateNode.cloneNode(true);
+  document.body.appendChild(errorMessage);
+
+  const errorTemplateNodeClickHandler = (evt) => {
+    if(!evt.target.closest('div') || evt.target.closest('button')) {
+      errorMessage.remove();
+      document.body.removeEventListener('click', errorTemplateNodeClickHandler);
+    }
+  };
+
+  document.body.addEventListener('click', errorTemplateNodeClickHandler);
+
+  uploadFormCloseHandler(true);
+};
+
+const loadData = (onSuccess) => {
+  fetch(`${BASE_URL}${Route.GET_DATA}`)
+    .then((response) => {
+      if(!response.ok) {
+        throw new Error();
+      }
+      return response.json();
+    })
+    .then(
+      (picturesObjects) => {
+        onSuccess(picturesObjects);
+      }
+    )
+    .catch(showError);
+};
+
+const uploadData = (body) => {
+  fetch(
+    `${BASE_URL}${Route.SEND_DATA}`,
+    {
+      method: 'POST',
+      body: body,
+    },
+  ).then((response) => {
+    if(!response.ok) {
+      throw new Error();
+    }
+
+    return uploadSuccessful();
+  }).catch(uploadError)
+    .finally(unblockSubmitButton);
+};
+
+export { loadData, uploadData };

js/comment-validation.js

@@ -1,3 +1,4 @@
 const validateComment = (value) => value.length <= 140;
+const validateCommentError = 'Длина комментария не может составлять больше 140 символов';
 
-export { validateComment };
+export { validateComment, validateCommentError };

js/data-generator.js

@@ -1,12 +1,14 @@
 import { isEscapeKey } from './util.js';
+import { uploadData } from './api.js';
 import { imagePreview, scaleValueField } from './image-scaling.js';
 import { sliderElementWrapper } from './image-effect.js';
 import { validateAllHashtags, validateHashtagError } from './hashtag-validation.js';
-import { validateComment } from './comment-validation.js';
+import { validateComment, validateCommentError } from './comment-validation.js';
 
 const imageUploadForm = document.querySelector('.img-upload__form');
 const imageUploadNode = imageUploadForm.querySelector('.img-upload__overlay');
 const imageUploadInput = imageUploadForm.querySelector('.img-upload__input');
+const imageUploadSubmit = imageUploadForm.querySelector('.img-upload__submit');
 const imageUploadCloseButton = imageUploadForm.querySelector('.img-upload__cancel');
 const effectOriginal = imageUploadForm.querySelector('#effect-none');
 const hashtagsInput = imageUploadForm.querySelector('.text__hashtags');
@@ -19,6 +21,14 @@ const pristine = new Pristine(imageUploadForm, {
   errorTextTag: 'div',
 }, false);
 
+const blockSubmitButton = () => {
+  imageUploadSubmit.disabled = true;
+};
+
+const unblockSubmitButton = () => {
+  imageUploadSubmit.disabled = false;
+};
+
 const onDocumentKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
@@ -30,21 +40,24 @@ const onDocumentKeydown = (evt) => {
 };
 
 function uploadFormClear() {
-  imageUploadInput.value = '';
   hashtagsInput.value = '';
   commentInput.value = '';
   effectOriginal.checked = true;
   sliderElementWrapper.classList.add('hidden');
-  imagePreview.style.transform = '';
   imagePreview.style.filter = '';
   scaleValueField.value = '100%';
+  imagePreview.style.transform = '';
 }
 
-function uploadFormCloseHandler() {
+function uploadFormCloseHandler(_,uploadError = false) {
   imageUploadNode.classList.add('hidden');
   document.body.classList.remove('modal-open');
+  imageUploadInput.value = '';
+
+  if(!uploadError) {
+    uploadFormClear();
+  }
 
-  uploadFormClear();
   document.removeEventListener('keydown', onDocumentKeydown);
   imageUploadCloseButton.removeEventListener('click', uploadFormCloseHandler);
 }
@@ -65,12 +78,23 @@ imageUploadInput.addEventListener('change', ()=> {
 });
 
 pristine.addValidator(imageUploadForm.querySelector('.text__hashtags'), validateAllHashtags, validateHashtagError);
-pristine.addValidator(imageUploadForm.querySelector('.text__description'), validateComment, 'Длина комментария не может составлять больше 140 символов');
+pristine.addValidator(imageUploadForm.querySelector('.text__description'), validateComment, validateCommentError);
 
-imageUploadForm.addEventListener('submit', (evt) => {
-  evt.preventDefault();
-  pristine.validate();
 
-  imageUploadForm.removeEventListener('keydown', uploadFormNoEscWhenInputActive);
-  imageUploadCloseButton.removeEventListener('click', uploadFormCloseHandler);
-});
+const setImageUploadFormSubmit = () => {
+  imageUploadForm.addEventListener('submit', (evt) => {
+    evt.preventDefault();
+
+    const isValid = pristine.validate();
+    if(isValid) {
+      const formData = new FormData(evt.target);
+      blockSubmitButton();
+      uploadData(formData);
+    }
+
+    imageUploadForm.removeEventListener('keydown', uploadFormNoEscWhenInputActive);
+    imageUploadCloseButton.removeEventListener('click', uploadFormCloseHandler);
+  });
+};
+
+export { setImageUploadFormSubmit, uploadFormCloseHandler, unblockSubmitButton };

js/image-upload.js

@@ -1,12 +1,12 @@
-import { generatePhotoObjects } from './data-generator.js';
 import { renderPictures } from './pictures-preview-loader.js';
+import { loadData } from './api.js';
+import { setImageUploadFormSubmit } from './image-upload.js';
 
 import './show-image-fullscreen.js';
-import './hashtag-validation.js';
-import './comment-validation.js';
 import './image-upload.js';
 import './image-scaling.js';
 import './image-effect.js';
 import './image-filtration.js';
 
-renderPictures(generatePhotoObjects());
+loadData(renderPictures);
+setImageUploadFormSubmit();