Kyrsovaya1

.gitignore

@@ -1,2 +1,2 @@
 .DS_Store
-node_modules
+node_modules/

api.js

@@ -1,6 +1,6 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "karpova";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
@@ -23,6 +23,87 @@ export function getPosts({ token }) {
     });
 }
 
+export function getUserPosts({ token, userId }) {
+  return fetch(`${postsHost}/user-posts/${userId}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      if (response.status === 401) {
+        throw new Error("Нет авторизации");
+      }
+
+      return response.json();
+    })
+    .then((data) => {
+      return data.posts;
+    });
+}
+
+export const addPost = ({ token, description, imageUrl }) => {
+  return fetch(postsHost, {
+    method: "POST",
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    }),
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 400) {
+      throw new Error("Нет фото или комментария");
+    }
+
+    return response.json();
+  });
+};
+
+export function deletePost({ token, id }) {
+  return fetch(`${postsHost}/${id}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Неавторизованные пользователи не могут удалить пост");
+    }
+    return response.json();
+  });
+}
+export const likePost = ({ token, id }) => {
+  return fetch(`${postsHost}/${id}/like`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Неавторизованные пользователи не могут ставить лайки");
+    }
+
+    return response.json();
+  });
+};
+
+export const deleteLikeOnPost = ({ token, id }) => {
+  return fetch(`${postsHost}/${id}/dislike`, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+  }).then((response) => {
+    if (response.status === 401) {
+      throw new Error("Нет авторизации");
+    }
+
+    return response.json();
+  });
+};
+
 // https://github.com/GlebkaF/webdev-hw-api/blob/main/pages/api/user/README.md#%D0%B0%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F
 export function registerUser({ login, password, name, imageUrl }) {
   return fetch(baseHost + "/api/user", {

components/add-post-page-component.js

@@ -1,23 +1,70 @@
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+import { sanitazedHtml } from "../helpers.js";
+let imageUrl = "";
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
   const render = () => {
     // TODO: Реализовать страницу добавления поста
     const appHtml = `
     <div class="page-container">
       <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
+      <h3 class="form-title">Добавить пост</h3>
+    <div class = form-inputs> 
+
+          <div class="file-upload-image-conrainer">
+
+             <label class="file-upload-label secondary-button add-post">
+                <input type="file" class="file-upload-input" style="display:none"/>
+                Выберите фото
+             </label>
+
+          </div>
+
+        <p>Опишите фотографию:</p>
+          <input type="text"  class="input-comment">
+          <button class="button" id="add-button">Добавить</button>
+      </div>
+    </div>  
   `;
 
     appEl.innerHTML = appHtml;
 
+    renderHeaderComponent({
+      element: document.querySelector(".header-container"),
+    });
+
+    const elElement = document.querySelector(".file-upload-image-conrainer");
+    renderUploadImageComponent({
+      element: elElement,
+      onImageUrlChange(newImageUrl) {
+        imageUrl = newImageUrl;
+      },
+    });
+    const inputComment = document.querySelector(".input-comment");
+
+    inputComment.addEventListener("click", () => {
+      inputComment.style.backgroundColor = "white";
+      inputComment.value = "";
+    });
+
     document.getElementById("add-button").addEventListener("click", () => {
+      if (!imageUrl) {
+        alert("Не выбрана фотография");
+        return;
+      }
+      if (inputComment.value === "") {
+        inputComment.style.backgroundColor = "pink";
+        inputComment.value = "Добавьте описание";
+        return;
+      }
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: sanitazedHtml(inputComment.value),
+        imageUrl: imageUrl,
       });
     });
   };
 
   render();
+  imageUrl = "";
 }

components/auth-page-component.js

@@ -1,6 +1,7 @@
 import { loginUser, registerUser } from "../api.js";
 import { renderHeaderComponent } from "./header-component.js";
 import { renderUploadImageComponent } from "./upload-image-component.js";
+import { sanitazedHtml } from "../helpers.js";
 
 export function renderAuthPageComponent({ appEl, setUser }) {
   let isLoginMode = true;
@@ -56,7 +57,7 @@ export function renderAuthPageComponent({ appEl, setUser }) {
 
     // Не вызываем перерендер, чтобы не сбрасывалась заполненная форма
     // Точечно обновляем кусочек дом дерева
-    const setError = (message) => {
+     const setError = (message) => {
       appEl.querySelector(".form-error").textContent = message;
     };
 
@@ -79,8 +80,8 @@ export function renderAuthPageComponent({ appEl, setUser }) {
       setError("");
 
       if (isLoginMode) {
-        const login = document.getElementById("login-input").value;
-        const password = document.getElementById("password-input").value;
+        const login = sanitazedHtml(document.getElementById("login-input").value);
+        const password = sanitazedHtml(document.getElementById("password-input").value);
 
         if (!login) {
           alert("Введите логин");
@@ -98,15 +99,16 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         })
           .then((user) => {
             setUser(user.user);
+
           })
           .catch((error) => {
             console.warn(error);
             setError(error.message);
           });
       } else {
-        const login = document.getElementById("login-input").value;
-        const name = document.getElementById("name-input").value;
-        const password = document.getElementById("password-input").value;
+        const login = sanitazedHtml(document.getElementById("login-input").value);
+        const name = sanitazedHtml(document.getElementById("name-input").value);
+        const password = sanitazedHtml(document.getElementById("password-input").value);
         if (!name) {
           alert("Введите имя");
           return;