mielilon · DmitriiD89 · Nov 29, 2025 · Nov 29, 2025 · Dec 3, 2025 · Dec 5, 2025
diff --git a/api.js b/api.js
@@ -4,6 +4,24 @@ const personalKey = "prod";
 const baseHost = "https://webdev-hw-api.vercel.app";
 const postsHost = `${baseHost}/api/v1/${personalKey}/instapro`;
 
+export async function addNewPost({ token, description, imageUrl }) {
+  return fetch(postsHost, {
+    method: "POST",
+    headers: {
+      Authorization: token,
+    },
+    body: JSON.stringify({
+      description,
+      imageUrl,
+    }),
+  }).then((response) => {
+    if (response.status === 400) {
+      throw new Error("Не удалось добавить пост");
+    }
+    return response.json();
+  });
+}
+
 export function getPosts({ token }) {
   return fetch(postsHost, {
     method: "GET",
@@ -23,7 +41,7 @@ export function getPosts({ token }) {
     });
 }
 
-export function registerUser({ login, password, name, imageUrl }) {
+export async function registerUser({ login, password, name, imageUrl }) {
   return fetch(baseHost + "/api/user", {
     method: "POST",
     body: JSON.stringify({
@@ -67,3 +85,50 @@ export function uploadImage({ file }) {
     return response.json();
   });
 }
+
+export async function getUserPosts({ token, id }) {
+  const response = await fetch(postsHost + "/user-posts/" + id, {
+    method: "GET",
+    headers: {
+      Authorization: token,
+    },
+  });
+  if (!response.ok) {
+    throw new Error("Ошибка запроса");
+  }
+  return await response.json();
+} //Сетевой запрос постов пользователя
+
+export async function setLike({ token, id }) {
+  try {
+    const response = await fetch(postsHost + `/${id}/like`, {
+      method: "POST",
+      headers: {
+        Authorization: token,
+      },
+    });
+    if (!response.ok) {
+      throw new Error("сетевая ошибка");
+    }
+    return await response.json();
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+export async function unsetLike({ token, id }) {
+  try {
+    const response = await fetch(postsHost + `/${id}/dislike`, {
+      method: "POST",
+      headers: {
+        Authorization: token,
+      },
+    });
+    if (!response.ok) {
+      throw new Error("сетевая ошибка");
+    }
+    return await response.json();
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js
@@ -1,23 +1,47 @@
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from './upload-image-component.js'
 export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
+
   const render = () => {
     // @TODO: Реализовать страницу добавления поста
-    const appHtml = `
+    let appHtml = `
     <div class="page-container">
-      <div class="header-container"></div>
-      Cтраница добавления поста
-      <button class="button" id="add-button">Добавить</button>
-    </div>
+          <div class="header-container"></div>
+          <div class="form">
+              <h3 class="form-title">Добавить пост</h3>
+              <div class="form-inputs">
+                  <div class="upload-image-container">
+                  </div>
+                  <label>
+                      Опишите фотографию:
+                      <textarea class="input textarea" placeholder="Введите текст" id="post-description" rows="4"></textarea>
+                  </label>
+                  <button class="button center" id="add-button">Добавить</button>
+              </div>
+          </div>
+      </div>
   `;
-
+    let imageUrl = '';
     appEl.innerHTML = appHtml;
-
+    renderHeaderComponent({element: document.querySelector('.header-container')})
+    renderUploadImageComponent({element: document.querySelector('.upload-image-container'),
+                                onImageUrlChange:(url)=> imageUrl = url})
+    let textAreaElement = document.getElementById('post-description')
+
     document.getElementById("add-button").addEventListener("click", () => {
+      if (!textAreaElement.value || !imageUrl){
+        alert ('Заполните все поля')
+        return
+      } 
+
       onAddPostClick({
-        description: "Описание картинки",
-        imageUrl: "https://image.png",
+        description: textAreaElement.value,
+        imageUrl: imageUrl,
       });
+
     });
   };
 
   render();
+
 }
diff --git a/components/loading-page-component.js b/components/loading-page-component.js
@@ -9,7 +9,7 @@ import { renderHeaderComponent } from "./header-component.js";
  * @param {Object} params.user - Объект пользователя, содержащий данные о текущем авторизованном пользователе (если он есть).
  * @param {Function} params.goToPage - Функция для навигации по страницам.
  */
-export function renderLoadingPageComponent({ appEl, user, goToPage }) {
+export function renderLoadingPageComponent({ appEl }) {
   /**
    * HTML-разметка страницы загрузки.
    * Содержит контейнер заголовка и индикатор загрузки.
@@ -30,8 +30,6 @@ export function renderLoadingPageComponent({ appEl, user, goToPage }) {
    * Передаются данные пользователя и функция навигации.
    */
   renderHeaderComponent({
-    user,
-    element: document.querySelector(".header-container"),
-    goToPage,
+    element: document.querySelector(".header-container")
   });
 }
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
@@ -1,6 +1,10 @@
 import { USER_POSTS_PAGE } from "../routes.js";
 import { renderHeaderComponent } from "./header-component.js";
-import { posts, goToPage } from "../index.js";
+import { posts, goToPage, getToken } from "../index.js";
+
+import { formatDistanceToNow } from "https://cdn.skypack.dev/date-fns";
+import { ru } from "https://cdn.skypack.dev/date-fns/locale";
+import { toggleLike } from "../helpers.js";
 
 export function renderPostsPageComponent({ appEl }) {
   // @TODO: реализовать рендер постов из api
@@ -14,84 +18,57 @@ export function renderPostsPageComponent({ appEl }) {
               <div class="page-container">
                 <div class="header-container"></div>
                 <ul class="posts">
-                  <li class="post">
-                    <div class="post-header" data-user-id="642d00329b190443860c2f31">
-                        <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" class="post-header__user-image">
-                        <p class="post-header__user-name">Иван Иваныч</p>
-                    </div>
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642d00579b190443860c2f32" class="like-button">
-                        <img src="./assets/images/like-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>2</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Иван Иваныч</span>
-                      Ромашка, ромашка...
-                    </p>
-                    <p class="post-date">
-                      19 минут назад
-                    </p>
-                  </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
-                    </div>
-
-
-                    <div class="post-image-container">
-                      <img class="post-image" src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680670675451-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-03-31%2520%25C3%2590%25C2%25B2%252012.51.20.png">
-                    </div>
-                    <div class="post-likes">
-                      <button data-post-id="642cffed9b190443860c2f30" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
-                      </button>
-                      <p class="post-likes-text">
-                        Нравится: <strong>35</strong>
-                      </p>
-                    </div>
-                    <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Нарисовала картину, посмотрите какая красивая
-                    </p>
-                    <p class="post-date">
-                      3 часа назад
-                    </p>
-                  </li>
-                  <li class="post">
-                    <div class="post-header" data-user-id="6425602ce156b600f7858df2">
-                        <img src="https://storage.yandexcloud.net/skypro-webdev-homework-bucket/1680601502867-%25C3%2590%25C2%25A1%25C3%2590%25C2%25BD%25C3%2590%25C2%25B8%25C3%2590%25C2%25BC%25C3%2590%25C2%25BE%25C3%2590%25C2%25BA%2520%25C3%2591%25C2%258D%25C3%2590%25C2%25BA%25C3%2591%25C2%2580%25C3%2590%25C2%25B0%25C3%2590%25C2%25BD%25C3%2590%25C2%25B0%25202023-04-04%2520%25C3%2590%25C2%25B2%252014.04.29.png" class="post-header__user-image">
-                        <p class="post-header__user-name">Варварва Н.</p>
+                ${posts
+                  .map(
+                    (post) =>
+                      `<li d class="post">
+                    <div class="post-header" data-user-id=${post.user.id}>
+                        <img src='${
+                          post.user.imageUrl
+                        }' class="post-header__user-image">
+                        <p class="post-header__user-name">${post.user.name}</p>
                     </div>
-
-
                     <div class="post-image-container">
-                      <img class="post-image" src="https://leonardo.osnova.io/97a160ca-76b6-5cba-87c6-84ef29136bb3/">
+                      <img class="post-image" src='${post.imageUrl}'>
                     </div>
                     <div class="post-likes">
-                      <button data-post-id="642cf82e9b190443860c2f2b" class="like-button">
-                        <img src="./assets/images/like-not-active.svg">
+                      <button data-post-id=${post.id} class="like-button">
+                        <img data-post-id=${post.id} src="${
+                        post.isLiked
+                          ? "./assets/images/like-active.svg"
+                          : "./assets/images/like-not-active.svg"
+                      }">
                       </button>
                       <p class="post-likes-text">
-                        Нравится: <strong>0</strong>
+                        Нравится: <strong>${
+                          post.likes.length
+                            ? post.likes.length > 1
+                              ? `${
+                                  post.likes[
+                                    Math.floor(
+                                      Math.random() * post.likes.length
+                                    )
+                                  ].name
+                                } и еще ${post.likes.length - 1}`
+                              : post.likes[0].name
+                            : "0"
+                        }</strong>
                       </p>
                     </div>
                     <p class="post-text">
-                      <span class="user-name">Варварва Н.</span>
-                      Голова
+                      <span class="user-name">${post.user.name}</span>
+                      ${post.description}
                     </p>
                     <p class="post-date">
-                      8 дней назад
+                      ${formatDistanceToNow(post.createdAt, {
+                        locale: ru,
+                      })} назад
                     </p>
-                  </li>
-                </ul>
-              </div>`;
+                  </li>`
+                  )
+                  .join("")}
+                </ul> 
+                </div>`;
 
   appEl.innerHTML = appHtml;
 
@@ -106,4 +83,6 @@ export function renderPostsPageComponent({ appEl }) {
       });
     });
   }
+  toggleLike()
 }
+
diff --git a/components/user-post-page-component.js b/components/user-post-page-component.js
@@ -0,0 +1,74 @@
+import { posts } from "../index.js";
+import { formatDistanceToNow } from "https://cdn.skypack.dev/date-fns";
+import { ru } from "https://cdn.skypack.dev/date-fns/locale";
+import { renderHeaderComponent } from "./header-component.js";
+import { toggleLike } from "../helpers.js";
+
+export function renderUserPostsPageComponent({ appEl }) {
+  let userPosts = posts.posts;
+
+  console.log(userPosts);
+  const appHtml = 
+  `
+  <div class="page-container">
+    <div class="header-container"></div>
+    <ul class="posts">
+    ${userPosts.map((post) => (
+      `<li  class="post">
+        <div class="post-header" data-user-id=${post.user.id}>
+            <img src='${
+              post.user.imageUrl
+            }' class="post-header__user-image">
+            <p class="post-header__user-name">${post.user.name}</p>
+        </div>
+        <div class="post-image-container">
+          <img class="post-image" src='${post.imageUrl}'>
+        </div>
+        <div class="post-likes">
+          <button data-post-id=${post.id} class="like-button">
+            <img data-post-id=${post.id} src="${
+              post.isLiked
+                ? "./assets/images/like-active.svg"
+                : "./assets/images/like-not-active.svg"
+            }">
+          </button>
+          <p class="post-likes-text">
+            Нравится: <strong>${
+              post.likes.length
+                ? post.likes.length > 1
+                  ? `${
+                      post.likes[
+                        Math.floor(
+                          Math.random() * post.likes.length
+                        )
+                      ].name
+                    } и еще ${post.likes.length - 1}`
+                  : post.likes[0].name
+                : "0"
+            }</strong>
+          </p>
+        </div>
+        <p class="post-text">
+          <span class="user-name">${post.user.name}</span>
+          ${post.description}
+        </p>
+        <p class="post-date">
+          ${formatDistanceToNow(post.createdAt, {
+            locale: ru,
+          })} назад
+        </p>
+      </li>`
+    )
+
+
+).join('')}
+    </ul> 
+    </div>`
+
+    appEl.innerHTML = appHtml;
+     renderHeaderComponent({
+        element: document.querySelector(".header-container"),
+      }
+    );
+  toggleLike();
+}