Merge pull request #11 from Aleksandr-Anokhin/module11-task1

js/api.js

@@ -0,0 +1,16 @@
+import { KEKS_DATA } from './constants';
+import { KEKS_NO_DATA } from './constants';
+
+
+export const getData = () => fetch(KEKS_DATA)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error();
+    }
+    return response.json();
+  });
+
+export const sendData = (body) => fetch(KEKS_NO_DATA, {
+  method: 'POST',
+  body
+});

js/constants.js

@@ -36,6 +36,10 @@ export const MIN_SCALE = 25;
 export const STEP_SCALE = 25;
 export const DEFAULT_SCALE = MAX_SCALE;
 export const SCALE_FACTOR = 0.01;
+export const MASSAGE_TIME = 5000;
+export const KEKS_DATA = 'https://31.javascript.htmlacademy.pro/kekstagram/data';
+export const KEKS_NO_DATA = 'https://31.javascript.htmlacademy.pro/kekstagram';
+
 
 /*
 Для эффекта «Хром» — filter: grayscale(0..1) с шагом 0.1;
@@ -106,3 +110,8 @@ export const EffectsSettings = {
 };
 
 export const DEFAULT_EFFECT = EFFECTS.NONE;
+
+export const POPUPS_TYPES = {
+  SUCCESS: 'success',
+  ERROR: 'error'
+};

js/form.js

@@ -1,6 +1,9 @@
 import { isValid, reset as resetValidation } from './validation.js';
 import { reset as resetScale } from './scale.js';
 import { reset as resetEffects } from './effects.js';
+import { POPUPS_TYPES } from './constants.js';
+import { showPopup } from './popup.js';
+import { sendData } from './api.js';
 
 const uploadFile = document.querySelector('#upload-file');
 const modal = document.querySelector('.img-upload__overlay');
@@ -9,6 +12,7 @@ const closeButton = document.querySelector('#upload-cancel');
 const form = document.querySelector('.img-upload__form');
 const imgPreview = document.querySelector('.img-upload__preview img');
 const effectsElements = document.querySelectorAll('.effects__preview');
+const submitButton = document.querySelector('#upload-submit');
 
 const setPreviewImage = () => {
   const file = uploadFile.files[0];
@@ -45,9 +49,36 @@ closeButton.addEventListener('click', (evt) => {
   closeModal();
 });
 
+const SubmitButtonTexts = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...'
+};
+
+const disableSubmitButton = (isDisabled = true) => {
+  submitButton.disabled = isDisabled;
+  submitButton.textContent = isDisabled ? SubmitButtonTexts.SENDING : SubmitButtonTexts.IDLE;
+};
+
 form.addEventListener('submit', (evt) => {
+  evt.preventDefault();
+  if (isValid()) {
+    disableSubmitButton();
+
+
+    sendData(new FormData(form))
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error();
+        }
+        closeModal();
+        showPopup(POPUPS_TYPES.SUCCESS);
+      })
+      .catch(() => {
+        showPopup(POPUPS_TYPES.ERROR);
+      })
+      .finally(() => {
+        disableSubmitButton(false);
+      });
 
-  if (!isValid()) {
-    evt.preventDefault();
   }
 });

js/main.js

@@ -1,7 +1,15 @@
-import { createPhotos } from './data.js';
+
 import { renderCards } from './thumbnail.js';
 
 import './form.js';
+import { showErrorMessage } from './utils.js';
+import { getData } from './api.js';
+
 
-const data = createPhotos();
-renderCards(data);
+getData()
+  .then((data) => {
+    renderCards(data);
+  })
+  .catch(() => {
+    showErrorMessage();
+  });

js/popup.js

@@ -0,0 +1,20 @@
+import { POPUPS_TYPES } from './constants.js';
+
+const successTemplate = document.querySelector('#success').content.querySelector('.success');
+const errorTemplate = document.querySelector('#error').content.querySelector('.error');
+const body = document.body;
+
+const templates = {
+  [POPUPS_TYPES.SUCCESS]: successTemplate,
+  [POPUPS_TYPES.ERROR]: errorTemplate
+};
+
+export const showPopup = (type) => {
+  const newPopup = templates[type].cloneNode(true);
+  body.append(newPopup);
+  newPopup.addEventListener('click', ({ target }) => {
+    if (target.classList.contains(type) || target.classList.contains(`${type}__button`)) {
+      newPopup.remove();
+    }
+  });
+};

js/utils.js

@@ -1,32 +1,17 @@
-import {MESSAGES, NAMES} from './constants.js';
+const errorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+const body = document.body;
+import { MASSAGE_TIME } from './constants';
 
-const getRandomIntInclusive = (min, max) => {
-  min = Math.ceil(min);
-  max = Math.floor(max);
-  return Math.floor(Math.random() * (max - min + 1) + min);
+export const showErrorMessage = () => {
+  const newErrorMessage = errorTemplate.cloneNode(true);
+  body.append(newErrorMessage);
+  setTimeout(() => {
+    newErrorMessage.remove();
+  }, MASSAGE_TIME);
 };
 
-const counter = () => {
-  let sum = 0;
-  return () => {
-    sum = sum + 1;
-    return sum;
-  };
-};
-
-const uniquePhoto = counter();
-const uniqueId = counter();
-const getRandomArrayElement = (elements) => elements[getRandomIntInclusive(0, elements.length - 1)];
-
-const createComments = () => ({
-  id: getRandomIntInclusive(0, 30),
-  avatar: `img/avatar-${getRandomIntInclusive(1, 6)}.svg`,
-  message: getRandomArrayElement(MESSAGES),
-  name: getRandomArrayElement(NAMES),
-});
-
 const isEscapeKey = (evt) => evt.key === 'Escape';
 
 const isEnterKey = (evt) => evt.key === 'Enter';
 
-export {getRandomArrayElement, getRandomIntInclusive, uniquePhoto, uniqueId, createComments, isEscapeKey, isEnterKey};
+export { isEscapeKey, isEnterKey };