implementation of receiving and sending photos to the server

Author: suntira

js/api.js

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

js/create-photo-descriptions.js

@@ -1,6 +1,14 @@
-import { photosData } from './create-photo-descriptions.js';
 import { renderGallery } from './gallery.js';
 import { initPhotoUploadForm } from './photo-upload-form.js';
+import { getData } from './api.js';
+import { showDataError } from './messages.js';
+
+getData()
+  .then((photos) => {
+    renderGallery(photos);
+  })
+  .catch(() => {
+    showDataError();
+  });
 
-renderGallery(photosData);
 initPhotoUploadForm();

js/data.js

@@ -0,0 +1,54 @@
+const dataErrorTemplate = document.querySelector('#data-error')?.content;
+const successTemplate = document.querySelector('#success')?.content;
+const errorTemplate = document.querySelector('#error')?.content;
+
+const DATA_ERROR_TIMEOUT = 5000;
+
+const showDataError = () => {
+  const dataErrorElement = dataErrorTemplate.cloneNode(true);
+  document.body.append(dataErrorElement);
+
+  const dataErrorBlock = document.body.querySelector('.data-error');
+
+  setTimeout(() => {
+    dataErrorBlock?.remove();
+  }, DATA_ERROR_TIMEOUT);
+};
+
+const showMessage = (template, blockClass, buttonClass) => {
+  const messageElement = template.cloneNode(true);
+  const messageBlock = messageElement.querySelector(blockClass);
+
+  document.body.append(messageBlock);
+
+  const removeMessage = () => {
+    messageBlock.remove();
+    document.removeEventListener('keydown', onEscKeydown);
+  };
+
+  function onEscKeydown (evt) {
+    if (evt.key === 'Escape') {
+      removeMessage();
+    }
+  }
+
+  messageBlock.querySelector(buttonClass).addEventListener('click', removeMessage);
+  messageBlock.addEventListener('click', (evt) => {
+    if (evt.target === messageBlock) {
+      removeMessage();
+    }
+  });
+
+  document.addEventListener('keydown', onEscKeydown);
+};
+
+const showSuccess = () => {
+  showMessage(successTemplate, '.success', '.success__button');
+};
+
+const showError = () => {
+  showMessage(errorTemplate, '.error', '.error__button');
+};
+
+export { showDataError, showSuccess, showError };
+

js/functions.js

@@ -2,6 +2,11 @@ import { isEscapeKey, showModal } from './util.js';
 import { isValid, resetValidation } from './validations.js';
 import { resetScalePhoto } from './photo-scale-editor.js';
 import { resetEffects } from './photo-effects.js';
+import { sendData } from './api.js';
+import { showSuccess, showError } from './messages.js';
+
+const SUBMIT_TEXT = 'Опубликовать';
+const SENDING_TEXT = 'Отправка...';
 
 const photoLoadingElement = document.querySelector('.img-upload__input');
 const photoUploadOverlayElement = document.querySelector('.img-upload__overlay');
@@ -11,6 +16,9 @@ const photoUploadFormElement = document.querySelector('.img-upload__form');
 const hashtagsInputElement = photoUploadFormElement.querySelector('.text__hashtags');
 const commentInputElement = photoUploadFormElement.querySelector('.text__description');
 
+
+const submitButton = photoUploadFormElement.querySelector('.img-upload__submit');
+
 const onDocumentKeydown = (evt) => {
   if (document.activeElement === hashtagsInputElement || document.activeElement === commentInputElement) {
     evt.stopPropagation();
@@ -47,6 +55,32 @@ const initPhotoUploadForm = () => {
 hashtagsInputElement.addEventListener('keydown', (evt) => evt.stopPropagation());
 commentInputElement.addEventListener('keydown', (evt) => evt.stopPropagation());
 
-photoUploadFormElement.addEventListener('submit', (evt) => !isValid() && evt.preventDefault());
+const toggleSubmitButton = (isDisabled) => {
+  submitButton.disabled = isDisabled;
+  submitButton.textContent = isDisabled ? SENDING_TEXT : SUBMIT_TEXT;
+};
+
+photoUploadFormElement.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+
+  if (!isValid()) {
+    return;
+  }
+
+  toggleSubmitButton(true);
+
+  sendData(new FormData(photoUploadFormElement))
+    .then(() => {
+      closePhotoUploadModal();
+      showSuccess();
+    })
+    .catch(() => {
+      showError();
+    })
+    .finally(() => {
+      toggleSubmitButton(false);
+    });
+});
+
 
 export { initPhotoUploadForm };

js/main.js

@@ -1,40 +1,5 @@
 const body = document.body;
 
-const getRandomInteger = (min, max) => {
-  const lower = Math.ceil(Math.min(Math.abs(min), Math.abs(max)));
-  const upper = Math.floor(Math.max(Math.abs(min), Math.abs(max)));
-  const result = Math.random() * (upper - lower + 1) + lower;
-
-  return Math.floor(result);
-};
-
-const createRandomIntegerFromRangeGenerator = (min, max) => {
-  const previousValues = [];
-
-  return function () {
-    let currentValue = getRandomInteger(min, max);
-    if (previousValues.length >= (max - min + 1)) {
-      window.console.log(`Перебраны все числа из диапазона от ${min} до ${max}`);
-      return null;
-    }
-    while (previousValues.includes(currentValue)) {
-      currentValue = getRandomInteger(min, max);
-    }
-    previousValues.push(currentValue);
-    return currentValue;
-  };
-};
-
-const getRandomArrayElement = (elements) =>
-  elements.length
-    ? elements[getRandomInteger(0, elements.length - 1)]
-    : undefined;
-
-const createIdGenerator = () => {
-  let lastGeneratedId = 0;
-  return () => ++lastGeneratedId;
-};
-
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const showModal = (modal, isShown = true) => {
@@ -48,4 +13,4 @@ const showModal = (modal, isShown = true) => {
   body.classList.remove('modal-open');
 };
 
-export {getRandomInteger, createRandomIntegerFromRangeGenerator, getRandomArrayElement, createIdGenerator, isEscapeKey, showModal};
+export { isEscapeKey, showModal};