- ${ - isLoginMode - ? "Вход в Instapro" - : "Регистрация в Instapro" - } + ${isLoginMode + ? "Вход в Instapro" + : "Регистрация в Instapro" + }
- ${
- !isLoginMode
- ? `
+ ${!isLoginMode
+ ? `
`
- : ""
- }
+ : ""
+ }
-
+
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
index 5b97fdfe..23bba7e1 100644
--- a/components/posts-page-component.js
+++ b/components/posts-page-component.js
@@ -10,20 +10,19 @@ export function renderPostsPageComponent({ appEl }) {
* TODO: чтобы отформатировать дату создания поста в виде "19 минут назад"
* можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow
*/
- const appHtml = `
-
`;
+
`;
appEl.innerHTML = appHtml;
renderHeaderComponent({
@@ -63,5 +64,42 @@ export function renderPostsPageComponent({ appEl }) {
userId: userEl.dataset.userId,
});
});
+
+ }
+ function getLikePost() {
+ const likesButton = document.querySelectorAll('.like-button');
+ for (const like of likesButton) {
+ like.addEventListener("click", (event) => {
+ event.stopPropagation();
+ const id = like.dataset.id;
+ const liked = like.dataset.liked;
+ console.log(id);
+ console.log(liked);
+ if (liked === 'false') {
+ getLike(id, { token: getToken() })
+ .then(() => {
+ like.querySelector("img").src = './assets/images/like-active.svg';
+ like.dataset.liked = "true";
+ })
+ .catch((error) => {
+ console.error("Ошибка при добавлении лайка:", error);
+ });
+ } else {
+ getDislike(id, { token: getToken() })
+ .then(() => {
+ like.querySelector("img").src = './assets/images/like-not-active.svg';
+ like.dataset.liked = "false";
+ })
+ .catch((error) => {
+ console.error("Ошибка при удалении лайка:", error);
+ });
+ }
+ });
+ }
}
+ getLikePost();
+
}
+
+
+
diff --git a/index.js b/index.js
index e20509bf..9cc102c2 100644
--- a/index.js
+++ b/index.js
@@ -20,7 +20,7 @@ export let user = getUserFromLocalStorage();
export let page = null;
export let posts = [];
-const getToken = () => {
+export const getToken = () => {
const token = user ? `Bearer ${user.token}` : undefined;
return token;
};
From 8951cf0544575a021d0f22336830f8df0054b200 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Fri, 12 Apr 2024 22:10:59 +0700
Subject: [PATCH 07/17] =?UTF-8?q?=D0=BB=D0=B0=D0=B9=D0=BA=D0=B8=20=D0=B2?=
=?UTF-8?q?=D1=81=D0=B5=20=D0=B5=D1=89=D0=B5=20=D0=BD=D0=B5=20=D1=80=D0=B0?=
=?UTF-8?q?=D0=B1=D0=BE=D1=82=D0=B0=D1=8E=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
api.js | 9 ++++---
components/posts-page-component.js | 41 +++++++++++++++++++-----------
2 files changed, 31 insertions(+), 19 deletions(-)
diff --git a/api.js b/api.js
index c61e7bd8..2341460a 100644
--- a/api.js
+++ b/api.js
@@ -111,8 +111,8 @@ export const userPosts = ({ token, description, imageUrl }) => {
}
//лайки
-export const getLike = (id, { token }) => {
- return fetch(`${postsHost}/${id}/like`, {
+export const getLike = ({ postId, token }) => {
+ return fetch(`${postsHost}/${postId}/like`, {
method: "POST",
headers: {
Authorization: token,
@@ -128,10 +128,11 @@ export const getLike = (id, { token }) => {
console.error("Ошибка при установке лайка:", error);
throw error;
});
+
};
-export const getDislike = (id, { token }) => {
- return fetch(`${postsHost}/${id}/dislike`, {
+export const getDislike = ({ postId, token }) => {
+ return fetch(`${postsHost}/${postId}/dislike`, {
method: "POST",
headers: {
Authorization: token,
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
index 49be526b..dee8f073 100644
--- a/components/posts-page-component.js
+++ b/components/posts-page-component.js
@@ -27,7 +27,9 @@ export function renderPostsPageComponent({ appEl }) {
${post.isLiked ? `
-
-
`
+
+ }).join("");
+
+ const appHtml = `
+ -
+
+ let postsHtml = posts.map((post) => {
+ return `
-
- -`; + +
- Иван Иваныч
+++
${post.user.name}
-
+ -- Иван Иваныч - Ромашка, ромашка... + ${post.user.name} + ${post.description}
19 минут назад
-- -
--- - -
- Варварва Н.
---
- - --- Нравится: 35 -
-- Варварва Н. - Нарисовала картину, посмотрите какая красивая -
-- 3 часа назад -
-- -
- --- -
- Варварва Н.
----
- --- Нравится: 0 -
-- Варварва Н. - Голова -
-- 8 дней назад -
- - -
+
+
`;
appEl.innerHTML = appHtml;
renderHeaderComponent({
diff --git a/index.js b/index.js
index dd05ef0f..141f8bc1 100644
--- a/index.js
+++ b/index.js
@@ -1,4 +1,4 @@
-import { getPosts } from "./api.js";
+import { fetchPostsUser, getPosts, userPosts } from "./api.js";
import { renderAddPostPageComponent } from "./components/add-post-page-component.js";
import { renderAuthPageComponent } from "./components/auth-page-component.js";
import {
@@ -34,6 +34,23 @@ export const logout = () => {
/**
* Включает страницу приложения
*/
+function getAPI() {
+ return getPosts({ token: getToken() })
+ .then((newPosts) => {
+ if (newPosts && newPosts.length > 0) {
+ page = POSTS_PAGE;
+ posts = newPosts;
+ renderApp();
+ } else {
+ console.log("Нет постов");
+ }
+ })
+ .catch((error) => {
+ console.error(error);
+ goToPage(POSTS_PAGE);
+ });
+}
+
export const goToPage = (newPage, data) => {
if (
[
@@ -50,34 +67,44 @@ export const goToPage = (newPage, data) => {
return renderApp();
}
- if (newPage === POSTS_PAGE) {
+ else if (newPage === POSTS_PAGE) {
page = LOADING_PAGE;
renderApp();
- return getPosts({ token: getToken() })
- .then((newPosts) => {
- page = POSTS_PAGE;
- posts = newPosts;
- renderApp();
- })
- .catch((error) => {
- console.error(error);
- goToPage(POSTS_PAGE);
- });
+ return getAPI();
+
+ // getPosts({ token: getToken() })
+ // .then((newPosts) => {
+ // page = POSTS_PAGE;
+ // posts = newPosts;
+ // renderApp();
+ // })
+ // .catch((error) => {
+ // console.error(error);
+ // goToPage(POSTS_PAGE);
+ // });
}
- if (newPage === USER_POSTS_PAGE) {
+ else if (newPage === USER_POSTS_PAGE) {
// TODO: реализовать получение постов юзера из API
console.log("Открываю страницу пользователя: ", data.userId);
page = USER_POSTS_PAGE;
- posts = [];
- return renderApp();
+ posts = [];
+ renderApp();
+ return fetchPostsUser(data.userId, { token: getToken() })
+ .then((newPosts) => {
+ page = USER_POSTS_PAGE;
+ posts = newPosts;
+ renderApp();
+ })
}
+ else {
+ page = newPage;
+ renderApp();
- page = newPage;
- renderApp();
+ return;
+ }
- return;
}
throw new Error("страницы не существует");
@@ -112,7 +139,10 @@ const renderApp = () => {
onAddPostClick({ description, imageUrl }) {
// TODO: реализовать добавление поста в API
console.log("Добавляю пост...", { description, imageUrl });
- goToPage(POSTS_PAGE);
+ userPosts({ token: getToken(), description, imageUrl })
+ .then(() => {
+ goToPage(POSTS_PAGE);
+ })
},
});
}
@@ -126,7 +156,9 @@ const renderApp = () => {
if (page === USER_POSTS_PAGE) {
// TODO: реализовать страницу фотографию пользвателя
appEl.innerHTML = "Здесь будет страница фотографий пользователя";
- return;
+ return renderAuthPageComponent({
+ appEl,
+ });
}
};
From 85b8960f67f324c321accac7b20481362e1a5ba6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Thu, 11 Apr 2024 18:06:24 +0700
Subject: [PATCH 02/17] =?UTF-8?q?=D0=BF=D0=BE=D1=81=D1=82=20=D0=B4=D0=BE?=
=?UTF-8?q?=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=D1=81=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/add-post-page-component.js | 40 +++++++++++++++++++++++++--
helpers.js | 4 +++
2 files changed, 41 insertions(+), 3 deletions(-)
diff --git a/components/add-post-page-component.js b/components/add-post-page-component.js
index 59554d86..885fef2b 100644
--- a/components/add-post-page-component.js
+++ b/components/add-post-page-component.js
@@ -1,20 +1,54 @@
+import { sanitizeHtml } from "../helpers.js";
+import { renderHeaderComponent } from "./header-component.js";
+import { renderUploadImageComponent } from "./upload-image-component.js";
+
+
+let imageUrl = "";
export function renderAddPostPageComponent({ appEl, onAddPostClick }) {
const render = () => {
// TODO: Реализовать страницу добавления поста
const appHtml = `
-
+ ${postsHtml}
+
- Cтраница добавления поста
+
+
`;
appEl.innerHTML = appHtml;
+ renderHeaderComponent({
+ element: document.querySelector(".header-container"),
+ });
+ renderUploadImageComponent({
+ element: appEl.querySelector(".upload-image-container"),
+ onImageUrlChange(newImageUrl) {
+ imageUrl = newImageUrl;
+ },
+ });
+
document.getElementById("add-button").addEventListener("click", () => {
+ if (!imageUrl) {
+ alert('Выберите фото');
+ return;
+ };
+ if (!(document.querySelector(".add-form__text").value)) {
+ alert('Не заполнено описание фото');
+ return;
+ };
+
+ const description = document.querySelector(".add-form__text").value
+
onAddPostClick({
- description: "Описание картинки",
- imageUrl: "https://image.png",
+ description: sanitizeHtml(description),
+ imageUrl: imageUrl,
});
});
};
diff --git a/helpers.js b/helpers.js
index b47d3b77..9d59670e 100644
--- a/helpers.js
+++ b/helpers.js
@@ -13,3 +13,7 @@ export function getUserFromLocalStorage(user) {
export function removeUserFromLocalStorage(user) {
window.localStorage.removeItem("user");
}
+
+export const sanitizeHtml = (htmlString) => {
+ return htmlString.replaceAll('&', '&').replaceAll('<', '<').replaceAll('>', '>').replaceAll('"', '"');
+}
\ No newline at end of file
From dbd5cf44c3067d624d4c3b03df926838baa2fe50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Thu, 11 Apr 2024 18:22:41 +0700
Subject: [PATCH 03/17] =?UTF-8?q?=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8?=
=?UTF-8?q?=D1=86=D0=B0=20=D0=BF=D0=BE=D1=81=D1=82=D0=BE=D0=B2=20=D0=BF?=
=?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?=
=?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.js | 7 +++----
1 file changed, 3 insertions(+), 4 deletions(-)
diff --git a/index.js b/index.js
index 141f8bc1..950e05b3 100644
--- a/index.js
+++ b/index.js
@@ -88,9 +88,9 @@ export const goToPage = (newPage, data) => {
else if (newPage === USER_POSTS_PAGE) {
// TODO: реализовать получение постов юзера из API
console.log("Открываю страницу пользователя: ", data.userId);
- page = USER_POSTS_PAGE;
- posts = [];
+ page = LOADING_PAGE;
renderApp();
+
return fetchPostsUser(data.userId, { token: getToken() })
.then((newPosts) => {
page = USER_POSTS_PAGE;
@@ -101,13 +101,12 @@ export const goToPage = (newPage, data) => {
else {
page = newPage;
renderApp();
-
return;
}
}
- throw new Error("страницы не существует");
+ throw new Error("Cтраницы не существует");
};
const renderApp = () => {
From 86dda970cb67c683f03930b8e5a746205ada6676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Thu, 11 Apr 2024 18:59:41 +0700
Subject: [PATCH 04/17] =?UTF-8?q?=D1=87=D1=82=D0=BE-=D1=82=D0=BE=20=D0=BF?=
=?UTF-8?q?=D0=BE=20=D0=BC=D0=B5=D0=BB=D0=BE=D1=87=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
api.js | 1 -
index.js | 3 +++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/api.js b/api.js
index 17f65721..4acaa98e 100644
--- a/api.js
+++ b/api.js
@@ -80,7 +80,6 @@ export function fetchPostsUser( id , { token }) {
if (response.status === 401) {
throw new Error("Нет авторизации");
}
-
return response.json();
})
.then((data) => {
diff --git a/index.js b/index.js
index 950e05b3..163708d5 100644
--- a/index.js
+++ b/index.js
@@ -97,6 +97,9 @@ export const goToPage = (newPage, data) => {
posts = newPosts;
renderApp();
})
+ .catch((error) => {
+ console.error(error);
+ });
}
else {
page = newPage;
From dd680a0f7fc5ad1e922d6b0a8e631070ed624ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Thu, 11 Apr 2024 21:57:18 +0700
Subject: [PATCH 05/17] =?UTF-8?q?=D0=BF=D0=BE=D1=81=D1=82=D1=8B=20=D0=BF?=
=?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?=
=?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/index.js b/index.js
index 163708d5..e20509bf 100644
--- a/index.js
+++ b/index.js
@@ -89,7 +89,7 @@ export const goToPage = (newPage, data) => {
// TODO: реализовать получение постов юзера из API
console.log("Открываю страницу пользователя: ", data.userId);
page = LOADING_PAGE;
- renderApp();
+ renderApp();
return fetchPostsUser(data.userId, { token: getToken() })
.then((newPosts) => {
@@ -158,7 +158,7 @@ const renderApp = () => {
if (page === USER_POSTS_PAGE) {
// TODO: реализовать страницу фотографию пользвателя
appEl.innerHTML = "Здесь будет страница фотографий пользователя";
- return renderAuthPageComponent({
+ return renderPostsPageComponent({
appEl,
});
}
From 0ed5736c7ba759778353ec7279d5e3748c7719aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=B7=D0=B4=D0=B5=D1=81=D1=8C=20=D0=B2=D0=B0=D1=88=D0=B5?=
=?UTF-8?q?=20=D0=B8=D0=BC=D1=8F?= <здесь ваша почта>
Date: Fri, 12 Apr 2024 21:15:45 +0700
Subject: [PATCH 06/17] =?UTF-8?q?=D0=BB=D0=B0=D0=B9=D0=BA=D0=B8=20=D0=BF?=
=?UTF-8?q?=D0=BE=D0=BA=D0=B0=20=D0=BD=D0=B5=20=D1=80=D0=B0=D0=B1=D0=BE?=
=?UTF-8?q?=D1=82=D0=B0=D1=8E=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
api.js | 45 ++++++++++++++++++++++++++++--
components/posts-page-component.js | 44 +++++++++++++++++++++++++++--
index.js | 2 +-
3 files changed, 84 insertions(+), 7 deletions(-)
diff --git a/api.js b/api.js
index 4acaa98e..c61e7bd8 100644
--- a/api.js
+++ b/api.js
@@ -69,7 +69,7 @@ export function uploadImage({ file }) {
});
}
//посты пользователя
-export function fetchPostsUser( id , { token }) {
+export function fetchPostsUser(id, { token }) {
return fetch(`${postsHost}/user-posts/${id}`, {
method: "GET",
headers: {
@@ -96,7 +96,7 @@ export const userPosts = ({ token, description, imageUrl }) => {
}),
headers: {
Authorization: token,
- }
+ }
})
.then((response) => {
if (response.status === 500) {
@@ -108,4 +108,43 @@ export const userPosts = ({ token, description, imageUrl }) => {
}
})
-}
\ No newline at end of file
+}
+
+//лайки
+export const getLike = (id, { token }) => {
+ return fetch(`${postsHost}/${id}/like`, {
+ method: "POST",
+ headers: {
+ Authorization: token,
+ }
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
+ }
+ return response.json();
+ })
+ .catch((error) => {
+ console.error("Ошибка при установке лайка:", error);
+ throw error;
+ });
+};
+
+export const getDislike = (id, { token }) => {
+ return fetch(`${postsHost}/${id}/dislike`, {
+ method: "POST",
+ headers: {
+ Authorization: token,
+ }
+ })
+ .then((response) => {
+ if (!response.ok) {
+ throw new Error(`Ошибка ${response.status}: ${response.statusText}`);
+ }
+ return response.json();
+ })
+ .catch((error) => {
+ console.error("Ошибка при удалении лайка:", error);
+ throw error;
+ });
+};
\ No newline at end of file
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
index 23bba7e1..49be526b 100644
--- a/components/posts-page-component.js
+++ b/components/posts-page-component.js
@@ -1,6 +1,7 @@
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 { getDislike, getLike } from "../api.js";
export function renderPostsPageComponent({ appEl }) {
// TODO: реализовать рендер постов из api
@@ -23,7 +24,7 @@ export function renderPostsPageComponent({ appEl }) {
Новый пост
+ +Нравится: 2 @@ -50,7 +51,7 @@ export function renderPostsPageComponent({ appEl }) {
-
${postsHtml}
` : `
`}
- Нравится: 2 + Нравится: + ${post.likes.length === 0 ? 0 : post.likes.length === 1 ? post.likes[0].name : post.likes[(post.likes.length - 1)].name + ' и еще ' + (post.likes.length - 1)} +