GlebkaF · ProiZvoDiteLb · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025 · Jun 30, 2025
diff --git a/.prettierrc.yaml b/.prettierrc.yaml
@@ -0,0 +1,3 @@
+tabWidth: 4
+semi: false
+singleQuote: true
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,16 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import { defineConfig } from 'eslint/config'
+import config from 'eslint-config-prettier'
+import plugin from 'eslint-plugin-prettier/recommended'
+
+export default defineConfig([
+    {
+        files: ['**/*.{js,mjs,cjs}'],
+        plugins: { js },
+        extends: ['js/recommended'],
+        languageOptions: { globals: globals.browser },
+    },
+    config,
+    plugin,
+])
diff --git a/index.html b/index.html
@@ -1,71 +1,59 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Проект "Комменты"</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="styles.css" />
-  </head>
+<head>
+  <title>Проект "Комменты"</title>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
 
-  <body>
-    <div class="container">
-      <ul class="comments">
-        <li class="comment">
-          <div class="comment-header">
-            <div>Глеб Фокин</div>
-            <div>12.02.22 12:18</div>
-          </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Это будет первый комментарий на этой странице
-            </div>
-          </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">3</span>
-              <button class="like-button"></button>
-            </div>
+<body>
+
+  <div class="container">
+    <ul class="comments" id="comments-list">
+      <li class="comment">
+        <div class="comment-header">
+          <div>Глеб Фокин</div>
+          <div>12.02.22 12:18</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">
+            Это будет первый комментарий на этой странице
           </div>
-        </li>
-        <li class="comment">
-          <div class="comment-header">
-            <div>Варвара Н.</div>
-            <div>13.02.22 19:22</div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">3</span>
+            <button class="like-button"></button>
           </div>
-          <div class="comment-body">
-            <div class="comment-text">
-              Мне нравится как оформлена эта страница! ❤
-            </div>
+        </div>
+      </li>
+      <li class="comment">
+        <div class="comment-header">
+          <div>Варвара Н.</div>
+          <div>13.02.22 19:22</div>
+        </div>
+        <div class="comment-body">
+          <div class="comment-text">
+            Мне нравится как оформлена эта страница! ❤
           </div>
-          <div class="comment-footer">
-            <div class="likes">
-              <span class="likes-counter">75</span>
-              <button class="like-button -active-like"></button>
-            </div>
+        </div>
+        <div class="comment-footer">
+          <div class="likes">
+            <span class="likes-counter">75</span>
+            <button class="like-button -active-like"></button>
           </div>
-        </li>
-      </ul>
-      <div class="add-form">
-        <input
-          type="text"
-          class="add-form-name"
-          placeholder="Введите ваше имя"
-        />
-        <textarea
-          type="textarea"
-          class="add-form-text"
-          placeholder="Введите ваш коментарий"
-          rows="4"
-        ></textarea>
-        <div class="add-form-row">
-          <button class="add-form-button">Написать</button>
         </div>
+      </li>
+    </ul>
+    <div class="add-form">
+      <input type="text" class="add-form-name" placeholder="Введите ваше имя" />
+      <textarea type="textarea" class="add-form-text" placeholder="Введите ваш коментарий" rows="4"></textarea>
+      <div class="add-form-row">
+        <button class="add-form-button">Написать</button>
       </div>
     </div>
-  </body>
-
-  <script>
-    "use strict";
-    // Код писать здесь
-    console.log("It works!");
-  </script>
-</html>
+  </div>
+</body>
+<div id="app"></div>
+<script type="module" src="./index.js" defer></script>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,102 @@
+import { updateComments } from './modules/comments.js'
+import { renderComments } from './modules/renderComments.js'
+import { fetchAndRenderComments } from './modules/fetchAndRenderComments.js'
+
+fetchAndRenderComments()
+
+/*
+// Функция загрузки комментариев
+const loadComments = () => {
+    fetch('https://wedev-api.sky.pro/api/v1/ProiZvoDiteLb/comments')
+        .then((response) => response.json())
+        .then((data) => {
+            updateComments(data.comments)
+            renderComments()
+        })
+}
+// Загрузка комментариев при старте
+loadComments()
+*/
+// Сохраняем введённые данные в переменные
+let savedName = ''
+let savedComment = ''
+
+const nameInput = document.querySelector('.add-form-name') //Создаем переменную и ищем элемент с классом .add-form-name
+const commentInput = document.querySelector('.add-form-text') //Создаем переменную и ищем элемент с классом .add-form-text
+const submitButton = document.querySelector('.add-form-button') //Создаем переменную и ищем элемент с классом .add-form-button
+const formContainer = document.querySelector('.add-form')
+
+// Отслеживаем ввод
+nameInput.addEventListener('input', () => (savedName = nameInput.value))
+commentInput.addEventListener(
+    'input',
+    () => (savedComment = commentInput.value),
+)
+
+// Восстанавливаем значения после рендера
+const restoreFormValues = () => {
+    nameInput.value = savedName
+    commentInput.value = savedComment
+}
+restoreFormValues()
+
+// Обработчик события для кнопки "Написать"
+submitButton.addEventListener('click', () => {
+    const name = nameInput.value
+        .trim()
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;') //используем replaceAll() для замены символов < и > на их HTML-сущности &lt; и &gt;
+    const comment = commentInput.value
+        .trim()
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;') //используем replaceAll() для замены символов < и > на их HTML-сущности &lt; и &gt;
+
+    // Проверка на наличие имени и комментария
+    if (name === '' || comment === '') {
+        alert('Пожалуйста, заполните все поля.')
+        return
+    }
+
+    // Создаем новый комментарий
+    const newComment = {
+        name: name,
+        // date: new Date().toLocaleString(),
+        date: new Date().toISOString(),
+        text: comment,
+        likes: 0,
+        isLiked: false,
+    }
+
+    /*  очищение убираем, если очищать поля сразу, а запрос упадёт (400, 500, или пропадёт интернет), пользователь потеряет весь введённый текст.
+    //метод HTTP, который отправляет данные на сервер.
+    // Очищаем поля ПЕРЕД скрытием формы
+    nameInput.value = ''
+    commentInput.value = ''
+    */
+
+    // Сохраняем значения перед скрытием формы
+    savedName = name
+    savedComment = comment
+
+    // Скрываем форму и блокируем кнопку
+    formContainer.style.display = 'none'
+    submitButton.disabled = true
+
+    fetchAndRenderComments
+        .postComment(newComment)
+        .then(() => {
+            savedName = ''
+            savedComment = ''
+            nameInput.value = ''
+            commentInput.value = ''
+        })
+        .catch(() => {
+            // В случае ошибки форма не очищается
+            restoreFormValues()
+        })
+        .finally(() => {
+            // Показываем форму и разблокируем кнопку
+            formContainer.style.display = ''
+            submitButton.disabled = false
+        })
+})
diff --git a/modules/api.js b/modules/api.js
@@ -0,0 +1,61 @@
+const host = 'https://wedev-api.sky.pro/api/v2/ProiZvoDiteLb/comments'
+const authToken =
+    'Bearer asb4c4boc86gasb4c4boc86g37w3cc3bo3b83k4g37k3bk3cg3c03ck4k'
+
+let token = ''
+
+export const updateToken = (newToken) => {
+    token = newToken
+}
+
+export function getComments() {
+    return fetch(host, {
+        method: 'GET',
+        headers: {
+            Authorization: token,
+        },
+    }).then((response) => {
+        return response.json()
+    })
+}
+
+export function postComment({ text }) {
+    return fetch(host, {
+        method: 'POST',
+        headers: {
+            Authorization: token,
+        },
+        body: JSON.stringify({
+            text,
+        }),
+    }).then((response) => {
+        return response.json()
+    })
+}
+
+export function login({ login, password }) {
+    return fetch(`${authToken}/login`, {
+        method: 'POST',
+
+        body: JSON.stringify({
+            login,
+            password,
+        }),
+    }).then((response) => {
+        return response.json()
+    })
+}
+
+export function registration({ login, name, password }) {
+    return fetch(authToken, {
+        method: 'POST',
+        body: JSON.stringify({ login, password, name }),
+    }).then((response) => {
+        return response.json().then((data) => {
+            if (!response.ok) {
+                throw new Error(data.error || 'Ошибка регистрации')
+            }
+            return data
+        })
+    })
+}
diff --git a/modules/comments.js b/modules/comments.js
@@ -0,0 +1,5 @@
+export let comments = []
+
+export const updateComments = (newComments) => {
+    comments = newComments
+}
diff --git a/modules/fetchAndRenderComments.js b/modules/fetchAndRenderComments.js
@@ -0,0 +1,67 @@
+import { updateComments } from './comments.js'
+import { renderComments } from './renderComments.js'
+
+const host = 'https://wedev-api.sky.pro/api/v2/ProiZvoDiteLb/comments'
+
+export const fetchAndRenderComments = () => {
+    const commentsList = document.getElementById('comments-list')
+    commentsList.innerHTML = `<li>Пожалуйста, подождите, загружаю комментарии...</li>`
+
+    return fetch(host)
+        .then((response) => {
+            if (response.status === 500) {
+                throw new Error('500')
+            }
+            return response.json()
+        })
+        .then((data) => {
+            updateComments(data.comments)
+            renderComments()
+        })
+        .catch((error) => {
+            if (error.message === '500') {
+                alert('Не удалось загрузить комментарии, попробуйте позже')
+            } else {
+                alert('Проблемы с соединением, проверьте интернет')
+            }
+        })
+}
+
+// Метод для отправки комментария и повторной загрузки списка
+fetchAndRenderComments.postComment = (newComment) => {
+    const commentsList = document.getElementById('comments-list')
+
+    // Сохраняем старое содержимое списка
+    const previousHtml = commentsList.innerHTML
+
+    commentsList.innerHTML = `<li>Комментарий добавляется...</li>`
+
+    return fetch(host, {
+        method: 'POST',
+        body: JSON.stringify(newComment),
+    })
+        .then((response) => {
+            if (response.status === 400) {
+                throw new Error('400')
+            }
+            if (response.status === 500) {
+                throw new Error('500')
+            }
+            return response.json()
+        })
+        .then(() => fetchAndRenderComments())
+        .catch((error) => {
+            // Восстанавливаем старые комментарии
+            commentsList.innerHTML = previousHtml
+            if (error.message === '400') {
+                alert(
+                    'Поля заполнены некорректно,имя и комментарий должны быть не короче 3х символов',
+                )
+            } else if (error.message === '500') {
+                alert('Сервер сломался, попробуйте позже')
+            } else {
+                alert('Проблемы с соединением, проверьте интернет')
+            }
+            throw error // проброс, чтобы index.js знал, что был сбой
+        })
+}