diff --git a/api.js b/api.js index 8997c44d..89ecc04c 100644 --- a/api.js +++ b/api.js @@ -68,3 +68,17 @@ export function uploadImage({ file }) { return response.json(); }); } +// это в конец файла api.js +export async function toggleLike(postId, token) { + const response = await fetch(`${postsHost}/${postId}/toggle-like`, { + method: 'POST', + headers: { + Authorization: token, + }, + }); + if (!response.ok) { + throw new Error('Ошибка при установке лайка'); + } + return response.json(); +} + diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 5b97fdfe..87d4b9eb 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -1,109 +1,82 @@ import { USER_POSTS_PAGE } from "../routes.js"; import { renderHeaderComponent } from "./header-component.js"; -import { posts, goToPage } from "../index.js"; +import { getPosts, toggleLike } from "../api.js"; +import { goToPage } from "../index.js"; -export function renderPostsPageComponent({ appEl }) { - // TODO: реализовать рендер постов из api - console.log("Актуальный список постов:", posts); +export async function renderPostsPageComponent({ appEl }) { + try { + const token = localStorage.getItem('token'); + const posts = await getPosts({ token }); + console.log("Актуальный список постов:", posts); - /** - * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" - * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow - */ - const appHtml = ` -
-
- -
`; + const formatDistanceToNow = (date) => { + const now = new Date(); + const diff = Math.abs(now - date); + const minutes = Math.floor(diff / 60000); + if (minutes < 60) return `${minutes} минут назад`; + const hours = Math.floor(minutes / 60); + if (hours < 24) return `${hours} часов назад`; + const days = Math.floor(hours / 24); + return `${days} дней назад`; + }; - appEl.innerHTML = appHtml; + const postsHtml = posts.map(post => ` +
  • +
    + +

    ${post.user.name}

    +
    +
    + +
    +
    + +

    + Нравится: ${post.likes} +

    +
    +

    + ${post.user.name} + ${post.text} +

    +

    + ${formatDistanceToNow(new Date(post.createdAt))} +

    +
    • + `).join(''); - renderHeaderComponent({ - element: document.querySelector(".header-container"), - }); + const appHtml = ` +
    +
    + +
    + `; - for (let userEl of document.querySelectorAll(".post-header")) { - userEl.addEventListener("click", () => { - goToPage(USER_POSTS_PAGE, { - userId: userEl.dataset.userId, + appEl.innerHTML = appHtml; + + renderHeaderComponent({ + element: document.querySelector(".header-container"), + }); + + document.querySelectorAll(".post-header").forEach(userEl => { + userEl.addEventListener("click", () => { + goToPage(USER_POSTS_PAGE, { userId: userEl.dataset.userId }); }); }); + + document.querySelectorAll(".like-button").forEach(likeButton => { + likeButton.addEventListener("click", async () => { + const postId = likeButton.dataset.postId; + await toggleLike(postId, token); + renderPostsPageComponent({ appEl }); + }); + }); + + } catch (error) { + console.error("Ошибка при получении постов:", error); } }