Надо подкачаться

js/create-thumbnails/index.js

@@ -1,13 +1,18 @@
-import {photoItems} from '../generate-data';
+// import {dataUserPhoto} from '../generate-data';
 import {onOpenBigPicture } from '../show-large-picture';
 
 const pictureTemplate = document.querySelector('#picture').content.querySelector('.picture');
 const pictureList = document.querySelector('.pictures');
-const createPhotoUsers = photoItems();
+// const createPhotoUsers = dataUserPhoto;
 
-const addPhotoThumbnailsUsers = () => {
+// const getPhoto = (photoUsers) => photoUsers;
+
+// console.log(getPhoto(photoUsers));
+let createPhotoUsers = '';
+const addPhotoThumbnailsUsers = (photoUsers) => {
   const listFragmentPhoto = document.createDocumentFragment();
-  createPhotoUsers.forEach((element) => {
+  createPhotoUsers = photoUsers;
+  photoUsers.forEach((element) => {
     const pictureItem = pictureTemplate.cloneNode(true);
     const pictureImage = pictureItem.querySelector('.picture__img');
     pictureImage.dataset.id = element.id;
@@ -17,6 +22,7 @@ const addPhotoThumbnailsUsers = () => {
     pictureItem.querySelector('.picture__comments').textContent = element.comments.length;
     listFragmentPhoto.appendChild(pictureItem);
   });
+
   return pictureList.appendChild(listFragmentPhoto);
 };
 

js/get-data/index.js

@@ -0,0 +1,105 @@
+import {onCloseChangePhotoEsc} from '../upload-photo';
+
+const BASE_URL = 'https://31.javascript.htmlacademy.pro/kekstagram';
+const Route = {
+  GET_DATA: '/data',
+  SEND_DATA: '/',
+};
+
+const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+const sendErrorTemplate = document.querySelector('#error').content.querySelector('.error');
+const sendFormErrorTemplate = document.querySelector('#success').content.querySelector('.success');
+const SHOW_ERROR_TIME = 5000;
+
+const sendSuccessClose = () => {
+  const successMessage = document.querySelector('.success');
+  successMessage.remove();
+  document.removeEventListener('click', clickOutModalSuccess);
+};
+
+const sendErrorMessageClose = () => {
+  const errorMessage = document.querySelector('.error');
+  errorMessage.remove();
+  document.removeEventListener('click', clickOutModalError);
+  document.addEventListener('keydown', onCloseChangePhotoEsc);
+  document.removeEventListener('keydown', sendErrorMessageCloseEsc);
+};
+
+function clickOutModalSuccess (evt) {
+  if(evt.target.closest('.success__inner')){
+    return;
+  }
+  sendSuccessClose();
+}
+
+function clickOutModalError (evt) {
+  if(evt.target.closest('.error__inner')){
+    return;
+  }
+  sendErrorMessageClose();
+}
+
+function sendErrorMessageCloseEsc (evt) {
+  if (evt.key === 'Escape') {
+    sendErrorMessageClose();
+  }
+}
+
+function sendSuccessMessageCloseEsc (evt) {
+  if (evt.key === 'Escape') {
+    sendSuccessClose();
+  }
+}
+
+const sendErrorMessage = () => {
+  const errorFragmentSend = document.createDocumentFragment();
+  const errorItemSend = sendErrorTemplate.cloneNode(true);
+  const sendButttonClose = errorItemSend.querySelector('.error__button');
+  sendButttonClose.addEventListener('click', sendErrorMessageClose);
+  errorFragmentSend.append(errorItemSend);
+  document.body.append(errorFragmentSend);
+  document.addEventListener('keydown', sendErrorMessageCloseEsc);
+  document.addEventListener('click', clickOutModalError);
+  document.removeEventListener('keydown', onCloseChangePhotoEsc);
+
+};
+
+const showErrorGetData = () => {
+  const errorFragment = document.createDocumentFragment();
+  const errorItem = dataErrorTemplate.cloneNode(true);
+  errorFragment.append(errorItem);
+  document.body.append(errorFragment);
+  const dataError = document.querySelector('.data-error');
+
+  setTimeout(() => {
+    dataError.remove();
+  }, SHOW_ERROR_TIME);
+};
+
+const sendSuccessMessage = () => {
+  const errorFragmentSend = document.createDocumentFragment();
+  const errorItemSend = sendFormErrorTemplate.cloneNode(true);
+  const closeButton = errorItemSend.querySelector('.success__button');
+  errorFragmentSend.append(errorItemSend);
+  document.body.append(errorFragmentSend);
+  closeButton.addEventListener('click', sendSuccessClose);
+  document.addEventListener('click', clickOutModalSuccess);
+  document.addEventListener('keydown', sendSuccessMessageCloseEsc);
+};
+
+const getData = () => fetch(
+  `${BASE_URL}${Route.GET_DATA}`)
+  .then((response) => {
+    if (!response.ok) {
+      throw new Error();
+    }
+    return response.json();
+  })
+  .catch(() => {
+    throw new Error(
+      showErrorGetData()
+    );
+  });
+
+
+export {getData, sendSuccessMessage, sendErrorMessage};

js/main.js

@@ -1,11 +1,17 @@
-import {addPhotoThumbnailsUsers} from './create-thumbnails';
 import {onOpenChangePhotoListener} from './upload-photo';
 import {validateListener} from './validation-form';
-import {scaleListener} from './add-effects';
+import {scaleListener} from './add-effects-scale';
 import {effectCheckedListener} from './slider-effects';
+import {getData} from './get-data';
+import {addPhotoThumbnailsUsers} from './create-thumbnails';
 
 effectCheckedListener();
 scaleListener();
 validateListener();
 onOpenChangePhotoListener();
-addPhotoThumbnailsUsers();
+
+
+getData()
+  .then((photos) => {
+    addPhotoThumbnailsUsers(photos);
+  });

js/slider-effects/effect-data.js

@@ -10,7 +10,7 @@ export const EFFECTS = [
     max: 1,
     step: 0.1,
     start: 1,
-    unit: '',
+    unit: ''
   },
   {
     name: 'sepia',
@@ -19,7 +19,7 @@ export const EFFECTS = [
     max: 1,
     step: 0.1,
     start: 1,
-    unit: '',
+    unit: ''
   },
   {
     name: 'marvin',
@@ -28,7 +28,7 @@ export const EFFECTS = [
     max: 100,
     step: 1,
     start: 100,
-    unit: '%',
+    unit: '%'
   },
   {
     name: 'phobos',
@@ -37,7 +37,7 @@ export const EFFECTS = [
     max: 3,
     step: 0.1,
     start: 3,
-    unit: 'px',
+    unit: 'px'
   },
   {
     name: 'heat',
@@ -46,7 +46,7 @@ export const EFFECTS = [
     max: 3,
     step: 0.1,
     start: 3,
-    unit: '',
-  },
+    unit: ''
+  }
 ];
 

js/upload-photo/index.js

@@ -1,19 +1,18 @@
 import {toggleClass} from '../util';
 import {imgUploadInput, imgUpoadOverlay, imgUploadancel} from './uploadPhotoVariables';
-import {inputTextHashtag, commentForm} from '../validation-form';
-const effectsPreview = document.querySelectorAll('.effects__preview');
+import {inputTextHashtag, commentForm, imgUploadForm} from '../validation-form';
 
+const effectsPreview = document.querySelectorAll('.effects__preview');
 const effectLevelSliderParrent = document.querySelector('.img-upload__effect-level');
 const uploaPreviewImage = document.querySelector('.img-upload__preview img');
 
 const onCloseChangePhoto = () => {
   toggleClass(imgUpoadOverlay, false);
-  imgUploadInput.value = '';
+  imgUploadForm.reset();
   uploaPreviewImage.style.removeProperty('filter');
   uploaPreviewImage.style.removeProperty('transform');
   document.removeEventListener('keydown', onCloseChangePhotoEsc);
   imgUploadancel.removeEventListener('click', onCloseChangePhoto);
-
 };
 
 function onCloseChangePhotoEsc(evt){
@@ -54,11 +53,10 @@ const onOpenChangePhoto = (evt) => {
   effectLevelSliderParrent.classList.add('hidden');
   document.addEventListener('keydown', onCloseChangePhotoEsc);
   imgUploadancel.addEventListener('click', onCloseChangePhoto);
-
 };
 
 const onOpenChangePhotoListener = () => {
   imgUploadInput.addEventListener('change', onOpenChangePhoto);
 };
 
-export {onOpenChangePhotoListener};
+export {onOpenChangePhotoListener, onCloseChangePhoto, onCloseChangePhotoEsc};

js/validation-form/index.js

@@ -1,4 +1,7 @@
-const imgUploadForm = document.querySelector('.img-upload__form');
+import {sendSuccessMessage, sendErrorMessage} from '../get-data';
+import {onCloseChangePhoto} from '../upload-photo';
+
+export const imgUploadForm = document.querySelector('.img-upload__form');
 export const inputTextHashtag = imgUploadForm.querySelector('.text__hashtags');
 export const commentForm = imgUploadForm.querySelector('.text__description');
 
@@ -40,12 +43,34 @@ pristine.addValidator(inputTextHashtag, onHashtagLimitLength, 'Превышен
 pristine.addValidator(commentForm, onValidateCommentForm, 'Длина комментария больше 140 символов');
 
 const validateListener = () => {
+
   imgUploadForm.addEventListener('submit', (evt) => {
+    evt.preventDefault();
     if(pristine.validate()) {
-      imgUploadForm.submit();
+      fetch(
+        'https://31.javascript.htmlacademy.pro/kekstagram',
+        {
+          method: 'POST',
+          body: new FormData(evt.target),
+        })
+        .then((response) => {
+          if (response.ok) {
+            sendSuccessMessage();
+            onCloseChangePhoto();
+          }else{
+            throw new Error ();
+          }
+        })
+        .catch(() => {
+          throw new Error(
+            sendErrorMessage()
+          );
+        }
+        );
     }
-    evt.preventDefault();
   });
 };
 
 export {validateListener};
+
+