Merge pull request #12 from yakovenko79/module11-task1

Author: keksobot

js/api.js

@@ -0,0 +1,52 @@
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+const ERROR_MESSAGE_TIMEOUT = 5000;
+
+const errorTemplate = document.querySelector('#data-error');
+
+const Routes = {
+  GET_DATA: '/data',
+  SEND_DATA: '/'
+};
+
+const Method = {
+  GET: 'GET',
+  POST: 'POST'
+};
+
+const ErrorText = {
+  GET_DATA: 'Не удалось загрузить данные. Попробуйте обновить страницу',
+  SEND_DATA: 'Не удалось отправить форму. Попробуйте ещё раз',
+};
+
+function showDataError(message) {
+  const errorMessage = errorTemplate.content.cloneNode(true).firstElementChild;
+  const titleElement = errorMessage.querySelector('.data-error__title');
+  titleElement.textContent = message;
+  document.body.appendChild(errorMessage);
+  setTimeout(() => {
+    errorMessage.remove();
+  }, ERROR_MESSAGE_TIMEOUT);
+}
+
+function load(route, errorText, method = Method.GET, body = null){
+  return fetch(`${BASE_URL}${route}`, {method, body})
+    .then((response) => {
+      if(!response.ok) {
+        throw new Error(errorText);
+      }
+      return response.json();
+    })
+    .catch((err) => {
+      throw err;
+    });
+}
+
+function getData(){
+  return load(Routes.GET_DATA, ErrorText.GET_DATA);
+}
+
+function sendData(body){
+  return load(Routes.SEND_DATA, ErrorText.SEND_DATA, Method.POST, body);
+}
+
+export { getData, sendData, showDataError, ErrorText };

js/generate-data.js

@@ -1,18 +1,17 @@
 const MAX_HASHTAG_SYMBOLS = 20;
 const MAX_HASHTAGS = 5;
 
-
 let errorMessage = '';
 
 function error() {
   return errorMessage;
 }
 
-function isHashtagValid(value){
+function isHashtagValid(value = null){
   errorMessage = '';
   const inputText = value.toLowerCase().trim();
 
-  if(inputText.lenght === 0){
+  if(inputText.trim().length === 0){
     return true;
   }
 

js/hashtag-validator.js

@@ -1,8 +1,15 @@
 import { createThumbnails } from './thumbnails';
-import { getPhotos } from './generate-data.js';
 import { initUploadModal } from './upload-photo-form.js';
+import { ErrorText, getData, showDataError } from './api.js';
 
-const photos = getPhotos();
+async function init() {
+  try {
+    const data = await getData();
+    createThumbnails(data);
+  } catch (error) {
+    showDataError(ErrorText.GET_DATA);
+  }
+  initUploadModal();
+}
 
-createThumbnails(photos);
-initUploadModal();
+init();

js/main.js

@@ -7,6 +7,7 @@ const modalLikes = modal.querySelector('.likes-count');
 const modalDescription = modal.querySelector('.social__caption');
 const closePopupButton = modal.querySelector('.big-picture__cancel');
 const modalCommonCommentsAmount = modal.querySelector('.social__comment-total-count');
+const messageInputField = modal.querySelector('.social__footer-text');
 const documentBody = document.body;
 
 function onDocumentKeydown() {
@@ -41,4 +42,8 @@ function openPopup(currentImage){
   document.addEventListener('keydown', onDocumentKeydown);
 }
 
+messageInputField.addEventListener('keydown', (evt) => {
+  evt.stopPropagation();
+});
+
 export { openPopup };

js/popup.js

@@ -1,11 +1,16 @@
 import { isHashtagValid, error } from './hashtag-validator';
 import { isEscapeKey } from './utils';
 import { onEffectChange, resetFilter } from './slider-effect.js';
+import { ErrorText, sendData, showDataError } from './api.js';
 
 const STEP = 25;
 const MIN_SCALE = 25;
 const MAX_SCALE = 100;
 
+const SubmitButtonText = {
+  IDLE: 'Сохранить',
+  SENDING: 'Сохраняю...'
+};
 
 const uploadForm = document.querySelector('.img-upload__form');
 const pageBody = document.body;
@@ -22,6 +27,9 @@ const increaseScaleButton = uploadForm.querySelector('.scale__control--bigger');
 const scaleValue = uploadForm.querySelector('.scale__control--value');
 const uploadImagePreview = uploadForm.querySelector('.img-upload__preview img');
 const effectsList = uploadForm.querySelector('.effects__list');
+const submitButton = uploadForm.querySelector('.img-upload__submit');
+const templateSuccess = document.querySelector('#success').content;
+const templateError = document.querySelector('#error').content;
 
 let currentScaleValue = parseInt(scaleValue.value.slice(0, -1), 10);
 
@@ -45,6 +53,34 @@ function onDocumentKeyDown(evt) {
   }
 }
 
+function onCloseNotification(evt){
+  evt.stopPropagation();
+  const existElement = document.querySelector('.success') || document.querySelector('.error');
+  const closeButton = existElement.querySelector('button');
+  if (evt.target === existElement || evt.target === closeButton || isEscapeKey(evt)) {
+    existElement.remove();
+    pageBody.removeEventListener('click', onCloseNotification);
+    pageBody.removeEventListener('keydown', onCloseNotification);
+  }
+}
+
+function appendNotification(template) {
+  const notificationNode = template.cloneNode(true);
+  pageBody.append(notificationNode);
+  pageBody.addEventListener('click', onCloseNotification);
+  pageBody.addEventListener('keydown', onCloseNotification);
+}
+
+const blockSubmitButton = () => {
+  submitButton.disabled = true;
+  submitButton.textContent = SubmitButtonText.SENDING;
+};
+
+const unblockSubmitButton = () => {
+  submitButton.disabled = false;
+  submitButton.textContent = SubmitButtonText.IDLE;
+};
+
 const pristine = new Pristine(uploadForm, {
   classTo: 'img-upload__field-wrapper',
   errorClass: 'img-upload__field-wrapper--error',
@@ -59,7 +95,6 @@ function closePhotoEditorForm(){
   pristine.reset();
   uploadForm.reset();
   resetFilter();
-
 }
 
 function initUploadModal() {
@@ -78,10 +113,9 @@ function onScaleImage(direction) {
   let newValue = currentScaleValue + STEP * direction;
   if(newValue < MIN_SCALE) {
     newValue = MIN_SCALE;
-  } else if(newValue > MAX_SCALE){
+  } else if (newValue > MAX_SCALE) {
     newValue = MAX_SCALE;
   }
-
   currentScaleValue = newValue;
   scaleValue.value = `${currentScaleValue}%`;
   uploadImagePreview.style.transform = `scale(${currentScaleValue / MAX_SCALE})`;
@@ -97,7 +131,17 @@ function onFormSubmit(evt) {
   evt.preventDefault();
   if(pristine.validate()) {
     hashtagInput.value = hashtagInput.value.trim().replaceAll(/\s+/g, ' ');
-    uploadForm.submit();
+    blockSubmitButton();
+    sendData(new FormData(evt.target))
+      .then(() => {
+        appendNotification(templateSuccess);
+        closePhotoEditorForm();
+      })
+      .catch(() => {
+        showDataError(ErrorText.SEND_DATA);
+        appendNotification(templateError);
+      })
+      .finally(unblockSubmitButton);
   }
 }