-
+ `;
+ })
+ .join("");
+
+ const appHtml = `
+ Instapro
-
+
-
+
-
-
-
- ${ - isLoginMode - ? "Вход в Instapro" - : "Регистрация в Instapro" - } -
-
- ${
- !isLoginMode
- ? `
-
-
- `
- : ""
- }
-
-
-
-
+
+
`;
appEl.innerHTML = appHtml;
- /**
- * Устанавливает сообщение об ошибке в форме.
- * @param {string} message - Текст сообщения об ошибке.
- */
- const setError = (message) => {
- appEl.querySelector(".form-error").textContent = message;
- };
-
- // Рендерим заголовок страницы
renderHeaderComponent({
element: document.querySelector(".header-container"),
+ user,
+ goToPage,
});
- // Если режим регистрации, рендерим компонент загрузки изображения
- const uploadImageContainer = appEl.querySelector(".upload-image-container");
- if (uploadImageContainer) {
- renderUploadImageComponent({
- element: uploadImageContainer,
- onImageUrlChange(newImageUrl) {
- imageUrl = newImageUrl;
- },
- });
- }
+ const loginInputElement = document.getElementById("login-input");
+ const passwordInputElement = document.getElementById("password-input");
+ const nameInputElement = document.getElementById("name-input");
+ const imageInputElement = document.getElementById("image-input");
+ const registerButtonElement = document.getElementById("register-button");
+ const loginButtonElement = document.getElementById("login-button");
+ const toggleButtonElement = document.getElementById("toggle-button");
+ const authErrorMessageElement = document.querySelector(".form-error");
- // Обработка клика на кнопку входа/регистрации
- document.getElementById("login-button").addEventListener("click", () => {
- setError("");
+ const setError = (message) => {
+ if (authErrorMessageElement) {
+ authErrorMessageElement.textContent = message;
+ }
+ };
+
+ toggleButtonElement.addEventListener("click", () => {
+ isLoginMode = !isLoginMode;
+ imageUrl = "";
+ setError(""); // Сбрасываем ошибку при смене формы
+ renderForm();
+ });
- if (isLoginMode) {
- // Обработка входа
- const login = document.getElementById("login-input").value;
- const password = document.getElementById("password-input").value;
+ if (loginButtonElement) {
+ loginButtonElement.addEventListener("click", () => {
+ setError("");
+
+ const login = loginInputElement?.value?.trim() || "";
+ const password = passwordInputElement?.value?.trim() || "";
if (!login) {
- alert("Введите логин");
+ setError("Введите логин");
return;
}
if (!password) {
- alert("Введите пароль");
+ setError("Введите пароль");
return;
}
loginUser({ login, password })
- .then((user) => {
- setUser(user.user);
+ .then((userData) => {
+ if (!userData.user?.token) {
+ throw new Error("Токен не получен");
+ }
+ setUser(userData.user);
})
.catch((error) => {
- console.warn(error);
setError(error.message);
});
- } else {
- // Обработка регистрации
- const login = document.getElementById("login-input").value;
- const name = document.getElementById("name-input").value;
- const password = document.getElementById("password-input").value;
+ });
+ }
- if (!name) {
- alert("Введите имя");
- return;
- }
+ if (registerButtonElement) {
+ registerButtonElement.addEventListener("click", () => {
+ setError("");
+
+ const login = loginInputElement?.value?.trim() || "";
+ const password = passwordInputElement?.value?.trim() || "";
+ const name = nameInputElement?.value?.trim() || "";
if (!login) {
- alert("Введите логин");
+ setError("Введите логин");
return;
}
if (!password) {
- alert("Введите пароль");
+ setError("Введите пароль");
return;
}
- if (!imageUrl) {
- alert("Не выбрана фотография");
+ if (!name) {
+ setError("Введите имя");
return;
}
- registerUser({ login, password, name, imageUrl })
- .then((user) => {
- setUser(user.user);
+ const data = {
+ login,
+ password,
+ name,
+ };
+
+ if (imageUrl) {
+ data.imageUrl = imageUrl;
+ }
+
+ registerUser(data)
+ .then((userData) => {
+ if (!userData.user?.token) {
+ throw new Error("Токен не получен");
+ }
+ setUser(userData.user);
})
.catch((error) => {
- console.warn(error);
setError(error.message);
});
- }
- });
+ });
+ }
- // Обработка переключения режима (вход ↔ регистрация)
- document.getElementById("toggle-button").addEventListener("click", () => {
- isLoginMode = !isLoginMode;
- renderForm(); // Перерисовываем форму с новым режимом
- });
+ if (imageInputElement) {
+ imageInputElement.addEventListener("change", (event) => {
+ const file = event.target.files[0];
+ if (file) {
+ imageInputElement.disabled = true;
+ setError("Загрузка изображения...");
+ uploadImage({ file })
+ .then((data) => {
+ imageUrl = data.fileUrl;
+ setError("");
+ imageInputElement.disabled = false;
+ })
+ .catch(() => {
+ setError("Ошибка загрузки изображения");
+ imageInputElement.disabled = false;
+ });
+ }
+ });
+ }
};
- // Инициализация формы
renderForm();
-}
+}
\ No newline at end of file
diff --git a/components/posts-page-component.js b/components/posts-page-component.js
index 662ccdbdc..281b395a9 100644
--- a/components/posts-page-component.js
+++ b/components/posts-page-component.js
@@ -1,109 +1,134 @@
import { USER_POSTS_PAGE } from "../routes.js";
import { renderHeaderComponent } from "./header-component.js";
-import { posts, goToPage } from "../index.js";
+import { posts, goToPage, user } from "../index.js";
+import { likePost, dislikePost } from "../api.js";
+
+function escapeHTML(str) {
+ return str.replace(/[&<>'"]/g, (match) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ "'": "'",
+ '"': """,
+ }[match]));
+}
export function renderPostsPageComponent({ appEl }) {
- // @TODO: реализовать рендер постов из api
- console.log("Актуальный список постов:", posts);
-
- /**
- * @TODO: чтобы отформатировать дату создания поста в виде "19 минут назад"
- * можно использовать https://date-fns.org/v2.29.3/docs/formatDistanceToNow
- */
- const appHtml = `
-
+
+ ${isLoginMode ? "Вход в Instapro" : "Регистрация в Instapro"}
+
+ ${!isLoginMode ? `
+
- `;
+
+
+
-
+
-
-
-
`;
-
- appEl.innerHTML = appHtml;
-
- renderHeaderComponent({
- element: document.querySelector(".header-container"),
- });
+ const renderPosts = () => {
+ const postsHtml = posts
+ .map((post) => {
+ // Упрощённый вывод даты
+ const date = new Date(post.createdAt);
+ const createdAt = `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
+
+ return `
+ -
-
-
- --
- Иван Иваныч
---
- - --- Нравится: 2 -
-- Иван Иваныч - Ромашка, ромашка... -
-- 19 минут назад -
-
- -
- -- - -
- Варварва Н.
---
- - --- Нравится: 35 -
-- Варварва Н. - Нарисовала картину, посмотрите какая красивая -
-- 3 часа назад -
-
- -
- -- - -
-
Варварва Н.
----
- --- Нравится: 0 -
-- Варварва Н. - Голова -
-- 8 дней назад -
-
-
+ 
+
+ ${post.user.name}
+
+ 
+
+
+
+
+ + Нравится: ${post.likes.length} +
++ ${post.user.name} + ${escapeHTML(post.description)} +
+${createdAt}
+ + ${user && post.user.login === user.login ? ` + + ` : ""} +
+
+
`;
- 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"),
+ user,
+ goToPage,
+ });
+
+ // Переход к пользователю
+ for (let userEl of document.querySelectorAll(".post-header")) {
+ userEl.addEventListener("click", () => {
+ const userId = userEl.dataset.userId;
+ goToPage(USER_POSTS_PAGE, { userId });
});
+ }
+
+ // Лайки
+ for (let likeButton of document.querySelectorAll(".like-button")) {
+ likeButton.addEventListener("click", () => {
+ const postId = likeButton.dataset.postId;
+ const post = posts.find((p) => p.id === postId);
+ const token = user ? `Bearer ${user.token}` : undefined;
+
+ const action = post.isLiked ? dislikePost : likePost;
+
+ action({ token, postId }).then(({ post: updatedPost }) => {
+ const index = posts.findIndex((p) => p.id === postId);
+ posts[index] = updatedPost;
+
+ // Получаем элемент из DOM
+ const buttonEl = document.querySelector(`[data-post-id="${postId}"]`);
+ const imageEl = buttonEl?.querySelector("img");
+
+ if (imageEl) {
+ // Меняем изображение на active/not-active
+ imageEl.src = "./assets/images/like-" + (updatedPost.isLiked ? "active" : "not-active") + ".svg";
+
+ // Запускаем анимацию пульсации
+ imageEl.classList.add("liked");
+ setTimeout(() => imageEl.classList.remove("liked"), 300);
+ }
+
+ renderPosts(); // Перерисовываем посты для обновления количества лайков
});
- }
+ });
}
+
+ // Удаление поста
+ for (let deleteButton of document.querySelectorAll(".delete-button")) {
+ deleteButton.addEventListener("click", (event) => {
+ const postId = deleteButton.dataset.postId;
+
+ if (!confirm("Вы точно хотите удалить пост?")) return;
+
+ fetch(`https://wedev-api.sky.pro/api/v1/prod/instapro/ ${postId}`, {
+ method: "DELETE",
+ headers: {
+ Authorization: `Bearer ${user.token}`,
+ },
+ })
+ .then(() => {
+ const index = posts.findIndex((p) => p.id === postId);
+ posts.splice(index, 1);
+ renderPosts();
+ })
+ .catch((error) => {
+ console.error("Ошибка удаления поста:", error);
+ alert("Не удалось удалить пост");
+ });
+ });
+ }
+ };
+
+ renderPosts();
+}
\ No newline at end of file
diff --git a/helpers.js b/helpers.js
index b47d3b777..781aadf85 100644
--- a/helpers.js
+++ b/helpers.js
@@ -1,15 +1,21 @@
export function saveUserToLocalStorage(user) {
- window.localStorage.setItem("user", JSON.stringify(user));
+ try {
+ localStorage.setItem("user", JSON.stringify(user));
+ } catch (error) {
+ console.error("Error saving user to localStorage:", error);
+ }
}
-export function getUserFromLocalStorage(user) {
+export function getUserFromLocalStorage() {
try {
- return JSON.parse(window.localStorage.getItem("user"));
+ const user = localStorage.getItem("user");
+ return user ? JSON.parse(user) : null;
} catch (error) {
+ console.error("Error retrieving user from localStorage:", error);
return null;
}
}
-export function removeUserFromLocalStorage(user) {
- window.localStorage.removeItem("user");
-}
+export function removeUserFromLocalStorage() {
+ localStorage.removeItem("user");
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 96674b4d3..6384d083d 100644
--- a/index.html
+++ b/index.html
@@ -4,14 +4,12 @@
- ${postsHtml}