feat: add server data loading and form submission

Author: NoaVel

js/api.js

@@ -0,0 +1,34 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные. Попробуйте обновить страницу',
+  SEND_DATA: 'Не удалось отправить форму. Попробуйте ещё раз',
+};
+
+const getData = () =>
+  fetch(`${BASE_URL}${Route.GET_DATA}`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(ErrorText.GET_DATA);
+      }
+      return response.json();
+    });
+
+const sendData = (body) =>
+  fetch(`${BASE_URL}${Route.SEND_DATA}`, {
+    method: 'POST',
+    body,
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(ErrorText.SEND_DATA);
+      }
+      return response.json();
+    });
+
+export { getData, sendData };

js/full-size-picture.js

@@ -1,6 +1,13 @@
-import { photos } from './create-array-photos.js';
 import { clearComments, renderComments } from './render-comments.js';
 
+// Хранилище для данных фотографий, загруженных с сервера
+let photos = [];
+
+// Устанавливает массив фотографий (вызывается из main.js после загрузки данных)
+const setPhotos = (data) => {
+  photos = data;
+};
+
 const bigPictureNode = document.querySelector('.big-picture');
 const bigPictureImgNode = bigPictureNode.querySelector('.big-picture__img').querySelector('img');
 const likesCountNode = bigPictureNode.querySelector('.likes-count');
@@ -49,4 +56,4 @@ const openBigPicture = (pictureId) => {
 
 bigPictureCancelNode.addEventListener('click', onBigPictureCancelClick);
 
-export {openBigPicture};
+export { openBigPicture, setPhotos };

js/main.js

@@ -1,9 +1,21 @@
-import { photos } from './create-array-photos.js';
 import { renderThumbnails } from './render-thumbnails.js';
 import { initUploadPhotoForm } from './upload-photo-form.js';
 import { initImageEditor } from './image-editor.js';
+import { getData } from './api.js';
+import { showDataLoadError } from './messages.js';
+import { setPhotos } from './full-size-picture.js';
 
-renderThumbnails(photos);
+// Инициализация формы загрузки и редактора изображений
 initUploadPhotoForm();
 initImageEditor();
 
+// Загрузка данных с сервера
+getData()
+  .then((photos) => {
+    setPhotos(photos);
+    renderThumbnails(photos);
+  })
+  .catch((err) => {
+    showDataLoadError(err.message);
+  });
+

js/messages.js

@@ -0,0 +1,62 @@
+// Модуль для показа сообщений об успехе/ошибке
+
+const ALERT_SHOW_TIME = 5000;
+
+const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+const successTemplate = document.querySelector('#success').content.querySelector('.success');
+const errorTemplate = document.querySelector('#error').content.querySelector('.error');
+
+
+// Показывает сообщение об ошибке загрузки данных
+
+const showDataLoadError = () => {
+  const dataErrorElement = dataErrorTemplate.cloneNode(true);
+  document.body.appendChild(dataErrorElement);
+
+  setTimeout(() => {
+    dataErrorElement.remove();
+  }, ALERT_SHOW_TIME);
+};
+
+
+// Создает и показывает модальное сообщение (успех или ошибка)
+
+const showMessage = (template, buttonClass) => {
+  const messageElement = template.cloneNode(true);
+  document.body.appendChild(messageElement);
+
+  const closeButton = messageElement.querySelector(buttonClass);
+
+  const closeMessage = () => {
+    messageElement.remove();
+    document.removeEventListener('keydown', onEscKeydown);
+    document.removeEventListener('click', onOutsideClick);
+  };
+
+  function onEscKeydown(evt) {
+    if (evt.key === 'Escape') {
+      evt.preventDefault();
+      closeMessage();
+    }
+  }
+
+  function onOutsideClick(evt) {
+    if (evt.target === messageElement) {
+      closeMessage();
+    }
+  }
+
+  closeButton.addEventListener('click', closeMessage);
+  document.addEventListener('keydown', onEscKeydown);
+  document.addEventListener('click', onOutsideClick);
+};
+
+const showSuccessMessage = () => {
+  showMessage(successTemplate, '.success__button');
+};
+
+const showErrorMessage = () => {
+  showMessage(errorTemplate, '.error__button');
+};
+
+export { showDataLoadError, showSuccessMessage, showErrorMessage };

js/upload-photo-form.js

@@ -6,8 +6,14 @@ import {
 } from './check-hashtag-validity.js';
 
 import { resetImageEditor } from './image-editor.js';
+import { sendData } from './api.js';
+import { showSuccessMessage, showErrorMessage } from './messages.js';
 
 const MAX_COMMENT_LENGTH = 140;
+const SubmitButtonText = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...',
+};
 
 const bodyNode = document.body;
 const uploadFormNode = document.querySelector('.img-upload__form');
@@ -16,6 +22,7 @@ const uploadOverlayNode = uploadFormNode.querySelector('.img-upload__overlay');
 const uploadCancelButtonNode = uploadFormNode.querySelector('#upload-cancel');
 const hashtagsInputNode = uploadFormNode.querySelector('.text__hashtags');
 const descriptionInputNode = uploadFormNode.querySelector('.text__description');
+const submitButtonNode = uploadFormNode.querySelector('.img-upload__submit');
 
 const pristine = new Pristine(uploadFormNode, {
   classTo: 'img-upload__field-wrapper',
@@ -28,6 +35,13 @@ const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const hasValidCommentLength = (value) => value.length <= MAX_COMMENT_LENGTH;
 
+const toggleSubmitButton = (isDisabled) => {
+  submitButtonNode.disabled = isDisabled;
+  submitButtonNode.textContent = isDisabled
+    ? SubmitButtonText.SENDING
+    : SubmitButtonText.IDLE;
+};
+
 const resetUploadPhotoForm = () => {
   uploadFormNode.reset();
   uploadFileControl.value = '';
@@ -74,11 +88,32 @@ const onUploadCancelButtonClick = (evt) => {
 };
 
 const onUploadFormSubmit = (evt) => {
-  if (!pristine.validate()) {
-    evt.preventDefault();
+  evt.preventDefault();
+
+  const isValid = pristine.validate();
+
+  if (isValid) {
+    toggleSubmitButton(true);
+
+    sendData(new FormData(evt.target))
+      .then(() => {
+        closeUploadPhotoForm();
+        showSuccessMessage();
+      })
+      .catch(() => {
+        showErrorMessage();
+      })
+      .finally(() => {
+        toggleSubmitButton(false);
+      });
   }
 };
 
+const onUploadFormReset = (evt) => {
+  evt.preventDefault();
+  closeUploadPhotoForm();
+};
+
 pristine.addValidator(
   hashtagsInputNode,
   hasValidHashtagFormat,
@@ -113,6 +148,7 @@ const initUploadPhotoForm = () => {
   uploadFileControl.addEventListener('change', onUploadFileControlChange);
   uploadCancelButtonNode.addEventListener('click', onUploadCancelButtonClick);
   uploadFormNode.addEventListener('submit', onUploadFormSubmit);
+  uploadFormNode.addEventListener('reset', onUploadFormReset);
   hashtagsInputNode.addEventListener('keydown', stopEscapePropagation);
   descriptionInputNode.addEventListener('keydown', stopEscapePropagation);
 };