Merge pull request #11 from SmithDaria/module11-task1

js/api.js

@@ -0,0 +1,78 @@
+import {drawPictures} from './thumbnails.js';
+
+export let morePost = [];
+
+fetch('https://31.javascript.htmlacademy.pro/kekstagram/data')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error(`Ошибка загрузки данных: ${response.status} ${response.statusText}`);
+    }
+    return response.json();
+  })
+  .then((data) => {
+    morePost = data;
+    drawPictures(morePost);
+  })
+  .catch(() => {
+    showErrorMessageForGet();
+  });
+
+function showErrorMessageForGet() {
+  const errorTemplate = document.querySelector('#data-error');
+  const errorElement = errorTemplate.content.cloneNode(true);
+
+  document.body.appendChild(errorElement);
+
+  setTimeout(() => {
+    const dataErrorElement = document.querySelector('.data-error');
+    if (dataErrorElement) {
+      dataErrorElement.remove();
+    }
+  }, 5000);
+}
+
+export const sendData = (body) => fetch(
+  'https://31.javascript.htmlacademy.pro/kekstagram',
+  {
+    method: 'POST',
+    body,
+  })
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error();
+    }
+  })
+  .catch(() => {
+    throw new Error();
+  });
+
+export function showMessageForPost(className) {
+  const template = document.querySelector(`#${className}`);
+  const element = template.content.cloneNode(true);
+
+  document.body.appendChild(element);
+
+  const message = document.querySelector(`.${className}`);
+  const inner = message.querySelector(`.${className}__inner`);
+  const closeButton = message.querySelector(`.${className}__button`);
+
+  closeButton.addEventListener('click', removeMessage);
+  function removeMessage() {
+    message.remove();
+    document.removeEventListener('keydown', onEscPress);
+    document.removeEventListener('click', onOutsideClick);
+  }
+
+  document.addEventListener('keydown', onEscPress);
+  document.addEventListener('click', onOutsideClick);
+  function onEscPress(event) {
+    if (event.key === 'Escape') {
+      removeMessage();
+    }
+  }
+  function onOutsideClick(event) {
+    if (!inner.contains(event.target)) {
+      removeMessage();
+    }
+  }
+}

js/bigPictures.js

@@ -1,5 +1,5 @@
-import {morePosts} from './data.js';
 import {isEscapeKey} from './util.js';
+import {morePost} from './api.js';
 
 const bigPicture = document.querySelector('.big-picture');
 const cancelBigPicture = document.querySelector('.big-picture__cancel');
@@ -83,7 +83,7 @@ function loadAllComments (pictureDataComments) {
 
 export function openBigPicture (photoId) {
   dropComments();
-  const pictureData = morePosts.find((postData) => postData.id === Number (photoId));
+  const pictureData = morePost.find((postData) => postData.id === Number (photoId));
   fillBigPicture(pictureData);
   loadAllComments(pictureData.comments);
 

js/form.js

@@ -1,4 +1,5 @@
 import {isEscapeKey} from './util.js';
+import {sendData, showMessageForPost} from './api.js';
 
 const formUploadPhoto = document.querySelector('.img-upload__form');
 const overlayUploadPhoto = document.querySelector('.img-upload__overlay');
@@ -9,6 +10,9 @@ const inputHashtagsPhoto = document.querySelector('.text__hashtags');
 const inputDescriptionPhoto = document.querySelector('.text__description');
 const previewPhoto = document.querySelector('.img-upload__preview').querySelector('img');
 const effectLevel = document.querySelector('.img-upload__effect-level');
+const submitUploadPhoto = document.querySelector('.img-upload__submit');
+const controlValue = document.querySelector('.scale__control--value');
+
 const regularForHashtag = /^#[a-zа-яё0-9]{1,19}$/i;
 
 const onDocumentKeydown = (evt) => {
@@ -34,6 +38,8 @@ function closeOverlayPhoto () {
   inputUploadPhoto.value = '';
   inputHashtagsPhoto.value = '';
   inputDescriptionPhoto.value = '';
+  document.querySelector('#effect-none').checked = true;
+  controlValue.value = '100%';
   previewPhoto.removeAttribute('style');
   effectLevel.classList.add('hidden');
 
@@ -109,9 +115,30 @@ function validateDescription (value) {
 
 pristine.addValidator(inputDescriptionPhoto, validateDescription, 'Длина комментария больше 140 символов');
 
+// Отправка формы
+
+function sendFormPhoto (formElement) {
+  const isValid = pristine.validate();
+  if (isValid) {
+    submitUploadPhoto.disabled = true;
+    const formData = new FormData(formElement);
+    sendData(formData)
+      .then(closeOverlayPhoto)
+      .then(() => {
+        showMessageForPost('success');
+      })
+      .catch(() => {
+        showMessageForPost('error');
+      })
+      .finally(() => {
+        submitUploadPhoto.disabled = false;
+      });
+  }
+}
+
 function onFormSubmit (evt) {
   evt.preventDefault();
-  if (pristine.validate()) {
-    formUploadPhoto.submit();
-  }
+  sendFormPhoto(evt.target);
 }
+
+formUploadPhoto.addEventListener('submit', onFormSubmit);

js/main.js

@@ -1,7 +1,5 @@
-import {morePosts} from './data.js';
-import {drawPictures} from './thumbnails.js';
+import './thumbnails.js';
 import './form.js';
 import './scale.js';
 import './filters.js';
-
-drawPictures(morePosts);
+import './api.js';

js/thumbnails.js

@@ -1,4 +1,3 @@
-import {morePosts} from './data.js';
 import {openBigPicture} from './bigPictures.js';
 
 const pictureList = document.querySelector('.pictures');
@@ -26,8 +25,8 @@ function onPictureListClick(evt) {
   openBigPicture(card.dataset.photoId);
 }
 
-export function drawPictures() {
-  morePosts.forEach((post) => {
+export function drawPictures(data) {
+  data.forEach((post) => {
     const picture = createPictureElement(post);
     similarListFragment.appendChild(picture);
   });