Merge pull request #11 from IntellectualSpecialist/module11-task1

Author: keksobot

js/api.js

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

js/create-photos.js

@@ -65,18 +65,6 @@ const resetValidation = () => {
   pristine.reset();
 };
 
-const initFormValidation = () => {
-  if (!formElement) {
-    return;
-  }
-
-  formElement.addEventListener('submit', (evt) => {
-    evt.preventDefault();
-
-    if (pristine.validate()) {
-      formElement.submit();
-    }
-  });
-};
+const isFormValid = () => pristine.validate();
 
-export { initFormValidation, resetValidation };
+export { isFormValid, resetValidation };

js/data.js

@@ -1,14 +1,22 @@
 import { isEscKey } from './utils.js';
-import { initFormValidation, resetValidation } from './form-validation.js';
+import { renderSendInfoModal } from './info-modal-send.js';
+import { isFormValid, resetValidation } from './form-validation.js';
 import { initScalePhoto, resetScaleValue } from './scale-photo.js';
 import { initPhotoFilters, resetPhotoFilters } from './photo-filters.js';
+import { sendData } from './api.js';
+
+const SubmitButtonText = {
+  IDLE: 'Отправить',
+  SENDING: 'Отправляю...'
+};
 
 const bodyElement = document.querySelector('body');
 const formElement = bodyElement.querySelector('.img-upload__form');
 const modalFormElement = formElement.querySelector('.img-upload__overlay');
 const uploadControlElement = formElement.querySelector('.img-upload__input');
 const modalFormCloseElement = modalFormElement.querySelector('.img-upload__cancel');
 const sliderWrapperElement = modalFormElement.querySelector('.img-upload__effect-level');
+const submitButtonElement = modalFormElement.querySelector('.img-upload__submit');
 
 const onDocumentKeydown = (evt) => {
   if (isEscKey(evt)) {
@@ -21,6 +29,16 @@ const onDocumentKeydown = (evt) => {
   }
 };
 
+const disableSubmitButton = () => {
+  submitButtonElement.disabled = true;
+  submitButtonElement.textContent = SubmitButtonText.SENDING;
+};
+
+const enableSubmitButton = () => {
+  submitButtonElement.disabled = false;
+  submitButtonElement.textContent = SubmitButtonText.IDLE;
+};
+
 function openModalForm() {
   modalFormElement.classList.remove('hidden');
   bodyElement.classList.add('modal-open');
@@ -43,6 +61,23 @@ const initModalForm = () => {
     return;
   }
 
+  formElement.addEventListener('submit', (evt) => {
+    evt.preventDefault();
+
+    if (isFormValid()) {
+      const formData = new FormData(evt.target);
+      disableSubmitButton();
+      sendData(formData).then(() => {
+        closeModalForm();
+        renderSendInfoModal('success');
+      }).catch(() => {
+        renderSendInfoModal('error');
+      }).finally(() => {
+        enableSubmitButton();
+      });
+    }
+  });
+
   uploadControlElement.addEventListener('change', () => {
     openModalForm();
   });
@@ -51,7 +86,6 @@ const initModalForm = () => {
     closeModalForm();
   });
 
-  initFormValidation();
   initScalePhoto();
   initPhotoFilters();
 };

js/form-validation.js

@@ -1,14 +1,34 @@
+import { findElementById } from './utils.js';
+import { showAlertTemporarily, findTemplateById } from './utils.js';
 import { renderThumbnails } from './render-thumbnails.js';
-import { createPhotos } from './create-photos.js';
-import { initPhotoModal } from './photo-modal.js';
+import { registerPhotoModalEvents, openPhotoModal } from './photo-modal.js';
+import { getData } from './api.js';
 
 const thumbnailsContainerElement = document.querySelector('.pictures');
 
-const photos = createPhotos();
+const errorTemplateElement = findTemplateById('data-error');
 
 const initGallery = () => {
-  renderThumbnails(photos, thumbnailsContainerElement);
-  initPhotoModal(photos, thumbnailsContainerElement);
+  getData().then((photos) => {
+    renderThumbnails(photos, thumbnailsContainerElement);
+    registerPhotoModalEvents();
+
+    thumbnailsContainerElement.addEventListener('click', (evt) => {
+      const targetThumbnailElement = evt.target.closest('.picture');
+
+      if (targetThumbnailElement) {
+        evt.preventDefault();
+
+        const targetThumbnailElementId = Number(targetThumbnailElement.dataset.id);
+        const targetPhoto = findElementById(targetThumbnailElementId, photos);
+
+        openPhotoModal(targetPhoto);
+      }
+    });
+  }).catch(() => {
+    showAlertTemporarily(errorTemplateElement);
+  });
+
 };
 
 export { initGallery };

js/form.js

@@ -0,0 +1,54 @@
+import { isEscKey, findTemplateById } from './utils.js';
+
+const bodyElement = document.querySelector('body');
+const errorTemplateElement = findTemplateById('error');
+const successTemplateElement = findTemplateById('success');
+
+let modalElement;
+let currentStatus;
+
+const onBodyClick = (evt) => {
+  if (!evt.target.closest(`.${currentStatus}__inner`)) {
+    removeSendInfoModal();
+  }
+};
+
+const onBodyKeydown = (evt) => {
+  if (isEscKey(evt)) {
+    evt.preventDefault();
+    removeSendInfoModal();
+    evt.stopPropagation();
+  }
+};
+
+const createSendInfoModal = (message) => {
+  const templateElement = currentStatus === 'success' ? successTemplateElement : errorTemplateElement;
+  const templateModalElement = templateElement.cloneNode(true);
+  const closeElement = templateModalElement.querySelector(`.${currentStatus}__button`);
+
+  if (message) {
+    templateModalElement.querySelector(`.${currentStatus}__title`).textContnet = message;
+  }
+
+  closeElement.addEventListener('click', () => {
+    removeSendInfoModal();
+  });
+
+  return templateModalElement;
+};
+
+function renderSendInfoModal(status, message) {
+  currentStatus = status;
+  modalElement = createSendInfoModal(message);
+  bodyElement.append(modalElement);
+  bodyElement.addEventListener('keydown', onBodyKeydown);
+  bodyElement.addEventListener('click', onBodyClick);
+}
+
+function removeSendInfoModal() {
+  modalElement.remove();
+  bodyElement.removeEventListener('keydown', onBodyKeydown);
+  bodyElement.removeEventListener('click', onBodyClick);
+}
+
+export { renderSendInfoModal };

js/gallery.js

@@ -66,12 +66,7 @@ const createSlider = () => {
     start: 1,
     connect: 'lower',
     format: {
-      to: (value) => {
-        if (Number.isInteger(value)) {
-          return value;
-        }
-        return value.toFixed(1);
-      },
+      to: (value) => Number.isInteger(value) ? value : value.toFixed(1),
       from: (value) => parseFloat(value),
     },
   });

js/info-modal-send.js

@@ -1,4 +1,4 @@
-import { findElementById, isEscKey } from './utils.js';
+import { isEscKey } from './utils.js';
 import { renderComments } from './render-comments.js';
 
 const COMMENTS_CHUNK_SIZE = 5;
@@ -65,24 +65,11 @@ function closePhotoModal() {
   bodyElement.classList.remove('modal-open');
 }
 
-const initPhotoModal = (photos, container) => {
+const registerPhotoModalEvents = () => {
   if (!modalElement) {
     return;
   }
 
-  container.addEventListener('click', (evt) => {
-    const targetThumbnailElement = evt.target.closest('.picture');
-
-    if (targetThumbnailElement) {
-      evt.preventDefault();
-
-      const targetThumbnailElementId = Number(targetThumbnailElement.dataset.id);
-      const targetPhoto = findElementById(targetThumbnailElementId, photos);
-
-      openPhotoModal(targetPhoto);
-    }
-  });
-
   modalCommentsLoaderElement.addEventListener('click', () => {
     renderNextComments();
   });
@@ -92,4 +79,4 @@ const initPhotoModal = (photos, container) => {
   });
 };
 
-export { initPhotoModal };
+export { registerPhotoModalEvents, openPhotoModal };