Merge pull request #17 from Vip2045/module11-task1

Author: keksobot

Readme.md

@@ -1,7 +1,7 @@
 # Личный проект «Кекстаграм»
 
 * Студент: [Александр Абраменков](https://up.htmlacademy.ru/javascript-individual/2/user/2662363).
-* Наставник: [Виктория Никитина](https://up.htmlacademy.ru/javascript-individual/2/user/2662363).
+* Наставник: [Виктория Никитина](https://htmlacademy.ru/profile/id1217273).
 
 ---
 

js/api.js

@@ -0,0 +1,14 @@
+export const getPhotos = () => fetch('https://31.javascript.htmlacademy.pro/kekstagram/data')
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error();
+    }
+    return response.json();
+  });
+
+export const postPhoto = (body) => fetch('https://31.javascript.htmlacademy.pro/kekstagram/',
+  {
+    method: 'post',
+    body
+  }
+);

js/big-picture.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-use-before-define */
 
 const COMMENTS_STEP = 5;
-const body = document.body;
+const bodyNode = document.body;
 const modalNode = document.querySelector('.big-picture');
 const closeButtonNode = modalNode.querySelector('.big-picture__cancel');
 const imageNode = modalNode.querySelector('.big-picture__img img');
@@ -23,14 +23,14 @@ let renderedComments;
 const showModal = (isVisible = true) => {
   if (isVisible) {
     modalNode.classList.remove('hidden');
-    body.classList.add('modal-open');
+    bodyNode.classList.add('modal-open');
 
 
     document.addEventListener('keydown', onDocumentKeydown);
     return;
   }
   modalNode.classList.add('hidden');
-  body.classList.remove('modal-open');
+  bodyNode.classList.remove('modal-open');
 
   document.removeEventListener('keydown', onDocumentKeydown);
 };

js/constans.js

@@ -83,64 +83,3 @@ export const EffectsSettings = {
   },
 };
 
-export const MIN_LIKES = 15;
-export const MAX_LIKES = 200;
-export const MIN_COMMENTS = 0;
-export const MAX_COMMENTS = 30;
-
-export const DESCRIPTIONS = [
-  'Красивый вид',
-  'Указатель',
-  'Море',
-  'Девушка',
-  'Суп-улыбка',
-  'Спортивная-машина',
-  'Клубника на тарелке',
-  'Морс',
-  'Самолет над пляжем',
-  'Отдел для обуви',
-  'Ограждение на пляже',
-  'Спорткар Ауди',
-  'Салат',
-  'Кот ролл',
-  'Модные сапоги',
-  'Вид с высоты',
-  'Оркестр',
-  'Ретроавтомобиль',
-  'Женщина в тапочках',
-  'Пальмы в зоне отеля',
-  'Тарелка с едой',
-  'Закат на море',
-  'Краб',
-  'Фаер-шоу',
-  'Тропики',
-];
-
-// Массив имён для комментаторов
-export const NAMES = [
-  'Александр',
-  'Мария',
-  'Иван',
-  'Екатерина',
-  'Дмитрий',
-  'Анна',
-  'Сергей',
-  'Ольга',
-  'Алексей',
-  'Наталья',
-  'Артём',
-  'Елена',
-  'Максим',
-  'Татьяна',
-  'Владимир',
-];
-
-// Массив фраз для комментариев
-export const PHRASES = [
-  'Всё отлично!',
-  'В целом всё неплохо. Но не всё.',
-  'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
-  'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
-  'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
-  'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!',
-];

js/data.js

@@ -1,11 +1,18 @@
 import { isValid, resetValidation } from './validation.js';
 import { resetScale } from './scale.js';
 import { resetEffects } from './effects.js';
+import { Popups, showPopup } from './popups.js';
+
+const SubmitButtonCaptions = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...'
+};
 
 const formNode = document.querySelector('#upload-select-image');
 const inputFileNode = document.querySelector('#upload-file');
 const modalNode = document.querySelector('.img-upload__overlay');
 const closeButtonNode = document.querySelector('#upload-cancel');
+const submitButtonNode = document.querySelector('#upload-submit');
 
 const closeModal = () => {
   modalNode.classList.add('hidden');
@@ -26,8 +33,37 @@ closeButtonNode.addEventListener('click', (evt) => {
   closeModal();
 });
 
+const blockSubmit = (isBlocked = true) => {
+  submitButtonNode.disabled = isBlocked;
+  submitButtonNode.textContent = isBlocked ? SubmitButtonCaptions.SENDING : SubmitButtonCaptions.IDLE;
+};
+
 formNode.addEventListener('submit', (evt) => {
-  if (!isValid()) {
-    evt.preventDefault();
+  evt.preventDefault();
+  if (isValid()) {
+    blockSubmit();
+    fetch('https://31.javascript.htmlacademy.pro/kekstagram/',
+      {
+        method: 'post',
+        body: new FormData(formNode)
+      }
+    )
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error();
+        }
+        //close form
+        closeModal();
+
+        //show success popup
+        showPopup(Popups.SUCCESS);
+      })
+      .finally(() => {
+        blockSubmit(false);
+      })
+      .catch(() => {
+        // show error popup
+        showPopup(Popups.ERROR);
+      });
   }
 });

js/form.js

@@ -1,7 +1,13 @@
-import { getPhotos } from './data.js';
+import { getPhotos } from './api.js';
 import { renderCards } from './render-cards.js';
 import './form.js';
+import { showErrorBanner } from './utils.js';
 
-
-const photos = getPhotos(25);
-renderCards(photos);
+getPhotos()
+  .then((photos) => {
+    //set filters
+    renderCards(photos);
+  })
+  .catch(() => {
+    showErrorBanner();
+  });

js/functions.js

@@ -0,0 +1,33 @@
+export const Popups = {
+  ERROR: 'error',
+  SUCCESS: 'success'
+};
+const successTemplate = document.querySelector('#success').content.querySelector('.success');
+const errorTemplate = document.querySelector('#error').content.querySelector('.error');
+const bodyNode = document.body;
+
+const templates = {
+  [Popups.ERROR]: errorTemplate,
+  [Popups.SUCCESS]: successTemplate
+};
+
+export const showPopup = (type) => {
+  const popup = templates[type].cloneNode(true);
+  bodyNode.append(popup);
+
+  const onDocumentKeydown = ({ key }) => {
+    if (key === 'Escape') {
+      popup.remove();
+      document.removeEventListener('keydown', onDocumentKeydown);
+    }
+  };
+
+  popup.addEventListener('click', ({ target }) => {
+    if (target.classList.contains(type) || target.classList.contains(`${type}__button`)) {
+      popup.remove();
+      document.removeEventListener('keydown', onDocumentKeydown);
+    }
+  });
+
+  document.addEventListener('keydown', onDocumentKeydown);
+};

js/main.js

@@ -1,3 +1,8 @@
+const TIMEOUT = 5000;
+
+const errorBannerTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+const bodyNode = document.body;
+
 // Функция getRandomNumber
 export const getRandomNumber = (min, max) => {
   const left = Math.ceil(Math.min(min, max));
@@ -8,3 +13,12 @@ export const getRandomNumber = (min, max) => {
 
 //Функция getRandomElement
 export const getRandomElement = (items) => items[getRandomNumber(0, items.length - 1)];
+
+
+export const showErrorBanner = () => {
+  const errorBanner = errorBannerTemplate.cloneNode(true);
+  bodyNode.append(errorBanner);
+  setTimeout(() => {
+    errorBanner.remove();
+  }, TIMEOUT);
+};