diff --git a/index.js b/index.js
index 97e6475..205ea5c 100644
--- a/index.js
+++ b/index.js
@@ -1,5 +1,16 @@
+import { updateComments } from './modules/comments.js';
import { renderComments } from './modules/render.js';
import { addClickBtnAddComment } from './modules/eventsBtnAddComment.js';
-renderComments();
-addClickBtnAddComment();
+const API = 'https://wedev-api.sky.pro/api/v1/arusskov/comments';
+
+fetch(API, { method: 'GET' })
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => {
+ updateComments(data.comments);
+ renderComments();
+ });
+
+addClickBtnAddComment(API);
diff --git a/modules/comments.js b/modules/comments.js
index 2ae4c1f..b2c45f3 100644
--- a/modules/comments.js
+++ b/modules/comments.js
@@ -1,16 +1,5 @@
-export const comments = [
- {
- name: 'Глеб Фокин',
- date: '12.02.22 12:18',
- text: 'Это будет первый комментарий на этой странице',
- countLike: 3,
- isActiveLike: false,
- },
- {
- name: 'Варвара Н.',
- date: '13.02.22 19:22',
- text: 'Мне нравится как оформлена эта страница! ❤',
- countLike: 75,
- isActiveLike: true,
- },
-];
+export let comments = [];
+
+export function updateComments(newComments) {
+ comments = newComments;
+}
diff --git a/modules/date.js b/modules/date.js
index 9ed8ab5..9adc81f 100644
--- a/modules/date.js
+++ b/modules/date.js
@@ -1,5 +1,5 @@
-export function getCurrentDate() {
- let date = new Date();
+export function formatDate(dateString) {
+ let date = new Date(dateString);
let day = String(date.getDate()).padStart(2, 0);
let month = String(date.getMonth() + 1).padStart(2, 0);
let year = String(date.getFullYear()).slice(-2);
diff --git a/modules/eventsBtnAddComment.js b/modules/eventsBtnAddComment.js
index 156f07f..fdc9048 100644
--- a/modules/eventsBtnAddComment.js
+++ b/modules/eventsBtnAddComment.js
@@ -1,6 +1,5 @@
import { renderComments } from './render.js';
-import { comments } from './comments.js';
-import { getCurrentDate } from './date.js';
+import { comments, updateComments } from './comments.js';
import { replaceSymbol } from './replace.js';
let btnWrite = document.querySelector('.add-form-button');
@@ -11,7 +10,7 @@ function removeClassError(input) {
input.classList.remove('input-error');
}
-export function addClickBtnAddComment() {
+export function addClickBtnAddComment(API) {
btnWrite.addEventListener('click', () => {
if (inputName.value === '' || inputText.value === '') {
if (inputName.value === '') {
@@ -24,19 +23,37 @@ export function addClickBtnAddComment() {
setTimeout(() => removeClassError(inputText), 2000);
}
- } else {
- comments.push({
- name: replaceSymbol(inputName.value),
- date: getCurrentDate(),
- text: replaceSymbol(inputText.value),
- countLike: 0,
- isActiveLike: false,
- });
- inputName.value = '';
- inputText.value = '';
+ return;
+ }
- renderComments();
+ if (inputName.value.length < 3 || inputText.value.length < 3) {
+ inputName.value.length < 3
+ ? alert('Имя не должно быть менее 3 символов')
+ : alert('Комментарий не должен быть менее 3 символов');
+ return;
}
+
+ const newComment = {
+ text: replaceSymbol(inputText.value),
+ name: replaceSymbol(inputName.value),
+ };
+
+ inputName.value = '';
+ inputText.value = '';
+
+ fetch(API, {
+ method: 'POST',
+ body: JSON.stringify(newComment),
+ });
+
+ fetch(API, { method: 'GET' })
+ .then((response) => {
+ return response.json();
+ })
+ .then((data) => {
+ updateComments(data.comments);
+ renderComments();
+ });
});
}
diff --git a/modules/eventsComment.js b/modules/eventsComment.js
index 25cb3b4..72391ce 100644
--- a/modules/eventsComment.js
+++ b/modules/eventsComment.js
@@ -8,13 +8,12 @@ export function addClickBtnLike() {
btnLike.addEventListener('click', (event) => {
event.stopPropagation();
- if (comments[btnLike.dataset.index].isActiveLike) {
- comments[btnLike.dataset.index].isActiveLike = false;
- comments[btnLike.dataset.index].countLike--;
- } else {
- comments[btnLike.dataset.index].isActiveLike = true;
- comments[btnLike.dataset.index].countLike++;
- }
+ comments[btnLike.dataset.index].isLiked
+ ? comments[btnLike.dataset.index].likes--
+ : comments[btnLike.dataset.index].likes++;
+
+ comments[btnLike.dataset.index].isLiked =
+ !comments[btnLike.dataset.index].isLiked;
renderComments();
});
@@ -28,7 +27,7 @@ export function addClickComment() {
for (const elementComments of elementsComments) {
elementComments.addEventListener('click', () => {
const index = elementComments.dataset.index;
- inputText.value = `<${comments[index].text}\n${comments[index].name}>`;
+ inputText.value = `<${comments[index].text}\n${comments[index].author.name}>`;
});
}
}
diff --git a/modules/render.js b/modules/render.js
index 4525ad1..b1d9ae2 100644
--- a/modules/render.js
+++ b/modules/render.js
@@ -1,5 +1,6 @@
import { comments } from './comments.js';
import { addClickBtnLike, addClickComment } from './eventsComment.js';
+import { formatDate } from './date.js';
export function renderComments() {
const listComment = document.querySelector('.comments');
@@ -7,25 +8,25 @@ export function renderComments() {
const htmlComments = comments
.map((comment, index) => {
return `
- `;
+ `;
})
.join('');