- Cтраница добавления поста
-
+
@@ -72,20 +48,14 @@ export function renderAuthPageComponent({ appEl, setUser }) {
appEl.innerHTML = appHtml;
- /**
- * Устанавливает сообщение об ошибке в форме.
- * @param {string} message - Текст сообщения об ошибке.
- */
const setError = (message) => {
appEl.querySelector(".form-error").textContent = message;
};
- // Рендерим заголовок страницы
renderHeaderComponent({
element: document.querySelector(".header-container"),
});
- // Если режим регистрации, рендерим компонент загрузки изображения
const uploadImageContainer = appEl.querySelector(".upload-image-container");
if (uploadImageContainer) {
renderUploadImageComponent({
@@ -96,12 +66,10 @@ export function renderAuthPageComponent({ appEl, setUser }) {
});
}
- // Обработка клика на кнопку входа/регистрации
document.getElementById("login-button").addEventListener("click", () => {
setError("");
if (isLoginMode) {
- // Обработка входа
const login = document.getElementById("login-input").value;
const password = document.getElementById("password-input").value;
@@ -124,7 +92,6 @@ export function renderAuthPageComponent({ appEl, setUser }) {
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;
@@ -160,13 +127,10 @@ export function renderAuthPageComponent({ appEl, setUser }) {
}
});
- // Обработка переключения режима (вход ↔ регистрация)
document.getElementById("toggle-button").addEventListener("click", () => {
isLoginMode = !isLoginMode;
- renderForm(); // Перерисовываем форму с новым режимом
});
};
- // Инициализация формы
renderForm();
}
diff --git a/components/header-component.js b/components/header-component.js
index e733a39dc..660c08d36 100644
--- a/components/header-component.js
+++ b/components/header-component.js
@@ -1,21 +1,11 @@
import { goToPage, logout, user } from "../index.js";
import { ADD_POSTS_PAGE, AUTH_PAGE, POSTS_PAGE } from "../routes.js";
-/**
- * Компонент заголовка страницы.
- * Этот компонент отображает шапку страницы с логотипом, кнопкой добавления постов/входа и кнопкой выхода (если пользователь авторизован).
- *
- * @param {HTMLElement} params.element - HTML-элемент, в который будет рендериться заголовок.
- * @returns {HTMLElement} Возвращает элемент заголовка после рендеринга.
- */
export function renderHeaderComponent({ element }) {
- /**
- * Рендерит содержимое заголовка.
- */
element.innerHTML = `
`;
+ const logo = element.querySelector(".logo");
+ logo.addEventListener("click", () => {
+ goToPage(POSTS_PAGE);
+ });
- /**
- * Обработчик клика по кнопке "Добавить пост"/"Войти".
- * Если пользователь авторизован, перенаправляет на страницу добавления постов.
- * Если пользователь не авторизован, перенаправляет на страницу авторизации.
- */
element
.querySelector(".add-or-login-button")
.addEventListener("click", () => {
@@ -45,18 +34,10 @@ export function renderHeaderComponent({ element }) {
}
});
- /**
- * Обработчик клика по логотипу.
- * Перенаправляет на страницу с постами.
- */
element.querySelector(".logo").addEventListener("click", () => {
goToPage(POSTS_PAGE);
});
- /**
- * Обработчик клика по кнопке "Выйти".
- * Если кнопка существует (т.е. пользователь авторизован), вызывает функцию `logout`.
- */
element.querySelector(".logout-button")?.addEventListener("click", logout);
return element;
diff --git a/components/loading-page-component.js b/components/loading-page-component.js
index c93522573..625d6a2fb 100644
--- a/components/loading-page-component.js
+++ b/components/loading-page-component.js
@@ -1,34 +1,17 @@
import { renderHeaderComponent } from "./header-component.js";
-/**
- * Компонент страницы загрузки.
- * Этот компонент отображает страницу с индикатором загрузки и заголовком.
- * Используется для отображения промежуточного состояния, пока выполняется загрузка данных или другой процесс.
- *
- * @param {HTMLElement} params.appEl - Корневой элемент приложения, в который будет рендериться страница загрузки.
- * @param {Object} params.user - Объект пользователя, содержащий данные о текущем авторизованном пользователе (если он есть).
- * @param {Function} params.goToPage - Функция для навигации по страницам.
- */
export function renderLoadingPageComponent({ appEl, user, goToPage }) {
- /**
- * HTML-разметка страницы загрузки.
- * Содержит контейнер заголовка и индикатор загрузки.
- */
const appHtml = `
`;
+
+
+
+ ${escapeHtml(post.user.name)}
+ ${escapeHtml(post.description)}
+
+
+ ${timing(new Date(post.createdAt))}
+
+
+ ${buttonHtml}
+
+
+ `;
+
+ element.innerHTML += postHtml;
+ });
+ buttonsDeletePost();
+ buttonsLikePost({ posts });
+ buttonUserPosts();
+ likePosts({ posts });
+}
+
+function timing(date) {
+ return formatDistanceToNow(date, { addSuffix: true, locale: ru });
+}
+
+function likePosts({ posts }) {
+ const postsAll = document.querySelectorAll(".post");
+
+ postsAll.forEach((post, index) => {
+ renderLikeButton({
+ element: post.querySelector(".post-likes"),
+ post,
+ id: posts[index].id,
+ length: posts[index].likes.length,
+ isLiked: posts[index].isLiked,
+ });
+ });
+}
+
+function buttonsLikePost({ posts }) {
+ const postsAll = document.querySelectorAll(".post");
+
+ postsAll.forEach((post, index) => {
+ renderLikeButton({
+ element: post.querySelector(".post-likes"),
+ post,
+ id: posts[index].id,
+ length: posts[index].likes.length,
+ isLiked: posts[index].isLiked,
+ });
+ });
+}
+
+function buttonUserPosts() {
+ const postsHeaders = document.querySelectorAll(".post-header");
+ postsHeaders.forEach((postHeader) => {
+ postHeader.addEventListener("click", () => {
+ const id = postHeader.dataset.userId;
+ goToPage(USER_POSTS_PAGE, id);
+ });
+ });
+}
+
+function buttonsDeletePost() {
+ const posts = document.querySelectorAll(".post");
+ posts.forEach((post) => {
+ const button = post.querySelector(".delete-button");
+ if (button) {
+ button.addEventListener("click", () => {
+ const id = button.dataset.postId;
+ deletePost({ token: getToken(), id })
+ .then(() => {
+ post.remove();
+ goToPage(POSTS_PAGE);
+ })
+ .catch((error) => {
+ console.error("Ошибка удаления поста:", error);
+ });
+ });
+ }
+ });
+}
diff --git a/components/post-like-button.js b/components/post-like-button.js
new file mode 100644
index 000000000..2f7b23168
--- /dev/null
+++ b/components/post-like-button.js
@@ -0,0 +1,40 @@
+import { addLike, disLike } from "../api.js";
+import { getToken } from "../index.js";
+
+export function renderLikeButton({ element, post, id, length, isLiked }) {
+ const buttonHtml = `
+
@@ -47,7 +28,6 @@ export function renderUploadImageComponent({ element, onImageUrlChange }) {
`;
- // Обработчик выбора файла
const fileInputElement = element.querySelector(".file-upload-input");
fileInputElement?.addEventListener("change", () => {
const file = fileInputElement.files[0];
@@ -55,26 +35,23 @@ export function renderUploadImageComponent({ element, onImageUrlChange }) {
const labelEl = document.querySelector(".file-upload-label");
labelEl.setAttribute("disabled", true);
labelEl.textContent = "Загружаю файл...";
-
- // Загружаем изображение с помощью API
+
uploadImage({ file }).then(({ fileUrl }) => {
- imageUrl = fileUrl; // Сохраняем URL загруженного изображения
- onImageUrlChange(imageUrl); // Уведомляем о изменении URL изображения
- render(); // Перерисовываем компонент с новым состоянием
+ imageUrl = fileUrl;
+ onImageUrlChange(imageUrl);
+ render();
});
}
});
- // Обработчик удаления изображения
element
.querySelector(".file-upload-remove-button")
?.addEventListener("click", () => {
- imageUrl = ""; // Сбрасываем URL изображения
- onImageUrlChange(imageUrl); // Уведомляем об изменении URL изображения
- render(); // Перерисовываем компонент
+ imageUrl = "";
+ onImageUrlChange(imageUrl);
+ render();
});
};
- // Инициализация компонента
render();
}
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 000000000..0406f0648
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,11 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import config from "eslint-config-prettier";
+import plugin from "eslint-plugin-prettier/recommended";
+
+export default [
+ { languageOptions: { globals: globals.browser } },
+ pluginJs.configs.recommended,
+ config,
+ plugin,
+];
diff --git a/helpers.js b/helpers.js
index b47d3b777..6636f9ea3 100644
--- a/helpers.js
+++ b/helpers.js
@@ -2,14 +2,15 @@ export function saveUserToLocalStorage(user) {
window.localStorage.setItem("user", JSON.stringify(user));
}
-export function getUserFromLocalStorage(user) {
+export function getUserFromLocalStorage() {
try {
return JSON.parse(window.localStorage.getItem("user"));
+ // eslint-disable-next-line no-unused-vars
} catch (error) {
return null;
}
}
-export function removeUserFromLocalStorage(user) {
+export function removeUserFromLocalStorage() {
window.localStorage.removeItem("user");
}
diff --git a/index.html b/index.html
index 96674b4d3..3fb708dab 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-
+
+ 
- 
- 
- 
+
+date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js
+
+👉 [Documentation](https://date-fns.org/)
+
+👉 [Blog](https://blog.date-fns.org/)
+
+