From b59975cc4b027ab688d29ab6217779690fa0108f Mon Sep 17 00:00:00 2001 From: OlmerOnline Date: Wed, 28 May 2025 23:32:21 +0400 Subject: [PATCH 1/4] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?= =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7?= =?UTF-8?q?=D0=B0=D1=86=D0=B8=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 56 +---------------- index.js | 15 +++-- modules/Login.js | 28 +++++++++ modules/api.js | 73 ++++++++++++++++++++++ modules/eventsBtnAddComment.js | 77 ++++-------------------- modules/eventsComment.js | 22 +------ modules/fetchGetComments.js | 13 ---- modules/localStorage.js | 17 ++++++ modules/{render.js => renderComments.js} | 31 ++++++++-- modules/renderForm.js | 32 ++++++++++ modules/renderLogin.js | 32 ++++++++++ modules/renderRegistration.js | 28 +++++++++ modules/user.js | 5 ++ styles.css | 19 ------ 14 files changed, 267 insertions(+), 181 deletions(-) create mode 100644 modules/Login.js create mode 100644 modules/api.js delete mode 100644 modules/fetchGetComments.js create mode 100644 modules/localStorage.js rename modules/{render.js => renderComments.js} (57%) create mode 100644 modules/renderForm.js create mode 100644 modules/renderLogin.js create mode 100644 modules/renderRegistration.js create mode 100644 modules/user.js diff --git a/index.html b/index.html index 7f1484e..ea73809 100644 --- a/index.html +++ b/index.html @@ -7,61 +7,7 @@ -
- -
- - -
- -
-
-
+
Загрузка ...
diff --git a/index.js b/index.js index 3245e86..2176219 100644 --- a/index.js +++ b/index.js @@ -1,7 +1,10 @@ -import { fetchGetComments } from './modules/fetchGetComments.js'; -import { addClickBtnAddComment } from './modules/eventsBtnAddComment.js'; +import { getComments, getCommentsAuthorazation } from './modules/api.js'; +import { getLocalStorage } from './modules/localStorage.js'; +import { updateUser } from './modules/user.js'; -const API = 'https://wedev-api.sky.pro/api/v1/arusskov/comments'; - -fetchGetComments(API); -addClickBtnAddComment(API); +if (localStorage.getItem('token') !== null) { + updateUser(getLocalStorage()); + getCommentsAuthorazation(); +} else { + getComments(); +} diff --git a/modules/Login.js b/modules/Login.js new file mode 100644 index 0000000..459ea18 --- /dev/null +++ b/modules/Login.js @@ -0,0 +1,28 @@ +import { getCommentsAuthorazation } from './api.js'; +import { setLocalStorage } from './localStorage.js'; +import { updateUser } from './user.js'; + +const hostLogin = 'https://wedev-api.sky.pro/api/user'; + +export function Login(login, password) { + fetch(`${hostLogin}/login`, { + method: 'POST', + headers: { Authorization: 'Bearer ksdfsksdfjfsdjk' }, + body: JSON.stringify({ login, password }), + }) + .then((response) => { + if (response.status === 201) { + return response.json(); + } else { + throw new Error('Не верный логин или пароль'); + } + }) + .then((data) => { + setLocalStorage(data.user); + updateUser(data.user); + getCommentsAuthorazation(); + }) + .catch((error) => { + alert(error.message); + }); +} diff --git a/modules/api.js b/modules/api.js new file mode 100644 index 0000000..bfd7135 --- /dev/null +++ b/modules/api.js @@ -0,0 +1,73 @@ +import { comments, updateComments } from './comments.js'; +import { renderComments } from './renderComments.js'; +import { user } from './user.js'; + +const host = 'https://wedev-api.sky.pro/api/v2/avrusskov-test/comments'; + +export function getComments() { + fetch(host, { method: 'GET' }) + .then((response) => { + return response.json(); + }) + .then((data) => { + updateComments(data.comments); + renderComments(); + }); +} + +export function getCommentsAuthorazation() { + fetch(host, { + method: 'GET', + headers: { Authorization: `Bearer ${user.token}` }, + }) + .then((response) => { + return response.json(); + }) + .then((data) => { + updateComments(data.comments); + renderComments(); + }); +} + +export function postComment(newComment) { + fetch(host, { + method: 'POST', + headers: { Authorization: `Bearer ${user.token}` }, + body: JSON.stringify(newComment), + }) + .then((responce) => { + if (responce.status === 201) { + return getCommentsAuthorazation(); + } else { + if (responce.status === 400) { + throw new Error('400'); + } + } + }) + .catch((error) => { + switch (error.message) { + case '400': + alert('Имя и комментарий должны быть не короче 3 символов'); + break; + default: + alert('Кажется, у вас сломался интернет, попробуйте позже'); + break; + } + }); +} + +export function updateLike(index) { + fetch(`${host}/${comments[index].id}/toggle-like`, { + method: 'POST', + headers: { Authorization: `Bearer ${user.token}` }, + }) + .then((response) => { + return response.json(); + }) + .then((data) => { + comments[index].likes = data.result.likes; + comments[index].isLiked = data.result.isLiked; + + renderComments(); + }); +} diff --git a/modules/eventsBtnAddComment.js b/modules/eventsBtnAddComment.js index ac6a27b..94ec027 100644 --- a/modules/eventsBtnAddComment.js +++ b/modules/eventsBtnAddComment.js @@ -1,23 +1,16 @@ import { replaceSymbol } from './replace.js'; -import { fetchGetComments } from './fetchGetComments.js'; - -let btnWrite = document.querySelector('.add-form-button'); -let inputName = document.querySelector('.add-form-name'); -let inputText = document.querySelector('.add-form-text'); -const formAddComment = document.querySelector('.add-form'); -const container = document.querySelector('.container'); +import { postComment } from './api.js'; function removeClassError(input) { input.classList.remove('input-error'); } -function clickAddComment(API) { - if (inputName.value === '' || inputText.value === '') { - if (inputName.value === '') { - inputName.classList.add('input-error'); +async function clickAddComment() { + const inputText = document.querySelector('.add-form-text'); + const formAddComment = document.querySelector('.add-form'); + const container = document.querySelector('.container'); - setTimeout(() => removeClassError(inputName), 2000); - } + if (inputText.value === '') { if (inputText.value === '') { inputText.classList.add('input-error'); @@ -27,63 +20,19 @@ function clickAddComment(API) { return; } - const newComment = { - text: replaceSymbol(inputText.value), - name: replaceSymbol(inputName.value), - forceError: true, - }; - formAddComment.style.display = 'none'; const loaderText = document.createElement('p'); loaderText.textContent = 'Комментарий добавляется'; container.appendChild(loaderText); - let isCrashServer = false; - - fetch(API, { - method: 'POST', - body: JSON.stringify(newComment), - }) - .then((responce) => { - if (responce.status === 201) { - inputName.value = ''; - inputText.value = ''; - - return fetchGetComments(API); - } else { - if (responce.status === 400) { - throw new Error('400'); - } - - if (responce.status === 500) { - isCrashServer = true; - clickAddComment(API); - } - } - }) - .catch((error) => { - switch (error.message) { - case '400': - alert('Имя и комментарий должны быть не короче 3 символов'); - break; - case '500': - alert('Сервер сломался, попробуй позже'); - break; - default: - alert('Кажется, у вас сломался интернет, попробуйте позже'); - break; - } - }) - .finally(() => { - container.removeChild(loaderText); - - if (!isCrashServer) { - formAddComment.style.display = 'flex'; - } - }); + await postComment({ text: replaceSymbol(inputText.value) }); + console.log('test'); + container.removeChild(loaderText); + formAddComment.style.display = 'flex'; } -export function addClickBtnAddComment(API) { - btnWrite.addEventListener('click', () => clickAddComment(API)); +export function addClickBtnAddComment() { + const btnWrite = document.getElementById('write-button'); + btnWrite.addEventListener('click', clickAddComment); } diff --git a/modules/eventsComment.js b/modules/eventsComment.js index f6135c9..cabd2b2 100644 --- a/modules/eventsComment.js +++ b/modules/eventsComment.js @@ -1,14 +1,6 @@ -import { renderComments } from './render.js'; +import { updateLike } from './api.js'; import { comments } from './comments.js'; -function delay(interval = 300) { - return new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, interval); - }); -} - export function addClickBtnLike() { const arrayBtnLike = document.querySelectorAll('.like-button'); @@ -16,18 +8,8 @@ export function addClickBtnLike() { btnLike.addEventListener('click', (event) => { event.stopPropagation(); - btnLike.classList.add('loading-like'); - console.log(btnLike.classList); - const index = btnLike.dataset.index; - - delay(2000).then(() => { - comments[index].isLiked - ? comments[index].likes-- - : comments[index].likes++; - comments[index].isLiked = !comments[index].isLiked; - renderComments(); - }); + updateLike(index); }); } } diff --git a/modules/fetchGetComments.js b/modules/fetchGetComments.js deleted file mode 100644 index 8048940..0000000 --- a/modules/fetchGetComments.js +++ /dev/null @@ -1,13 +0,0 @@ -import { renderComments } from './render.js'; -import { updateComments } from './comments.js'; - -export function fetchGetComments(API) { - return fetch(API, { method: 'GET' }) - .then((response) => { - return response.json(); - }) - .then((data) => { - updateComments(data.comments); - renderComments(); - }); -} diff --git a/modules/localStorage.js b/modules/localStorage.js new file mode 100644 index 0000000..99e8b6f --- /dev/null +++ b/modules/localStorage.js @@ -0,0 +1,17 @@ +export function setLocalStorage(user) { + for (let key in user) { + localStorage.setItem(key, user[key]); + } +} + +export function getLocalStorage() { + const newUser = {}; + newUser['_id'] = localStorage.getItem('_id'); + newUser['imageUrl'] = localStorage.getItem('imageUrl'); + newUser['login'] = localStorage.getItem('login'); + newUser['name'] = localStorage.getItem('name'); + newUser['password'] = localStorage.getItem('password'); + newUser['token'] = localStorage.getItem('token'); + + return newUser; +} diff --git a/modules/render.js b/modules/renderComments.js similarity index 57% rename from modules/render.js rename to modules/renderComments.js index b1d9ae2..1a71617 100644 --- a/modules/render.js +++ b/modules/renderComments.js @@ -1,9 +1,14 @@ import { comments } from './comments.js'; +import { user } from './user.js'; + +import { renderForm } from './renderForm.js'; +import { renderLogin } from './renderLogin.js'; + import { addClickBtnLike, addClickComment } from './eventsComment.js'; import { formatDate } from './date.js'; export function renderComments() { - const listComment = document.querySelector('.comments'); + const app = document.getElementById('app'); const htmlComments = comments .map((comment, index) => { @@ -30,8 +35,26 @@ export function renderComments() { }) .join(''); - listComment.innerHTML = htmlComments; + app.innerHTML = ` + + `; + + if (Object.keys(user).length === 0) { + const app = document.getElementById('app'); + + const login = document.createElement('button'); + login.classList.add('add-form-button'); + login.textContent = 'Чтобы добавить комментарий, авторизуйтесь'; + login.addEventListener('click', () => { + renderLogin(); + }); - addClickBtnLike(); - addClickComment(); + app.appendChild(login); + } else { + renderForm(); + addClickBtnLike(); + addClickComment(); + } } diff --git a/modules/renderForm.js b/modules/renderForm.js new file mode 100644 index 0000000..88a15a4 --- /dev/null +++ b/modules/renderForm.js @@ -0,0 +1,32 @@ +import { addClickBtnAddComment } from './eventsBtnAddComment.js'; +import { user } from './user.js'; + +export function renderForm() { + const app = document.getElementById('app'); + const form = document.createElement('div'); + + form.innerHTML = ` +
+ + +
+ +
+
+ `; + + app.appendChild(form); + + addClickBtnAddComment(); +} diff --git a/modules/renderLogin.js b/modules/renderLogin.js new file mode 100644 index 0000000..54d9306 --- /dev/null +++ b/modules/renderLogin.js @@ -0,0 +1,32 @@ +import { Login } from './Login.js'; + +export function renderLogin() { + const app = document.getElementById('app'); + + app.innerHTML = ` +
+ + +
+ +
+
`; + + const loginInput = document.getElementById('login-input'); + const passwordInput = document.getElementById('password-input'); + const loginBtn = document.getElementById('login-btn'); + + loginBtn.addEventListener('click', () => { + Login(loginInput.value, passwordInput.value); + }); +} diff --git a/modules/renderRegistration.js b/modules/renderRegistration.js new file mode 100644 index 0000000..9dee903 --- /dev/null +++ b/modules/renderRegistration.js @@ -0,0 +1,28 @@ +export function renderRegistration() { + const app = document.getElementById('app'); + + app.innerHTML = ` +
+ + + +
+ +
+
`; +} diff --git a/modules/user.js b/modules/user.js new file mode 100644 index 0000000..1ba4d6c --- /dev/null +++ b/modules/user.js @@ -0,0 +1,5 @@ +export let user = {}; + +export function updateUser(newUser) { + user = newUser; +} diff --git a/styles.css b/styles.css index 21d5e6a..471bf9e 100644 --- a/styles.css +++ b/styles.css @@ -2,21 +2,6 @@ body { margin: 0; } -@keyframes rotating { - from { - transform: rotate(0deg); - } - 25% { - transform: rotate(30deg); - } - 75% { - transform: rotate(-30deg); - } - to { - transform: rotate(0deg); - } -} - .container { font-family: Helvetica; color: #ffffff; @@ -106,10 +91,6 @@ body { background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.95 0C14.036 0 12.199 0.882834 11 2.26703C9.801 0.882834 7.964 0 6.05 0C2.662 0 0 2.6267 0 5.99455C0 10.1035 3.74 13.4714 9.405 18.5613L11 20L12.595 18.5613C18.26 13.4714 22 10.1035 22 5.99455C22 2.6267 19.338 0 15.95 0Z' fill='%23BCEC30'/%3E%3C/svg%3E"); } -.loading-like { - animation: rotating 2s linear infinite; -} - .add-form { padding: 20px; margin-top: 48px; From 7da2f15c1e6739c42d9013fea93e8ac9a9310ea0 Mon Sep 17 00:00:00 2001 From: OlmerOnline Date: Thu, 29 May 2025 14:11:43 +0400 Subject: [PATCH 2/4] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB?= =?UTF-8?q?=20=D1=80=D0=B5=D0=B3=D0=B8=D1=81=D1=82=D1=80=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D1=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 1 + modules/Login.js | 10 +++++++--- modules/api.js | 3 +++ modules/eventsBtnAddComment.js | 1 - modules/localStorage.js | 13 +++++++++++++ modules/registration.js | 32 ++++++++++++++++++++++++++++++++ modules/renderComments.js | 9 +++++++++ modules/renderHeader.js | 22 ++++++++++++++++++++++ modules/renderLogin.js | 4 ++-- modules/renderRegistration.js | 13 ++++++++++++- 10 files changed, 101 insertions(+), 7 deletions(-) create mode 100644 modules/registration.js create mode 100644 modules/renderHeader.js diff --git a/index.html b/index.html index ea73809..d387258 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
Загрузка ...
diff --git a/modules/Login.js b/modules/Login.js index 459ea18..b118c24 100644 --- a/modules/Login.js +++ b/modules/Login.js @@ -2,10 +2,10 @@ import { getCommentsAuthorazation } from './api.js'; import { setLocalStorage } from './localStorage.js'; import { updateUser } from './user.js'; -const hostLogin = 'https://wedev-api.sky.pro/api/user'; +const hostLogin = 'https://wedev-api.sky.pro/api/user/login'; export function Login(login, password) { - fetch(`${hostLogin}/login`, { + fetch(hostLogin, { method: 'POST', headers: { Authorization: 'Bearer ksdfsksdfjfsdjk' }, body: JSON.stringify({ login, password }), @@ -14,7 +14,11 @@ export function Login(login, password) { if (response.status === 201) { return response.json(); } else { - throw new Error('Не верный логин или пароль'); + if (response.status === 400) { + throw new Error('Не верный логин или пароль'); + } else { + throw new Error('Что то пошло не так'); + } } }) .then((data) => { diff --git a/modules/api.js b/modules/api.js index bfd7135..e4422b9 100644 --- a/modules/api.js +++ b/modules/api.js @@ -1,5 +1,6 @@ import { comments, updateComments } from './comments.js'; import { renderComments } from './renderComments.js'; +import { renderHeader } from './renderHeader.js'; import { user } from './user.js'; const host = 'https://wedev-api.sky.pro/api/v2/avrusskov-test/comments'; @@ -11,6 +12,7 @@ export function getComments() { }) .then((data) => { updateComments(data.comments); + renderHeader(false); renderComments(); }); } @@ -25,6 +27,7 @@ export function getCommentsAuthorazation() { }) .then((data) => { updateComments(data.comments); + renderHeader(true); renderComments(); }); } diff --git a/modules/eventsBtnAddComment.js b/modules/eventsBtnAddComment.js index 94ec027..31ae5c5 100644 --- a/modules/eventsBtnAddComment.js +++ b/modules/eventsBtnAddComment.js @@ -27,7 +27,6 @@ async function clickAddComment() { container.appendChild(loaderText); await postComment({ text: replaceSymbol(inputText.value) }); - console.log('test'); container.removeChild(loaderText); formAddComment.style.display = 'flex'; } diff --git a/modules/localStorage.js b/modules/localStorage.js index 99e8b6f..05cd72e 100644 --- a/modules/localStorage.js +++ b/modules/localStorage.js @@ -1,3 +1,5 @@ +import { updateUser } from './user.js'; + export function setLocalStorage(user) { for (let key in user) { localStorage.setItem(key, user[key]); @@ -15,3 +17,14 @@ export function getLocalStorage() { return newUser; } + +export function clearLocalStorage() { + localStorage.removeItem('_id'); + localStorage.removeItem('imageUrl'); + localStorage.removeItem('login'); + localStorage.removeItem('name'); + localStorage.removeItem('password'); + localStorage.removeItem('token'); + + updateUser({}); +} diff --git a/modules/registration.js b/modules/registration.js new file mode 100644 index 0000000..e73f11e --- /dev/null +++ b/modules/registration.js @@ -0,0 +1,32 @@ +import { getCommentsAuthorazation } from './api.js'; +import { setLocalStorage } from './localStorage.js'; +import { updateUser } from './user.js'; + +const hostRegistration = 'https://wedev-api.sky.pro/api/user'; + +export function Registration(name, login, password) { + fetch(hostRegistration, { + method: 'POST', + headers: { Authorization: 'Bearer ksdfsksdfjfsdjk' }, + body: JSON.stringify({ name, login, password }), + }) + .then((response) => { + if (response.status === 201) { + return response.json(); + } else { + if (response.status === 400) { + throw new Error('Пользователь с таким логином уже есть'); + } else { + throw new Error('Что то пошло не так'); + } + } + }) + .then((data) => { + setLocalStorage(data.user); + updateUser(data.user); + getCommentsAuthorazation(); + }) + .catch((error) => { + alert(error.message); + }); +} diff --git a/modules/renderComments.js b/modules/renderComments.js index 1a71617..16d0818 100644 --- a/modules/renderComments.js +++ b/modules/renderComments.js @@ -3,6 +3,7 @@ import { user } from './user.js'; import { renderForm } from './renderForm.js'; import { renderLogin } from './renderLogin.js'; +import { renderRegistration } from './renderRegistration.js'; import { addClickBtnLike, addClickComment } from './eventsComment.js'; import { formatDate } from './date.js'; @@ -51,7 +52,15 @@ export function renderComments() { renderLogin(); }); + const registaration = document.createElement('button'); + registaration.classList.add('add-form-button'); + registaration.textContent = 'Зарегистрироваться'; + registaration.addEventListener('click', () => { + renderRegistration(); + }); + app.appendChild(login); + app.appendChild(registaration); } else { renderForm(); addClickBtnLike(); diff --git a/modules/renderHeader.js b/modules/renderHeader.js new file mode 100644 index 0000000..3564190 --- /dev/null +++ b/modules/renderHeader.js @@ -0,0 +1,22 @@ +import { getComments } from './api.js'; +import { clearLocalStorage } from './localStorage.js'; +import { user } from './user.js'; + +export function renderHeader(isLogin) { + const header = document.getElementById('header'); + + if (isLogin) { + header.innerHTML = ` +

${user.name}

+ + `; + + const logoutBtn = document.getElementById('logout'); + logoutBtn.addEventListener('click', () => { + clearLocalStorage(); + getComments(); + }); + } else { + header.innerHTML = ''; + } +} diff --git a/modules/renderLogin.js b/modules/renderLogin.js index 54d9306..88a2166 100644 --- a/modules/renderLogin.js +++ b/modules/renderLogin.js @@ -1,4 +1,4 @@ -import { Login } from './Login.js'; +import { Login } from './login.js'; export function renderLogin() { const app = document.getElementById('app'); @@ -18,7 +18,7 @@ export function renderLogin() { placeholder="Введите пароль" />
- +
`; diff --git a/modules/renderRegistration.js b/modules/renderRegistration.js index 9dee903..be81b77 100644 --- a/modules/renderRegistration.js +++ b/modules/renderRegistration.js @@ -1,3 +1,5 @@ +import { Registration } from './registration.js'; + export function renderRegistration() { const app = document.getElementById('app'); @@ -22,7 +24,16 @@ export function renderRegistration() { placeholder="Введите пароль" />
- +
`; + + const nameInput = document.getElementById('name-input'); + const loginInput = document.getElementById('login-input'); + const passwordInput = document.getElementById('password-input'); + const registrationBtn = document.getElementById('registration-btn'); + + registrationBtn.addEventListener('click', () => { + Registration(nameInput.value, loginInput.value, passwordInput.value); + }); } From 65e9186ac2a548b1d3a01cdb14e328932bf4f167 Mon Sep 17 00:00:00 2001 From: OlmerOnline Date: Thu, 29 May 2025 20:02:00 +0400 Subject: [PATCH 3/4] =?UTF-8?q?=D0=9E=D1=82=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B0=20=D0=BE=D1=88=D0=B8=D0=B1=D0=BE=D0=BA,=20=D0=B4?= =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D0=B5=20=D0=B4?= =?UTF-8?q?=D0=BE=D0=BF=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- modules/Login.js | 11 +++++++-- modules/api.js | 2 +- modules/eventsBtnAddComment.js | 6 +---- modules/{replace.js => helpers.js} | 4 +++ modules/registration.js | 11 +++++++-- modules/renderComments.js | 2 +- modules/renderHeader.js | 2 +- modules/renderLogin.js | 28 ++++++++++++++++++++- modules/renderRegistration.js | 39 ++++++++++++++++++++++++++++-- styles.css | 25 +++++++++++++++++++ 11 files changed, 116 insertions(+), 16 deletions(-) rename modules/{replace.js => helpers.js} (55%) diff --git a/index.html b/index.html index d387258..fce00b9 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +
Загрузка ...
diff --git a/modules/Login.js b/modules/Login.js index b118c24..e70b140 100644 --- a/modules/Login.js +++ b/modules/Login.js @@ -15,7 +15,7 @@ export function Login(login, password) { return response.json(); } else { if (response.status === 400) { - throw new Error('Не верный логин или пароль'); + throw new Error('400'); } else { throw new Error('Что то пошло не так'); } @@ -27,6 +27,13 @@ export function Login(login, password) { getCommentsAuthorazation(); }) .catch((error) => { - alert(error.message); + switch (error.message) { + case '400': + alert('Не верный логин или пароль'); + break; + default: + alert('Что то пошло не так'); + break; + } }); } diff --git a/modules/api.js b/modules/api.js index e4422b9..3c38963 100644 --- a/modules/api.js +++ b/modules/api.js @@ -33,7 +33,7 @@ export function getCommentsAuthorazation() { } export function postComment(newComment) { - fetch(host, { + return fetch(host, { method: 'POST', headers: { Authorization: `Bearer ${user.token}` }, body: JSON.stringify(newComment), diff --git a/modules/eventsBtnAddComment.js b/modules/eventsBtnAddComment.js index 31ae5c5..bd5c768 100644 --- a/modules/eventsBtnAddComment.js +++ b/modules/eventsBtnAddComment.js @@ -1,10 +1,6 @@ -import { replaceSymbol } from './replace.js'; +import { removeClassError, replaceSymbol } from './helpers.js'; import { postComment } from './api.js'; -function removeClassError(input) { - input.classList.remove('input-error'); -} - async function clickAddComment() { const inputText = document.querySelector('.add-form-text'); const formAddComment = document.querySelector('.add-form'); diff --git a/modules/replace.js b/modules/helpers.js similarity index 55% rename from modules/replace.js rename to modules/helpers.js index a91d0e1..de232e5 100644 --- a/modules/replace.js +++ b/modules/helpers.js @@ -1,3 +1,7 @@ export function replaceSymbol(text) { return text.replaceAll('<', '˂').replaceAll('>', '˃'); } + +export function removeClassError(input) { + input.classList.remove('input-error'); +} diff --git a/modules/registration.js b/modules/registration.js index e73f11e..86bfe2d 100644 --- a/modules/registration.js +++ b/modules/registration.js @@ -15,7 +15,7 @@ export function Registration(name, login, password) { return response.json(); } else { if (response.status === 400) { - throw new Error('Пользователь с таким логином уже есть'); + throw new Error('400'); } else { throw new Error('Что то пошло не так'); } @@ -27,6 +27,13 @@ export function Registration(name, login, password) { getCommentsAuthorazation(); }) .catch((error) => { - alert(error.message); + switch (error.message) { + case '400': + alert('Пользователь с таким логином уже есть'); + break; + default: + alert('Что то пошло не так'); + break; + } }); } diff --git a/modules/renderComments.js b/modules/renderComments.js index 16d0818..e353fa9 100644 --- a/modules/renderComments.js +++ b/modules/renderComments.js @@ -54,7 +54,7 @@ export function renderComments() { const registaration = document.createElement('button'); registaration.classList.add('add-form-button'); - registaration.textContent = 'Зарегистрироваться'; + registaration.textContent = 'Регистрация'; registaration.addEventListener('click', () => { renderRegistration(); }); diff --git a/modules/renderHeader.js b/modules/renderHeader.js index 3564190..75bef1a 100644 --- a/modules/renderHeader.js +++ b/modules/renderHeader.js @@ -8,7 +8,7 @@ export function renderHeader(isLogin) { if (isLogin) { header.innerHTML = `

${user.name}

- + `; const logoutBtn = document.getElementById('logout'); diff --git a/modules/renderLogin.js b/modules/renderLogin.js index 88a2166..0b978a6 100644 --- a/modules/renderLogin.js +++ b/modules/renderLogin.js @@ -1,6 +1,10 @@ +import { getComments } from './api.js'; +import { removeClassError } from './helpers.js'; import { Login } from './login.js'; export function renderLogin() { + window.scrollTo(0, 0); + const app = document.getElementById('app'); app.innerHTML = ` @@ -17,16 +21,38 @@ export function renderLogin() { class="add-form-name" placeholder="Введите пароль" /> -
+
`; const loginInput = document.getElementById('login-input'); const passwordInput = document.getElementById('password-input'); const loginBtn = document.getElementById('login-btn'); + const backBtn = document.getElementById('back-btn'); loginBtn.addEventListener('click', () => { + if (loginInput.value === '' || passwordInput.value === '') { + if (loginInput.value === '') { + loginInput.classList.add('input-error'); + + setTimeout(() => removeClassError(loginInput), 2000); + } + + if (passwordInput.value === '') { + passwordInput.classList.add('input-error'); + + setTimeout(() => removeClassError(passwordInput), 2000); + } + + return; + } + Login(loginInput.value, passwordInput.value); }); + + backBtn.addEventListener('click', () => { + getComments(); + }); } diff --git a/modules/renderRegistration.js b/modules/renderRegistration.js index be81b77..c9e4782 100644 --- a/modules/renderRegistration.js +++ b/modules/renderRegistration.js @@ -1,6 +1,10 @@ +import { getComments } from './api.js'; +import { removeClassError } from './helpers.js'; import { Registration } from './registration.js'; export function renderRegistration() { + window.scrollTo(0, 0); + const app = document.getElementById('app'); app.innerHTML = ` @@ -23,8 +27,9 @@ export function renderRegistration() { class="add-form-name" placeholder="Введите пароль" /> -
- +
`; @@ -32,8 +37,38 @@ export function renderRegistration() { const loginInput = document.getElementById('login-input'); const passwordInput = document.getElementById('password-input'); const registrationBtn = document.getElementById('registration-btn'); + const backBtn = document.getElementById('back-btn'); registrationBtn.addEventListener('click', () => { + if ( + loginInput.value === '' || + passwordInput.value === '' || + nameInput.value === '' + ) { + if (nameInput.value === '') { + nameInput.classList.add('input-error'); + + setTimeout(() => removeClassError(nameInput), 2000); + } + if (loginInput.value === '') { + loginInput.classList.add('input-error'); + + setTimeout(() => removeClassError(loginInput), 2000); + } + + if (passwordInput.value === '') { + passwordInput.classList.add('input-error'); + + setTimeout(() => removeClassError(passwordInput), 2000); + } + + return; + } + Registration(nameInput.value, loginInput.value, passwordInput.value); }); + + backBtn.addEventListener('click', () => { + getComments(); + }); } diff --git a/styles.css b/styles.css index 471bf9e..601c172 100644 --- a/styles.css +++ b/styles.css @@ -14,6 +14,25 @@ body { min-height: 100vh; } +.header { + font-family: Helvetica; + color: #ffffff; + display: flex; + flex-direction: row; + justify-content: flex-end; + gap: 30px; + background: #202020; +} + +.header-btn { + font-size: 24px; + padding: 10px 20px; + background-color: #bcec30; + border: none; + border-radius: 18px; + cursor: pointer; +} + .comments, .comment { margin: 0; @@ -126,6 +145,12 @@ body { justify-content: flex-end; } +.add-form-login { + display: flex; + flex-direction: row; + justify-content: space-between; +} + .add-form-button { margin-top: 24px; font-size: 24px; From 309b2d26246f1286fa429229ec42dedc099ed1ea Mon Sep 17 00:00:00 2001 From: OlmerOnline Date: Sat, 31 May 2025 09:21:26 +0400 Subject: [PATCH 4/4] =?UTF-8?q?=D0=92=D1=8B=D0=BD=D0=B5=D1=81=20=D0=B8?= =?UTF-8?q?=D0=B7=20=D1=84=D1=83=D0=BD=D0=BA=D1=86=D0=B8=D0=B9=20API=20?= =?UTF-8?q?=D0=BE=D1=82=D1=80=D0=B8=D1=81=D0=BE=D0=B2=D0=BA=D0=B8=20=D0=B8?= =?UTF-8?q?=20localStorage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.js | 11 ++------ modules/Login.js | 12 +-------- modules/api.js | 48 +++++++++------------------------- modules/eventsBtnAddComment.js | 4 +-- modules/eventsComment.js | 16 ++++++++++-- modules/registration.js | 12 +-------- modules/renderComments.js | 28 ++++++++++++++++---- modules/renderHeader.js | 19 ++++++-------- modules/renderLogin.js | 15 +++++++---- modules/renderRegistration.js | 20 ++++++++++---- styles.css | 14 ++++++++++ 11 files changed, 103 insertions(+), 96 deletions(-) diff --git a/index.js b/index.js index 2176219..463e019 100644 --- a/index.js +++ b/index.js @@ -1,10 +1,3 @@ -import { getComments, getCommentsAuthorazation } from './modules/api.js'; -import { getLocalStorage } from './modules/localStorage.js'; -import { updateUser } from './modules/user.js'; +import { renderComments } from './modules/renderComments.js'; -if (localStorage.getItem('token') !== null) { - updateUser(getLocalStorage()); - getCommentsAuthorazation(); -} else { - getComments(); -} +renderComments(); diff --git a/modules/Login.js b/modules/Login.js index e70b140..8726939 100644 --- a/modules/Login.js +++ b/modules/Login.js @@ -1,13 +1,8 @@ -import { getCommentsAuthorazation } from './api.js'; -import { setLocalStorage } from './localStorage.js'; -import { updateUser } from './user.js'; - const hostLogin = 'https://wedev-api.sky.pro/api/user/login'; export function Login(login, password) { - fetch(hostLogin, { + return fetch(hostLogin, { method: 'POST', - headers: { Authorization: 'Bearer ksdfsksdfjfsdjk' }, body: JSON.stringify({ login, password }), }) .then((response) => { @@ -21,11 +16,6 @@ export function Login(login, password) { } } }) - .then((data) => { - setLocalStorage(data.user); - updateUser(data.user); - getCommentsAuthorazation(); - }) .catch((error) => { switch (error.message) { case '400': diff --git a/modules/api.js b/modules/api.js index 3c38963..20333ca 100644 --- a/modules/api.js +++ b/modules/api.js @@ -1,35 +1,20 @@ -import { comments, updateComments } from './comments.js'; -import { renderComments } from './renderComments.js'; -import { renderHeader } from './renderHeader.js'; import { user } from './user.js'; const host = 'https://wedev-api.sky.pro/api/v2/avrusskov-test/comments'; export function getComments() { - fetch(host, { method: 'GET' }) - .then((response) => { - return response.json(); - }) - .then((data) => { - updateComments(data.comments); - renderHeader(false); - renderComments(); - }); + return fetch(host, { method: 'GET' }).then((response) => { + return response.json(); + }); } export function getCommentsAuthorazation() { - fetch(host, { + return fetch(host, { method: 'GET', headers: { Authorization: `Bearer ${user.token}` }, - }) - .then((response) => { - return response.json(); - }) - .then((data) => { - updateComments(data.comments); - renderHeader(true); - renderComments(); - }); + }).then((response) => { + return response.json(); + }); } export function postComment(newComment) { @@ -40,7 +25,7 @@ export function postComment(newComment) { }) .then((responce) => { if (responce.status === 201) { - return getCommentsAuthorazation(); + return; } else { if (responce.status === 400) { throw new Error('400'); @@ -59,18 +44,11 @@ export function postComment(newComment) { }); } -export function updateLike(index) { - fetch(`${host}/${comments[index].id}/toggle-like`, { +export function updateLike(id) { + return fetch(`${host}/${id}/toggle-like`, { method: 'POST', headers: { Authorization: `Bearer ${user.token}` }, - }) - .then((response) => { - return response.json(); - }) - .then((data) => { - comments[index].likes = data.result.likes; - comments[index].isLiked = data.result.isLiked; - - renderComments(); - }); + }).then((response) => { + return response.json(); + }); } diff --git a/modules/eventsBtnAddComment.js b/modules/eventsBtnAddComment.js index bd5c768..0f06f03 100644 --- a/modules/eventsBtnAddComment.js +++ b/modules/eventsBtnAddComment.js @@ -1,5 +1,6 @@ import { removeClassError, replaceSymbol } from './helpers.js'; import { postComment } from './api.js'; +import { renderComments } from './renderComments.js'; async function clickAddComment() { const inputText = document.querySelector('.add-form-text'); @@ -23,8 +24,7 @@ async function clickAddComment() { container.appendChild(loaderText); await postComment({ text: replaceSymbol(inputText.value) }); - container.removeChild(loaderText); - formAddComment.style.display = 'flex'; + renderComments(); } export function addClickBtnAddComment() { diff --git a/modules/eventsComment.js b/modules/eventsComment.js index cabd2b2..4c5cc91 100644 --- a/modules/eventsComment.js +++ b/modules/eventsComment.js @@ -1,5 +1,7 @@ import { updateLike } from './api.js'; import { comments } from './comments.js'; +import { renderComments } from './renderComments.js'; +import { user } from './user.js'; export function addClickBtnLike() { const arrayBtnLike = document.querySelectorAll('.like-button'); @@ -8,8 +10,18 @@ export function addClickBtnLike() { btnLike.addEventListener('click', (event) => { event.stopPropagation(); - const index = btnLike.dataset.index; - updateLike(index); + if (Object.keys(user).length !== 0) { + const index = btnLike.dataset.index; + + updateLike(comments[index].id).then((data) => { + comments[index].likes = data.result.likes; + comments[index].isLiked = data.result.isLiked; + + renderComments(); + }); + } else { + alert('Нужно авторизоваться'); + } }); } } diff --git a/modules/registration.js b/modules/registration.js index 86bfe2d..1677ecf 100644 --- a/modules/registration.js +++ b/modules/registration.js @@ -1,13 +1,8 @@ -import { getCommentsAuthorazation } from './api.js'; -import { setLocalStorage } from './localStorage.js'; -import { updateUser } from './user.js'; - const hostRegistration = 'https://wedev-api.sky.pro/api/user'; export function Registration(name, login, password) { - fetch(hostRegistration, { + return fetch(hostRegistration, { method: 'POST', - headers: { Authorization: 'Bearer ksdfsksdfjfsdjk' }, body: JSON.stringify({ name, login, password }), }) .then((response) => { @@ -21,11 +16,6 @@ export function Registration(name, login, password) { } } }) - .then((data) => { - setLocalStorage(data.user); - updateUser(data.user); - getCommentsAuthorazation(); - }) .catch((error) => { switch (error.message) { case '400': diff --git a/modules/renderComments.js b/modules/renderComments.js index e353fa9..d2317e4 100644 --- a/modules/renderComments.js +++ b/modules/renderComments.js @@ -1,5 +1,4 @@ -import { comments } from './comments.js'; -import { user } from './user.js'; +import { comments, updateComments } from './comments.js'; import { renderForm } from './renderForm.js'; import { renderLogin } from './renderLogin.js'; @@ -7,8 +6,26 @@ import { renderRegistration } from './renderRegistration.js'; import { addClickBtnLike, addClickComment } from './eventsComment.js'; import { formatDate } from './date.js'; +import { getComments, getCommentsAuthorazation } from './api.js'; +import { renderHeader } from './renderHeader.js'; +import { getLocalStorage } from './localStorage.js'; +import { updateUser } from './user.js'; + +export async function renderComments() { + if (localStorage.getItem('token') !== null) { + updateUser(getLocalStorage()); + + await getCommentsAuthorazation().then((data) => { + updateComments(data.comments); + }); + + renderHeader(); + } else { + await getComments().then((data) => { + updateComments(data.comments); + }); + } -export function renderComments() { const app = document.getElementById('app'); const htmlComments = comments @@ -42,7 +59,7 @@ export function renderComments() { `; - if (Object.keys(user).length === 0) { + if (localStorage.getItem('token') === null) { const app = document.getElementById('app'); const login = document.createElement('button'); @@ -63,7 +80,8 @@ export function renderComments() { app.appendChild(registaration); } else { renderForm(); - addClickBtnLike(); addClickComment(); } + + addClickBtnLike(); } diff --git a/modules/renderHeader.js b/modules/renderHeader.js index 75bef1a..89fa4dd 100644 --- a/modules/renderHeader.js +++ b/modules/renderHeader.js @@ -1,22 +1,19 @@ -import { getComments } from './api.js'; import { clearLocalStorage } from './localStorage.js'; +import { renderComments } from './renderComments.js'; import { user } from './user.js'; -export function renderHeader(isLogin) { +export function renderHeader() { const header = document.getElementById('header'); - if (isLogin) { - header.innerHTML = ` + header.innerHTML = `

${user.name}

`; - const logoutBtn = document.getElementById('logout'); - logoutBtn.addEventListener('click', () => { - clearLocalStorage(); - getComments(); - }); - } else { + const logoutBtn = document.getElementById('logout'); + logoutBtn.addEventListener('click', () => { + clearLocalStorage(); header.innerHTML = ''; - } + renderComments(); + }); } diff --git a/modules/renderLogin.js b/modules/renderLogin.js index 0b978a6..b6e161b 100644 --- a/modules/renderLogin.js +++ b/modules/renderLogin.js @@ -1,6 +1,8 @@ -import { getComments } from './api.js'; import { removeClassError } from './helpers.js'; +import { setLocalStorage } from './localStorage.js'; import { Login } from './login.js'; +import { renderComments } from './renderComments.js'; +import { updateUser } from './user.js'; export function renderLogin() { window.scrollTo(0, 0); @@ -18,7 +20,7 @@ export function renderLogin() {