интеграция апи

README.md

@@ -4,12 +4,12 @@ MVP аналога популярной соц. сети для обмена ф
 
 ## Ссылка на приложение:
 
-https::
+https://alena-sartakova.github.io/
 
 ## Первоначальная оценка
 
-ХХХХ часов
+35 часов
 
 ## Фактически затраченное время
 
-YYYY часов
+30 часов

api.js

@@ -1,6 +1,9 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
+
+import { sanitizeHtml } from "./helpers.js";
+
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "alenka-s";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
@@ -13,6 +16,7 @@ export function getPosts({ token }) {
   })
     .then((response) => {
       if (response.status === 401) {
+
         throw new Error("Нет авторизации");
       }
 
@@ -28,9 +32,9 @@ export function registerUser({ login, password, name, imageUrl }) {
   return fetch(baseHost + "/api/user", {
     method: "POST",
     body: JSON.stringify({
-      login,
-      password,
-      name,
+      login: sanitizeHtml(login),
+      password: sanitizeHtml(password),
+      name: sanitizeHtml(name),
       imageUrl,
     }),
   }).then((response) => {
@@ -68,3 +72,84 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+//посты пользователя
+export function fetchPostsUser(id, { token }) {
+  return fetch(`${postsHost}/user-posts/${id}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+      return response.json();
+    })
+    .then((data) => {
+      return data.posts;
+    });
+}
+//новый пост
+export const userPosts = ({ token, description, imageUrl }) => {
+  return fetch(postsHost, {
+    method: "POST",
+    body: JSON.stringify({
+      description: sanitizeHtml(description),
+      imageUrl,
+    }),
+    headers: {
+      Authorization: token,
+    }
+  })
+    .then((response) => {
+      if (response.status === 500) {
+        throw new Error("Сервер упал");
+      } else if (response.status === 400) {
+        throw new Error("Плохой запрос");
+      } else {
+        return response.json();
+      }
+    })
+
+}
+
+//лайки
+export const getLike = (id, { token }) => {
+  return fetch(`${postsHost}/${id}/like`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    }
+  })
+    .then((response) => {
+      if (response.ok) {
+        return response.json();
+      }
+      throw new Error(`Нет авторизации`);
+    })
+    .catch((error) => {
+      // alert('Вы не авторизованы!')
+      throw error;
+    });
+
+};
+
+export const getDislike = (id, { token }) => {
+  return fetch(`${postsHost}/${id}/dislike`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    }
+  })
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
+      }
+      return response.json();
+    })
+    .catch((error) => {
+      console.error("Ошибка при удалении лайка:", error);
+      throw error;
+    });
+};

components/add-post-page-component.js

@@ -1,20 +1,54 @@
+import { sanitizeHtml } from "../helpers.js";
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
+
+let imageUrl = "";
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
   const render = () => {
     // TODO: Реализовать страницу добавления поста
     const appHtml = `
     <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
+      <div class="add-form">
+      <h2 class="add-form__title">Новый пост</h2>
+      <div class="upload-image-container"></div>
+      <div>
+      Опишите фотографию:
+      <br>
+      <textarea class="add-form__text" type="textarea" rows="7"></textarea>
+      </div>
       <button class="button" id="add-button">Добавить</button>
     </div>
   `;
 
     appEl.innerHTML = appHtml;
 
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+    renderUploadImageComponent({
+      element: appEl.querySelector(".upload-image-container"),
+      onImageUrlChange(newImageUrl) {
+        imageUrl = newImageUrl;
+      },
+    });
+
     document.getElementById("add-button").addEventListener("click", () => {
+      if (!imageUrl) {
+        alert('Выберите фото');
+        return;
+      };
+      if (!(document.querySelector(".add-form__text").value)) {
+        alert('Не заполнено описание фото');
+        return;
+      };
+
+      const description = document.querySelector(".add-form__text").value
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: sanitizeHtml(description),
+        imageUrl: imageUrl,
       });
     });
   };

components/auth-page-component.js

@@ -12,31 +12,28 @@ export function renderAuthPageComponent({ appEl, setUser }) {
           <div class="header-container"></div>
           <div class="form">
               <h3 class="form-title">
-                ${
-                  isLoginMode
-                    ? "Вход в&nbsp;Instapro"
-                    : "Регистрация в&nbsp;Instapro"
-                }
+                ${isLoginMode
+        ? "Вход в&nbsp;Instapro"
+        : "Регистрация в&nbsp;Instapro"
+      }
                 </h3>
               <div class="form-inputs">
 
-                  ${
-                    !isLoginMode
-                      ? `
+                  ${!isLoginMode
+        ? `
                       <div class="upload-image-container"></div>
                       <input type="text" id="name-input" class="input" placeholder="Имя" />
                       `
-                      : ""
-                  }
+        : ""
+      }
 
                   <input type="text" id="login-input" class="input" placeholder="Логин" />
                   <input type="password" id="password-input" class="input" placeholder="Пароль" />
 
                   <div class="form-error"></div>
 
-                  <button class="button" id="login-button">${
-                    isLoginMode ? "Войти" : "Зарегистрироваться"
-                  }</button>
+                  <button class="button" id="login-button">${isLoginMode ? "Войти" : "Зарегистрироваться"
+      }</button>
               </div>
 
               <div class="form-footer">