hw

.gitignore

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

README.md

@@ -8,7 +8,7 @@ https::
 
 ## Первоначальная оценка
 
-ХХХХ часов
+24 часа
 
 ## Фактически затраченное время
 

api.js

@@ -1,9 +1,10 @@
 // Замени на свой, чтобы получить независимый от других набор данных.
 // "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
-const baseHost = "https://webdev-hw-api.vercel.app";
+const personalKey = "regina-zaets";
+const baseHost = "https://wedev-api.sky.pro";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
+
 export function getPosts({ token }) {
   return fetch(postsHost, {
     method: "GET",
@@ -65,6 +66,73 @@ export function uploadImage({ file }) {
     method: "POST",
     body: data,
   }).then((response) => {
+    if (response.status === 400) {
+      alert("Картинка слишком большая");
+    }
     return response.json();
   });
 }
+
+//новый пост
+
+export function postNewPosts({ description, imageUrl, token }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    })
+  })
+    .then((response) => {
+      if (response.status === 500) {
+        throw new Error("ошибка сервера");
+      }
+      if (response.status === 401) {
+        throw new Error("не авторизован");
+      }
+      if (response.status === 400) {
+        throw new Error("не введено описание картинки");
+      }
+      return response.json();
+    })
+}
+
+export function userPost({ token, id }) {
+  return fetch(postsHost + `/user-posts/${id}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+    .then((response) => {
+      return response.json();
+    })
+    .then((data) => {
+      return data.posts;
+    });
+}
+
+export function addLike({ id, token }) {
+  console.log(id);
+  return fetch(postsHost + `/${id}/like`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: token,
+      },
+    });
+}
+
+
+export function deleteLike({ id, token }) {
+  return fetch(postsHost + `/${id}/dislike`,
+    {
+      method: "POST",
+      headers: {
+        Authorization: token,
+      },
+    });
+}

components/add-post-page-component.js

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

components/auth-page-component.js

@@ -1,6 +1,8 @@
 import { loginUser, registerUser } from "../api.js";
 import { renderHeaderComponent } from "./header-component.js";
 import { renderUploadImageComponent } from "./upload-image-component.js";
+import {sanitizeHtml} from "./sanitizeHtml.js"
+
 
 export function renderAuthPageComponent({ appEl, setUser }) {
   let isLoginMode = true;
@@ -127,9 +129,9 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         }
 
         registerUser({
-          login: login,
-          password: password,
-          name: name,
+          login: sanitizeHtml(login),
+          password: sanitizeHtml(password),
+          name: sanitizeHtml(name),
           imageUrl,
         })
           .then((user) => {