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

js/api.js

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

js/constans.js

@@ -66,3 +66,13 @@ export const EffectsSetting = {
 };
 
 export const DEFAULT_EFFECT = EFFECTS.NONE;
+
+export const POPUPS = {
+  SUCCESS: 'success',
+  ERROR: 'error'
+}
+
+export const SUBMIT_TEXT = {
+  IDLE: 'Опубликовать',
+  SENDING: 'Публикую...'
+}

js/form.js

@@ -1,12 +1,16 @@
 import { isValid, reset as resetValidation } from './validation.js';
-import {reset as resetScale} from './scale.js';
-import {reset as resetEffects} from './effect.js';
+import { reset as resetScale } from './scale.js';
+import { reset as resetEffects } from './effect.js';
+import { showPopup } from './popup.js';
+import { POPUPS, SUBMIT_TEXT } from './constans.js';
+import { sendData } from './api.js';
 
 const uploadForm = document.querySelector('.img-upload__form');
 const uploadOverlay = uploadForm.querySelector('.img-upload__overlay');
 const body = document.body;
 const uploadCancel = uploadForm.querySelector('.img-upload__cancel');
 const uploadFile = uploadForm.querySelector('#upload-file');
+const submitButton = uploadForm.querySelector('.img-upload__submit')
 
 const openForm = () => {
   uploadOverlay.classList.remove('hidden');
@@ -39,9 +43,30 @@ document.addEventListener('keydown', (evt) => {
   }
 });
 
+const blockSubmitButton = (isBlocked = true) => {
+  submitButton.disabled = isBlocked;
+  submitButton.textContent = isBlocked ? SUBMIT_TEXT.SENDING : SUBMIT_TEXT.IDLE;
+}
+
 const onFormSubmit = (evt) => {
-  if (!isValid()) {
-    evt.preventDefault();
+  evt.preventDefault();
+  if (isValid()) {
+
+    blockSubmitButton();
+    sendData(new FormData(uploadForm))
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error()
+        }
+        closeForm();
+        showPopup(POPUPS.SUCCESS);
+      })
+      .catch(() => {
+        showPopup(POPUPS.ERROR);
+      })
+      .finally(() => {
+        blockSubmitButton(false);
+      })
   }
 };
 

js/main.js

@@ -1,10 +1,20 @@
-import {getDescriptionPhoto} from './data.js';
+// import {getDescriptionPhoto} from './data.js';
 import {render} from './render-thumbnail.js';
 import './form.js';
+import { showErrorMessage } from './util.js';
+import { getData } from './api.js';
 
-const data = getDescriptionPhoto();
+// const data = getDescriptionPhoto();
 
+//  render(data);
 
-render(data);
+
+getData()
+.then((data)=>{
+render(data)
+})
+.catch(()=>{
+  showErrorMessage()
+})
 
 

js/popup.js

@@ -0,0 +1,20 @@
+import { POPUPS } from "./constans.js";
+
+const successTemplate = document.querySelector('#success').content.querySelector('.success');
+const errorTemplate = document.querySelector('#error').content.querySelector('.error');
+const body = document.body;
+
+const templates = {
+[POPUPS.SUCCESS]: successTemplate,
+[POPUPS.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/util.js

@@ -1,9 +1,19 @@
-const getRandomInteger = (a, b) => {
-  const lower = Math.ceil(Math.min(a, b));
-  const upper = Math.floor(Math.max(a, b));
-  const result = Math.random() * (upper - lower + 1) + lower;
-  return Math.floor(result);
-};
+// const getRandomInteger = (a, b) => {
+//   const lower = Math.ceil(Math.min(a, b));
+//   const upper = Math.floor(Math.max(a, b));
+//   const result = Math.random() * (upper - lower + 1) + lower;
+//   return Math.floor(result);
+// };
 
-export {getRandomInteger};
+// export {getRandomInteger};
+const dataErrorTemplate = document.querySelector('#data-error').content.querySelector('.data-error');
+const body = document.body;
+const SHOW_TIME = 5000;
 
+export const showErrorMessage = () => {
+const newDataError = dataErrorTemplate.cloneNode(true);
+body.append(newDataError);
+setTimeout(() => {
+  newDataError.remove();
+}, SHOW_TIME)
+}