Merge pull request #29 from Alexandra0107/module12-task2

Правки к защите

Author: Alexandra0107

js/api.js

@@ -0,0 +1,46 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
+//Отправляет данные формы на сервер
+const sendFormData = async (formData) => {
+  const submitButton = document.querySelector('.img-upload__submit');
+
+  try {
+    // Блокируем кнопку отправки
+    submitButton.disabled = true;
+    submitButton.textContent = 'Отправка...';
+
+    const response = await fetch(BASE_URL, {
+      method: 'POST',
+      body: formData
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    throw new Error(`Ошибка отправки данных: ${error.message}`);
+  } finally {
+    // Разблокируем кнопку после завершения запроса
+    submitButton.disabled = false;
+    submitButton.textContent = 'Отправить';
+  }
+};
+
+//Получает данные с сервера
+const getData = async (endpoint) => {
+  try {
+    const response = await fetch(`${BASE_URL}${endpoint}`);
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return await response.json();
+  } catch (error) {
+    throw new Error(`Ошибка получения данных: ${error.message}`);
+  }
+};
+
+export { sendFormData, getData };

js/data.js

@@ -1,26 +1,3 @@
-// Массив случайных имён
-const NAMES = [
-  'Алексей',
-  'Мария',
-  'Дмитрий',
-  'Елена',
-  'Сергей',
-  'Анна',
-  'Иван',
-  'Ольга',
-  'Николай',
-  'Татьяна'
-];
-
-const MESSAGES = [
-  'Всё отлично!',
-  'В целом всё неплохо. Но не всё.',
-  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
-  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
-  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
-  'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'
-];
-
 // Константы для управления масштабом изображения
 const SCALE = {
   STEP: 25, // шаг изменения в процентах
@@ -77,5 +54,4 @@ const EFFECTS = {
 // Значение по умолчанию для эффекта
 const DEFAULT_EFFECT = 'none';
 
-export {NAMES, MESSAGES,SCALE, EFFECTS, DEFAULT_EFFECT};
-
+export {SCALE, EFFECTS, DEFAULT_EFFECT};

js/dom.js

@@ -57,7 +57,7 @@ const getImageElement = () => {
 };
 export {
   getBigPicture,
-  getBody, 
+  getBody,
   getFileInput,
   getOverlay,
   getPreviewImage,

js/event-handlers.js

@@ -1,98 +1,109 @@
 import { isEscapeKey } from './util.js';
+import { sendFormData } from './api.js';
 
 let currentSuccessElement = null;
 let currentErrorElement = null;
 
-// Удаление сообщения об успехе
+// Простые функции удаления (не вызывают обработчики)
 const removeSuccessMessage = () => {
   if (currentSuccessElement && currentSuccessElement.parentNode) {
     currentSuccessElement.parentNode.removeChild(currentSuccessElement);
     currentSuccessElement = null;
-    document.removeEventListener('keydown', onSuccessKeydown);
-    document.removeEventListener('click', onSuccessClickOutside);
   }
 };
 
-// Обработчик нажатия клавиш для сообщения успеха
+const removeErrorMessage = () => {
+  if (currentErrorElement && currentErrorElement.parentNode) {
+    currentErrorElement.parentNode.removeChild(currentErrorElement);
+    currentErrorElement = null;
+  }
+};
+
+// Обработчики событий (используют уже объявленные функции удаления)
 const onSuccessKeydown = (evt) => {
   if (isEscapeKey(evt)) {
     evt.preventDefault();
     removeSuccessMessage();
   }
 };
 
-// Обработчик клика вне блока сообщения успеха
 const onSuccessClickOutside = (evt) => {
   if (!currentSuccessElement?.contains(evt.target)) {
     removeSuccessMessage();
   }
 };
 
-// Показ сообщения об успешной отправке
+const onErrorKeydown = (evt) => {
+  if (isEscapeKey(evt)) {
+    evt.preventDefault();
+    removeErrorMessage();
+  }
+};
+
+const onErrorClickOutside = (evt) => {
+  if (!currentErrorElement?.contains(evt.target)) {
+    removeErrorMessage();
+  }
+};
+
+// Используем обработчики и функции удаления
+const addSuccessEventListeners = () => {
+  document.addEventListener('keydown', onSuccessKeydown);
+  document.addEventListener('click', onSuccessClickOutside);
+};
+
+const removeSuccessEventListeners = () => {
+  document.removeEventListener('keydown', onSuccessKeydown);
+  document.removeEventListener('click', onSuccessClickOutside);
+};
+
+const addErrorEventListeners = () => {
+  document.addEventListener('keydown', onErrorKeydown);
+  document.addEventListener('click', onErrorClickOutside);
+};
+
+const removeErrorEventListeners = () => {
+  document.removeEventListener('keydown', onErrorKeydown);
+  document.removeEventListener('click', onErrorClickOutside);
+};
+
+// Функции показа сообщений (используют всё выше объявленное)
 const showSuccessMessage = () => {
   const successTemplate = document.querySelector('#success');
   if (!successTemplate) {
-    console.warn('Шаблон #success не найден');
     return;
   }
 
   const fragment = successTemplate.content.cloneNode(true);
   currentSuccessElement = fragment.firstElementChild;
 
   if (!currentSuccessElement) {
-    console.warn('Не удалось извлечь элемент из шаблона #success');
     return;
   }
 
   document.body.appendChild(currentSuccessElement);
 
   const successButton = currentSuccessElement.querySelector('.success__button');
   if (successButton) {
-    successButton.addEventListener('click', removeSuccessMessage);
-  }
-
-  document.addEventListener('keydown', onSuccessKeydown);
-  document.addEventListener('click', onSuccessClickOutside);
-};
-
-// Удаление сообщения об ошибке
-const removeErrorMessage = () => {
-  if (currentErrorElement && currentErrorElement.parentNode) {
-    currentErrorElement.parentNode.removeChild(currentErrorElement);
-    currentErrorElement = null;
-    document.removeEventListener('keydown', onErrorKeydown);
-    document.removeEventListener('click', onErrorClickOutside);
-  }
-};
-
-// Обработчик нажатия клавиш для сообщения ошибки
-const onErrorKeydown = (evt) => {
-  if (isEscapeKey(evt)) {
-    evt.preventDefault();
-    removeErrorMessage();
+    successButton.addEventListener('click', () => {
+      removeSuccessMessage();
+      removeSuccessEventListeners();
+    });
   }
-};
 
-// Обработчик клика вне блока сообщения ошибки
-const onErrorClickOutside = (evt) => {
-  if (!currentErrorElement?.contains(evt.target)) {
-    removeErrorMessage();
-  }
+  addSuccessEventListeners();
 };
 
-// Показ сообщения об ошибке отправки
 const showErrorMessage = (errorMessage) => {
   const errorTemplate = document.querySelector('#error');
   if (!errorTemplate) {
-    console.warn('Шаблон #error не найден');
     return;
   }
 
   const fragment = errorTemplate.content.cloneNode(true);
   currentErrorElement = fragment.firstElementChild;
 
   if (!currentErrorElement) {
-    console.warn('Не удалось извлечь элемент из шаблона #error');
     return;
   }
 
@@ -106,40 +117,16 @@ const showErrorMessage = (errorMessage) => {
 
   const errorButton = currentErrorElement.querySelector('.error__button');
   if (errorButton) {
-    errorButton.addEventListener('click', removeErrorMessage);
-  }
-
-  document.addEventListener('keydown', onErrorKeydown);
-  document.addEventListener('click', onErrorClickOutside);
-};
-
-const sendFormData = async (formData) => {
-  const submitButton = document.querySelector('.img-upload__submit');
-
-  try {
-    // Блокируем кнопку отправки
-    submitButton.disabled = true;
-    submitButton.textContent = 'Отправка...';
-
-    const response = await fetch('https://31.javascript.htmlacademy.pro/kekstagram', {
-      method: 'POST',
-      body: formData
+    errorButton.addEventListener('click', () => {
+      removeErrorMessage();
+      removeErrorEventListeners();
     });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    return await response.json();
-  } catch (error) {
-    throw error;
-  } finally {
-    // Разблокируем кнопку после завершения запроса
-    submitButton.disabled = false;
-    submitButton.textContent = 'Отправить';
   }
+
+  addErrorEventListeners();
 };
 
+//Настраивает все обработчики событий для формы загрузки
 const setupEventHandlers = (
   fileInput,
   cancelButton,
@@ -170,15 +157,16 @@ const setupEventHandlers = (
       }
 
       try {
-        // Отправляем данные на сервер
-        await sendFormData(new FormData(uploadForm));
+        // Создаём FormData из формы
+        const formData = new FormData(uploadForm);
+
+        // Отправляем данные на сервер через API-модуль
+        await sendFormData(formData);
 
         // Показ успеха и закрытие формы с сбросом
         showSuccessMessage();
         onSubmitSuccess(); // Вызываем callback для сброса формы
       } catch (error) {
-        console.error('Ошибка отправки формы:', error);
-        // Показ ошибки — форма остаётся открытой для повторной отправки
         showErrorMessage('Не удалось отправить форму. Проверьте подключение и попробуйте ещё раз.');
       }
     });
@@ -205,4 +193,4 @@ const setupEventHandlers = (
   }
 };
 
-export { setupEventHandlers, showSuccessMessage, showErrorMessage, sendFormData };
+export { setupEventHandlers, showSuccessMessage, showErrorMessage};