From 207f0396bc3b2ddb119080b9eaf8e619bfee921c Mon Sep 17 00:00:00 2001 From: Aleksei Erofeev Date: Wed, 1 May 2024 23:29:14 +0800 Subject: [PATCH 01/10] render comments and render add post - work --- components/add-post-page-component.js | 26 ++++- components/posts-page-component.js | 138 ++++++++++---------------- 2 files changed, 75 insertions(+), 89 deletions(-) diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index 59554d86..1e86f7fc 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -1,16 +1,36 @@ +import {renderHeaderComponent} from "./header-component.js"; + export function renderAddPostPageComponent({ appEl, onAddPostClick }) { const render = () => { // TODO: Реализовать страницу добавления поста const appHtml = `
- Cтраница добавления поста - -
+
+

Добавить пост

+
+
+
+ +
+
+ + +
`; appEl.innerHTML = appHtml; + renderHeaderComponent({ + element: document.querySelector(".header-container"), + }); + document.getElementById("add-button").addEventListener("click", () => { onAddPostClick({ description: "Описание картинки", diff --git a/components/posts-page-component.js b/components/posts-page-component.js index 5b97fdfe..457db733 100644 --- a/components/posts-page-component.js +++ b/components/posts-page-component.js @@ -1,109 +1,75 @@ -import { USER_POSTS_PAGE } from "../routes.js"; -import { renderHeaderComponent } from "./header-component.js"; -import { posts, goToPage } from "../index.js"; +import {USER_POSTS_PAGE} from "../routes.js"; +import {renderHeaderComponent} from "./header-component.js"; +import {posts, goToPage} from "../index.js"; -export function renderPostsPageComponent({ appEl }) { - // TODO: реализовать рендер постов из api - console.log("Актуальный список постов:", posts); +export function renderPostsPageComponent({appEl}) { + // TODO: реализовать рендер постов из api + console.log("Актуальный список постов:", posts); - /** - * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" - * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow - */ - const appHtml = ` + /** + * TODO: чтобы отформатировать дату создания поста в виде "19 минут назад" + * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow + */ + const appHtml = `
    + ${getComments()} +
+
`; + + appEl.innerHTML = appHtml; + + renderHeaderComponent({ + element: document.querySelector(".header-container"), + }); + + for (let userEl of document.querySelectorAll(".post-header")) { + userEl.addEventListener("click", () => { + goToPage(USER_POSTS_PAGE, { + userId: userEl.dataset.userId, + }); + }); + } + //getComments(); +} + +export const getComments = () => { + // const postsDOM = document.querySelectorAll(".post"); + return posts.map((comment) => { + return `
  • -
    - -

    Иван Иваныч

    +
    + +

    ${comment.user.name}

    - +
    -

    - Нравится: 2 -

    -
    -

    - Иван Иваныч - Ромашка, ромашка... -

    -

    - 19 минут назад -

    -
    • -
  • -
    - -

    Варварва Н.

    -
    - - -
    - -
    -
    - -

    - Нравится: 35 + Нравится: ${likesInStorage(comment.likes)}

    - Варварва Н. - Нарисовала картину, посмотрите какая красивая + ${comment.user.name} + ${comment.description}

    - 3 часа назад + ${comment.createdAt}

    • -
  • -
    - -

    Варварва Н.

    -
    - - -
    - -
    -
    - -

    - Нравится: 0 -

    -
    -

    - Варварва Н. - Голова -

    -

    - 8 дней назад -

    -
    • - -
    `; - - appEl.innerHTML = appHtml; + `; + }).join(""); +} - renderHeaderComponent({ - element: document.querySelector(".header-container"), - }); +const likesInStorage = (element) => { + return element.length > 0 ? likesMap(element) : 0; +} - for (let userEl of document.querySelectorAll(".post-header")) { - userEl.addEventListener("click", () => { - goToPage(USER_POSTS_PAGE, { - userId: userEl.dataset.userId, - }); - }); - } +const likesMap = (element) => { + return element.length > 1 ? `${element[0].name} и ещё ${element.length - 1}` : element[0].name; } From e660f62d15567d870f5ca5cdfee35cc653fd1481 Mon Sep 17 00:00:00 2001 From: Aleksei Erofeev Date: Thu, 2 May 2024 14:28:16 +0800 Subject: [PATCH 02/10] Rework add comment - upload photo --- components/add-post-page-component.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js index 1e86f7fc..7b7890c2 100644 --- a/components/add-post-page-component.js +++ b/components/add-post-page-component.js @@ -1,4 +1,7 @@ import {renderHeaderComponent} from "./header-component.js"; +import {renderUploadImageComponent} from "./upload-image-component.js"; + +let imageUrl = ''; export function renderAddPostPageComponent({ appEl, onAddPostClick }) { const render = () => { @@ -10,12 +13,6 @@ export function renderAddPostPageComponent({ appEl, onAddPostClick }) {

    Добавить пост

    -
    - -