Skip to content

0.2 #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TipsssWebdev wants to merge 2 commits into
base: main
Choose a base branch
from
Open

0.2 #99

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1effb4c
0.1
TipsssWebdev Jun 6, 2024
b178932
0.2
TipsssWebdev Jun 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}

31 changes: 26 additions & 5 deletions components/add-post-page-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,32 @@ export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
// TODO: Реализовать страницу добавления поста
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>
<div class="page-header">
<h1 class="logo">instapro</h1>
<button class="header-button add-or-login-button"></button>
<button title="Админ" class="header-button logout-button">Выйти</button>
</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 class="input textarea" rows="4"></textarea>
</label>
<button class="button" id="add-button">Добавить</button>
</div>
</div>
</div>
`;

appEl.innerHTML = appHtml;

Expand Down
169 changes: 71 additions & 98 deletions components/posts-page-component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `
<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>
</div>


<div class="post-image-container">
<img class="post-image" src="https://leonardo.osnova.io/97a160ca-76b6-5cba-87c6-84ef29136bb3/">
</div>
<div class="post-likes">
<button data-post-id="642cf82e9b190443860c2f2b" class="like-button">
<img src="./assets/images/like-not-active.svg">
</button>
<p class="post-likes-text">
Нравится: <strong>0</strong>
</p>
</div>
<p class="post-text">
<span class="user-name">Варварва Н.</span>
Голова
</p>
<p class="post-date">
8 дней назад
</p>
</li>
</ul>
</div>`;
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 => `
<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 src="${post.isLiked ? './assets/images/like-active.svg' : './assets/images/like-not-active.svg'}">
</button>
<p class="post-likes-text">
Нравится: <strong>${post.likes}</strong>
</p>
</div>
<p class="post-text">
<span class="user-name">${post.user.name}</span>
${post.text}
</p>
<p class="post-date">
${formatDistanceToNow(new Date(post.createdAt))}
</p>
</li>
`).join('');

renderHeaderComponent({
element: document.querySelector(".header-container"),
});
const appHtml = `
<div class="page-container">
<div class="header-container"></div>
<ul class="posts">
${postsHtml}
</ul>
</div>
`;

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);
}
}
Loading