Hw 8

.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["eslint:recommended", "prettier"],
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-console": "warn",
+    "no-unused-vars": "warn",
+    "no-var": "error",
+    "prefer-const": "error"
+  }
+}

.github/workflows/greetings.yml

@@ -9,7 +9,7 @@ jobs:
     if: github.repository == 'GlebkaF/webdev-dom-homework'
     runs-on: ubuntu-latest
     steps:
-    - uses: superbrothers/close-pull-request@v3
-      with:
-        # Optional. Post a issue comment just before closing a pull request.
-        comment: "Привет! Сделай пожалуйста Pull Request в свой репозиторий, сейчас ты сделал PR в репозиторий Глеба. Посмотри в домашке, там на скриншоте нарисовано где выбрать свой репозиторий"
+      - uses: superbrothers/close-pull-request@v3
+        with:
+          # Optional. Post a issue comment just before closing a pull request.
+          comment: 'Привет! Сделай пожалуйста Pull Request в свой репозиторий, сейчас ты сделал PR в репозиторий Глеба. Посмотри в домашке, там на скриншоте нарисовано где выбрать свой репозиторий'

.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+
+.env
+
+*.log
+
+.vscode/
+.idea/
+
+dist/
+coverage/
+
+.DS_Store
+Thumbs.db

.hintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "development"
+  ]
+}

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 100
+}

api.js

@@ -0,0 +1,185 @@
+const PERSONAL_KEY = 'nikandrov-danil';
+const BASE_URL = `https://wedev-api.sky.pro/api/v2/${PERSONAL_KEY}`;
+const AUTH_URL = `https://wedev-api.sky.pro/api/user`;
+
+export let token = null;
+export let user = null;
+
+export const setToken = (newToken) => {
+  token = newToken;
+  if (newToken) {
+    localStorage.setItem('token', newToken);
+  } else {
+    localStorage.removeItem('token');
+  }
+};
+
+export const setUser = (newUser) => {
+  user = newUser;
+  if (newUser) {
+    localStorage.setItem('user', JSON.stringify(newUser));
+  } else {
+    localStorage.removeItem('user');
+  }
+};
+
+export const getToken = () => {
+  return token || localStorage.getItem('token');
+};
+
+export const getUser = () => {
+  try {
+    if (user) return user;
+
+    const userData = localStorage.getItem('user');
+
+    if (!userData) return null;
+
+    return JSON.parse(userData);
+  } catch (error) {
+    console.error('Ошибка при получении пользователя из localStorage:', error);
+    localStorage.removeItem('user');
+    return null;
+  }
+};
+
+export const removeAuthData = () => {
+  token = null;
+  user = null;
+  localStorage.removeItem('token');
+  localStorage.removeItem('user');
+};
+
+export const getComments = async () => {
+  try {
+    const response = await fetch(`${BASE_URL}/comments`);
+
+    if (!response.ok) {
+      if (response.status === 500) {
+        throw new Error('Сервер сломался, попробуй позже');
+      } else {
+        throw new Error('Ошибка сервера');
+      }
+    }
+
+    const data = await response.json();
+
+    return data.comments.map(comment => ({
+      id: comment.id,
+      name: comment.author.name,
+      text: comment.text,
+      likes: comment.likes || 0,
+      isLiked: comment.isLiked || false,
+      date: new Date(comment.date).getTime()
+    }));
+  } catch (error) {
+    if (error.message === 'Failed to fetch') {
+      throw new Error('Кажется, у вас сломался интернет, попробуйте позже');
+    }
+    throw error;
+  }
+};
+
+export const postComment = async (text) => {
+  const currentToken = getToken();
+
+  if (!currentToken) {
+    throw new Error('Ошибка авторизации');
+  }
+
+  try {
+    const response = await fetch(`${BASE_URL}/comments`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${currentToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        text,
+      }),
+    });
+
+    if (!response.ok) {
+      if (response.status === 400) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Комментарий должен быть не короче 3 символов');
+      } else if (response.status === 500) {
+        throw new Error('Сервер сломался, попробуй позже');
+      } else if (response.status === 401) {
+        throw new Error('Ошибка авторизации');
+      } else {
+        throw new Error('Ошибка сервера');
+      }
+    }
+
+    return await getComments();
+  } catch (error) {
+    if (error.message === 'Failed to fetch') {
+      throw new Error('Кажется, у вас сломался интернет, попробуйте позже');
+    }
+    throw error;
+  }
+};
+
+export const login = async ({ login, password }) => {
+  try {
+    const response = await fetch(`${AUTH_URL}/login`, {
+      method: 'POST',
+      body: JSON.stringify({
+        login,
+        password,
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      if (response.status === 400) {
+        throw new Error(data.error || 'Неверный логин или пароль');
+      } else {
+        throw new Error(data.error || 'Ошибка сервера');
+      }
+    }
+
+    setToken(data.user.token);
+    setUser(data.user);
+    return data;
+  } catch (error) {
+    if (error.message === 'Failed to fetch') {
+      throw new Error('Кажется, у вас сломался интернет, попробуйте позже');
+    }
+    throw error;
+  }
+};
+
+export const register = async ({ name, login, password }) => {
+  try {
+    const response = await fetch(AUTH_URL, {
+      method: 'POST',
+      body: JSON.stringify({
+        name,
+        login,
+        password,
+      }),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      if (response.status === 400) {
+        throw new Error(data.error || 'Пользователь с таким логином уже существует');
+      } else {
+        throw new Error(data.error || 'Ошибка сервера');
+      }
+    }
+
+    setToken(data.user.token);
+    setUser(data.user);
+    return data;
+  } catch (error) {
+    if (error.message === 'Failed to fetch') {
+      throw new Error('Кажется, у вас сломался интернет, попробуйте позже');
+    }
+    throw error;
+  }
+};

db.json

@@ -0,0 +1,40 @@
+{
+  "comments": [
+    {
+      "id": "1",
+      "name": "Тестовый пользователь",
+      "text": "Это первый комментарий!",
+      "date": "28.07.2025, 11:00:00",
+      "likes": 1,
+      "isLiked": true,
+      "replyTo": null
+    },
+    {
+      "id": "2",
+      "name": "Второй пользователь",
+      "text": "Работает отлично!",
+      "date": "29.07.2025, 12:00:00",
+      "likes": 1,
+      "isLiked": true,
+      "replyTo": null
+    },
+    {
+      "id": "60c1",
+      "name": "tretiy",
+      "text": "ya tyta",
+      "date": "29.07.2025, 21:25:16",
+      "likes": 1,
+      "isLiked": true,
+      "replyTo": null
+    },
+    {
+      "id": "a6d3",
+      "name": "Данил",
+      "text": "не работают лайки :((((((((",
+      "date": "29.07.2025, 21:30:21",
+      "likes": 0,
+      "isLiked": false,
+      "replyTo": null
+    }
+  ]
+}

escapeHTML.js

@@ -0,0 +1,11 @@
+function escapeHTML(str) {
+  if (!str) return ''; 
+  return str
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#039;');
+}
+
+export { escapeHTML };

eventHandlers.js

@@ -0,0 +1,81 @@
+import { escapeHTML } from './escapeHTML.js';
+import { getToken } from './api.js';
+import { renderLoginComponent } from './login.js';
+
+export function initHandlers({ onAddComment, onToggleLike, onReply, onRetry, onInputChange }) {
+  const commentInput = document.querySelector('.add-form-text');
+  const addButton = document.querySelector('.add-form-button');
+  const commentsList = document.querySelector('.comments');
+  const appEl = document.getElementById('app');
+
+  const checkInputs = () => {
+    if (addButton) {
+      addButton.disabled = !commentInput.value.trim();
+    }
+    if (onInputChange) onInputChange();
+  };
+
+  if (commentsList) {
+    commentsList.addEventListener('click', (event) => {
+      if (event.target.classList.contains('retry-btn')) {
+        onRetry();
+        return;
+      }
+
+      if (event.target.classList.contains('like-button')) {
+        event.preventDefault();
+        const commentElement = event.target.closest('.comment');
+        if (!commentElement) return;
+
+        const commentId = commentElement.dataset.id;
+        onToggleLike(commentId);
+        return;
+      }
+
+      if (event.target.classList.contains('comment-reply')) {
+        event.preventDefault();
+        const commentElement = event.target.closest('.comment');
+        if (!commentElement) return;
+
+        const author = commentElement.querySelector('.comment-author').textContent;
+        const text = commentElement.querySelector('.comment-body').textContent;
+        onReply(author, text);
+        return;
+      }
+    });
+  }
+
+  if (addButton && commentInput) {
+    addButton.addEventListener('click', (event) => {
+      event.preventDefault();
+
+      const text = commentInput.value.trim();
+
+      if (text.length < 3) {
+        alert('Комментарий должен быть не короче 3 символов');
+        return;
+      }
+
+      onAddComment({
+        text: escapeHTML(text)
+      });
+    });
+
+    commentInput.addEventListener('input', checkInputs);
+  }
+
+  const authLink = document.getElementById('auth-link');
+  if (authLink) {
+    authLink.addEventListener('click', (event) => {
+      event.preventDefault();
+      renderLoginComponent({
+        appEl,
+        onSuccess: () => {
+          window.location.reload();
+        }
+      });
+    });
+  }
+
+  checkInputs();
+}

formatDate.js

@@ -0,0 +1,11 @@
+export function formatDate(dateString) {
+  const date = new Date(dateString);
+  return date.toLocaleString('ru-RU', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  });
+}