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

js/api.js

@@ -0,0 +1,27 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+const Method = {
+  GET: 'GET',
+  POST: 'POST',
+};
+
+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 fetchPhotos = () => load(Route.GET_DATA);
+const sendPhoto = (body) => load(Route.SEND_DATA, Method.POST, body);
+
+export { fetchPhotos, sendPhoto };

js/components/alerts.js

@@ -0,0 +1,58 @@
+import { isEscapeKey } from '../util.js';
+
+const bodyElement = document.body;
+const uploadErrorTemplate = document
+  .querySelector('#error')
+  .content.querySelector('.error');
+const uploadSuccessTemplate = document
+  .querySelector('#success')
+  .content.querySelector('.success');
+const dataLoadErrorTemplate = document
+  .querySelector('#data-error')
+  .content.querySelector('.data-error');
+
+const Alerts = {
+  SUCCESS: uploadSuccessTemplate,
+  ERROR: uploadErrorTemplate,
+  DATA_ERROR: dataLoadErrorTemplate,
+};
+
+const onDocumentKeydown = (event) => {
+  if (isEscapeKey(event)) {
+    event.preventDefault();
+    closeAlert();
+  }
+};
+
+const onDocumentClick = (event) => {
+  const alertElement = bodyElement.querySelector('.alert');
+
+  if (!alertElement.querySelector('div').contains(event.target)) {
+    closeAlert();
+  }
+};
+
+function closeAlert() {
+  bodyElement.querySelector('.alert').remove();
+
+  document.removeEventListener('keydown', onDocumentKeydown);
+  document.removeEventListener('click', onDocumentClick);
+}
+
+const showAlert = (type = 'SUCCESS') => {
+  const alertElement = Alerts[type].cloneNode(true);
+  alertElement.classList.add('alert');
+  bodyElement.append(alertElement);
+
+  if (alertElement.classList.contains('data-error')) {
+    setTimeout(() => {
+      alertElement.remove();
+    }, 5000);
+  } else {
+    alertElement.querySelector('button').addEventListener('click', closeAlert);
+    document.addEventListener('keydown', onDocumentKeydown);
+    document.addEventListener('click', onDocumentClick);
+  }
+};
+
+export { showAlert };

js/components/upload-modal.js

@@ -1,12 +1,11 @@
 import { isEscapeKey } from '../util.js';
-import { onUploadFormSubmit } from '../upload-validation.js';
 import {
   createOnEffectChange,
   clearEffects,
   createOnScaleButtonClick,
 } from '../effects.js';
 
-const bodyElement = document.querySelector('body');
+const bodyElement = document.body;
 const formElement = document.querySelector('#upload-select-image');
 const hashtagsElement = formElement.querySelector('input[name="hashtags"]');
 const descriptionElement = formElement.querySelector('.text__description');
@@ -22,7 +21,7 @@ const uploadedPreviewElement = formElement.querySelector(
 );
 
 const onDocumentKeydown = (event) => {
-  if (isEscapeKey(event)) {
+  if (isEscapeKey(event) && !bodyElement.querySelector('.alert')) {
     event.preventDefault();
     closeUploadModal();
   }
@@ -58,7 +57,6 @@ function closeUploadModal() {
   );
 
   formElement.removeEventListener('change', onEffectChange);
-  formElement.removeEventListener('submit', onUploadFormSubmit);
   document.removeEventListener('keydown', onDocumentKeydown);
 
   [hashtagsElement, descriptionElement].forEach((input) => {
@@ -77,7 +75,6 @@ const renderUploadModal = () => {
     );
 
     formElement.addEventListener('change', onEffectChange);
-    formElement.addEventListener('submit', onUploadFormSubmit);
     overlayCloseElement.addEventListener('click', closeUploadModal);
     document.addEventListener('keydown', onDocumentKeydown);
 
@@ -88,4 +85,4 @@ const renderUploadModal = () => {
   });
 };
 
-export { renderUploadModal };
+export { closeUploadModal, renderUploadModal };

js/main.js

@@ -1,11 +1,21 @@
-import { genereteData } from './data.js';
+import { fetchPhotos } from './api.js';
 import { renderGalley } from './components/gallery.js';
 import { renderPhotoModal } from './components/photo-modal.js';
-import { renderUploadModal } from './components/upload-modal.js';
+import {
+  renderUploadModal,
+  closeUploadModal,
+} from './components/upload-modal.js';
+import { setUploadFormSubmit } from './upload-validation.js';
+import { showAlert } from './components/alerts.js';
 
-const data = genereteData();
 const picturesElement = document.querySelector('.pictures');
 
-renderGalley(data, picturesElement);
-renderPhotoModal(data, picturesElement);
+fetchPhotos()
+  .then((data) => {
+    renderGalley(data, picturesElement);
+    renderPhotoModal(data, picturesElement);
+  })
+  .catch(() => showAlert('DATA_ERROR'));
+
 renderUploadModal();
+setUploadFormSubmit(closeUploadModal);

js/upload-validation.js

@@ -1,4 +1,8 @@
+import { sendPhoto } from './api.js';
+import { showAlert } from './components/alerts.js';
+
 const formElement = document.querySelector('#upload-select-image');
+const submitElement = formElement.querySelector('button[type="submit"]');
 const hashtagsElement = formElement.querySelector('input[name="hashtags"]');
 const descriptionElement = formElement.querySelector('.text__description');
 const hashtagRegex = /^#[a-zа-яё0-9]{1,19}$/i;
@@ -18,7 +22,7 @@ const validateHashtagsFormat = (value) => {
   return hashtags.every((hashtag) => hashtagRegex.test(hashtag));
 };
 
-const validatekHashtagsAmount = (value) => {
+const validateHashtagsAmount = (value) => {
   if (value.length === 0) {
     return true;
   }
@@ -55,7 +59,7 @@ pristine.addValidator(
 );
 pristine.addValidator(
   hashtagsElement,
-  validatekHashtagsAmount,
+  validateHashtagsAmount,
   'Максимум 5 хэштегов',
 );
 pristine.addValidator(
@@ -69,12 +73,23 @@ pristine.addValidator(
   'Максимум 140 символов',
 );
 
-const onUploadFormSubmit = (event) => {
-  event.preventDefault();
+const setUploadFormSubmit = (onSuccess) => {
+  formElement.addEventListener('submit', (event) => {
+    event.preventDefault();
 
-  if (pristine.validate()) {
-    formElement.submit();
-  }
+    if (pristine.validate()) {
+      submitElement.disabled = true;
+      sendPhoto(new FormData(event.target))
+        .then(onSuccess)
+        .then(showAlert)
+        .catch(() => {
+          showAlert('ERROR');
+        })
+        .finally(() => {
+          submitElement.disabled = false;
+        });
+    }
+  });
 };
 
-export { onUploadFormSubmit };
+export { setUploadFormSubmit };