Надо подкачаться

index.html

@@ -121,7 +121,7 @@ <h2 class="img-upload__title  visually-hidden">Загрузка фотограф
                     <input class="text__hashtags" name="hashtags" placeholder="#ХэшТег">
                   </div>
                   <div class="img-upload__field-wrapper">
-                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..." maxlength="140"></textarea>
+                    <textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
                   </div>
                 </fieldset>
 

js/api.js

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

js/main.js

@@ -1,8 +1,9 @@
-import { getPictures } from './mock/pictures.js';
+import { getData } from './api.js';
 import { renderGallery } from './ui/gallery.js';
 import { initBigPicture } from './ui/big-picture/meta.js';
 import { initCommentsLoader } from './ui/big-picture/comments.js';
 import { initForm } from './ui/form/index.js';
+import { showAlert } from './ui/messages.js';
 
 const container = document.querySelector('.pictures');
 const template = document.querySelector('#picture')?.content?.querySelector('.picture');
@@ -11,6 +12,17 @@ initBigPicture();
 initCommentsLoader();
 initForm();
 
-if (container && template) {
-  renderGallery(getPictures(), container, template);
-}
+const initGallery = async () => {
+  if (!container || !template) {
+    return;
+  }
+
+  try {
+    const pictures = await getData();
+    renderGallery(pictures, container, template);
+  } catch (err) {
+    showAlert(err.message);
+  }
+};
+
+initGallery();

js/ui/form/index.js

@@ -1,18 +1,29 @@
-import { initModal } from './modal.js';
+import { initModal, hideModal } from './modal.js';
 import { initValidation, resetValidation } from './validation.js';
 import { initSubmit } from './submit.js';
 import { initScale } from './scale.js';
 import { initEffects } from './effect.js';
+import { showSuccessMessage, showErrorMessage } from '../messages.js';
 
 const initForm = () => {
   initValidation();
-  initSubmit();
-  initScale();
-  initEffects();
 
   initModal(() => {
     resetValidation();
   });
+
+
+  initScale();
+  initEffects();
+  initSubmit({
+    success: () => {
+      hideModal();
+      showSuccessMessage();
+    },
+    error: () => {
+      showErrorMessage();
+    },
+  });
 };
 
 export { initForm };

js/ui/form/modal.js

@@ -6,6 +6,8 @@ const body = document.body;
 const form = document.querySelector('.img-upload__form');
 const overlay = form.querySelector('.img-upload__overlay');
 const cancelButton = form.querySelector('.img-upload__cancel');
+const hashtagField = form.querySelector('.text__hashtags');
+const commentField = form.querySelector('.text__description');
 const fileField = form.querySelector('.img-upload__input');
 
 let onCloseCallback = null;
@@ -38,8 +40,12 @@ const initModal = (cb) => {
   cancelButton.addEventListener('click', hideModal);
 };
 
+const isTextFieldFocused = () =>
+  document.activeElement === hashtagField ||
+  document.activeElement === commentField;
+
 function onDocumentKeydown(evt) {
-  if (isEscapeKey(evt)) {
+  if (isEscapeKey(evt) && !isTextFieldFocused()) {
     evt.preventDefault();
     hideModal();
   }

js/ui/form/submit.js

@@ -1,15 +1,51 @@
 import { isValid } from './validation.js';
+import { sendData } from '../../api.js';
+
+const SubmitButtonText = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...',
+};
 
 const form = document.querySelector('.img-upload__form');
+const submitButton = form.querySelector('.img-upload__submit');
+
+let onSuccess = null;
+let onError = null;
+
+const blockSubmitButton = () => {
+  submitButton.disabled = true;
+  submitButton.textContent = SubmitButtonText.SENDING;
+};
+
+const unblockSubmitButton = () => {
+  submitButton.disabled = false;
+  submitButton.textContent = SubmitButtonText.IDLE;
+};
+
+const onFormSubmit = async (evt) => {
+  evt.preventDefault();
+
+  if (!isValid()) {
+    return;
+  }
+
+  blockSubmitButton();
+
+  try {
+    await sendData(new FormData(evt.target));
+    onSuccess?.();
+  } catch {
+    onError?.();
+  } finally {
+    unblockSubmitButton();
+  }
+};
 
-const initSubmit = () => {
-  form.addEventListener('submit', (evt) => {
-    const valid = isValid();
+const initSubmit = ({ success, error }) => {
+  onSuccess = success;
+  onError = error;
 
-    if (!valid) {
-      evt.preventDefault();
-    }
-  });
+  form.addEventListener('submit', onFormSubmit);
 };
 
 export { initSubmit };

js/ui/messages.js

@@ -0,0 +1,73 @@
+import { isEscapeKey } from '../utils/common.js';
+
+const ALERT_SHOW_TIME = 5000;
+
+const successTemplate = document
+  .querySelector('#success')
+  .content.querySelector('.success');
+
+const errorTemplate = document
+  .querySelector('#error')
+  .content.querySelector('.error');
+
+const dataErrorTemplate = document
+  .querySelector('#data-error')
+  .content.querySelector('.data-error');
+
+const showAlert = (message) => {
+  const alertElement = dataErrorTemplate.cloneNode(true);
+
+  if (message) {
+    alertElement.querySelector('.data-error__title').textContent = message;
+  }
+
+  document.body.append(alertElement);
+
+  setTimeout(() => {
+    alertElement.remove();
+  }, ALERT_SHOW_TIME);
+};
+
+const showMessage = (template, buttonSelector) => {
+  const messageElement = template.cloneNode(true);
+  document.body.append(messageElement);
+
+  const closeButton = messageElement.querySelector(buttonSelector);
+
+  const removeMessage = () => {
+    messageElement.remove();
+    document.removeEventListener('keydown', onKeydown);
+    document.removeEventListener('click', onOutsideClick);
+  };
+
+  function onKeydown(evt) {
+    if (isEscapeKey(evt)) {
+      evt.preventDefault();
+      removeMessage();
+    }
+  }
+
+  function onOutsideClick(evt) {
+    const inner = messageElement.querySelector(
+      '.success__inner, .error__inner'
+    );
+
+    if (!inner.contains(evt.target)) {
+      removeMessage();
+    }
+  }
+
+  closeButton.addEventListener('click', removeMessage);
+  document.addEventListener('keydown', onKeydown);
+  document.addEventListener('click', onOutsideClick);
+};
+
+const showSuccessMessage = () => {
+  showMessage(successTemplate, '.success__button');
+};
+
+const showErrorMessage = () => {
+  showMessage(errorTemplate, '.error__button');
+};
+
+export { showAlert, showSuccessMessage, showErrorMessage };