Version 1

api.js

@@ -1,9 +1,8 @@
-// Замени на свой, чтобы получить независимый от других набор данных.
-// "боевая" версия инстапро лежит в ключе prod
-const personalKey = "prod";
+const personalKey = "elena-kozlova";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
+//Список постов на сервере
 export function getPosts({ token }) {
   return fetch(postsHost, {
     method: "GET",
@@ -23,7 +22,28 @@ export function getPosts({ token }) {
     });
 }
 
+//Получение списка постов с сервера
+export function getUserPosts({ data, token }) {
+
+  return fetch(postsHost + `/user-posts/${data.userId}`, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  })
+  .then((response) => {
+//    console.log(response);
+    return response.json();
+  })
+  .then((data) => {
+ //   console.log(data);
+    return data.posts;
+  });
+}
+
 // 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", {
     method: "POST",
@@ -41,6 +61,7 @@ export function registerUser({ login, password, name, imageUrl }) {
   });
 }
 
+// Вход авторизованного пользователя
 export function loginUser({ login, password }) {
   return fetch(baseHost + "/api/user/login", {
     method: "POST",
@@ -68,3 +89,47 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+// Добавляем пост на сервер
+export function addPost({ description, imageUrl, token }) {
+  return fetch(postsHost, {
+    method: "POST",
+    body: JSON.stringify(
+      {
+        description,
+        imageUrl,
+      }
+    ),
+    headers: {
+      Authorization: token,
+    },
+  })
+}
+
+//Записываем лайк на сервер и получаем данные
+export function like({ id, token }) {
+  return fetch(postsHost + `/${id}/like`, {
+    method: "POST",
+
+    headers: {
+      Authorization: token,
+    },
+  })
+  .then((response) => {
+    return response.json();
+  })
+}
+
+//Записываем снятие лайка и получаем данные
+export function disLike({ id, token }) {
+  return fetch(postsHost + `/${id}/dislike`, {
+    method: "POST",
+
+    headers: {
+      Authorization: token,
+    },
+  })
+  .then((response) => {
+    return response.json();
+  })
+}

components/add-post-page-component.js

@@ -1,21 +1,75 @@
+import { addPost } from "../api.js";
+import { goToPage } from "../index.js";
+import { POSTS_PAGE } from "../routes.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
   const render = () => {
-    // TODO: Реализовать страницу добавления поста
+    let imageUrl = "";
+    //Страница добавления поста
     const appHtml = `
     <div class="page-container">
-      <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
-  `;
+      <div class="header-container">
+        <div class="page-header">
+          <h1 class="logo">instapro</h1>
+          <button class="header-button add-or-login-button">
+            <div tittle="Добавить пост" class="add-post-sign">
+            </div>
+          </button>
+          <button title="Админ" class="header-button logout-button">Выйти</button>
+        </div>
+      </div>
+      <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" class="input textarea" rows="4"></textarea>
+          </label>
+          <button class="button" id="add-button">Добавить</button>
+        </div>
+      </div>
+    </div>`;
 
     appEl.innerHTML = appHtml;
 
-    document.getElementById("add-button").addEventListener("click", () => {
-      onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+    const uploadImageContainer = appEl.querySelector(".upload-image-container");
+
+    if (uploadImageContainer) {
+      renderUploadImageComponent({
+        element: appEl.querySelector(".upload-image-container"),
+        onImageUrlChange(newImageUrl) {
+          imageUrl = newImageUrl;
+        },
       });
+    }
+
+    document.querySelector(".textarea").addEventListener("input", (event) => {
+    });
+
+    document.getElementById("add-button").addEventListener("click", () => {
+      const description = document.getElementById("textarea").value;
+
+      if (!imageUrl) {
+        alert("Не выбрана фотография");
+        return;
+      }
+
+      if (!description) {
+        alert("Нужно добавить описание")
+        return;
+      }
+
+      console.log(description, imageUrl)
+
+      onAddPostClick({ description, imageUrl});
     });
   };
 

components/auth-page-component.js

@@ -63,7 +63,7 @@ export function renderAuthPageComponent({ appEl, setUser }) {
     renderHeaderComponent({
       element: document.querySelector(".header-container"),
     });
-
+  
     const uploadImageContainer = appEl.querySelector(".upload-image-container");
 
     if (uploadImageContainer) {
@@ -93,8 +93,8 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         }
 
         loginUser({
-          login: login,
-          password: password,
+          login: login.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+          password: password.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
         })
           .then((user) => {
             setUser(user.user);
@@ -127,9 +127,9 @@ export function renderAuthPageComponent({ appEl, setUser }) {
         }
 
         registerUser({
-          login: login,
-          password: password,
-          name: name,
+          login: login.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+          password: password.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
+          name: name.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
           imageUrl,
         })
           .then((user) => {