diff --git a/src/js/helper/get-access.js b/src/js/helper/get-access.js index 68d3430..a82024d 100644 --- a/src/js/helper/get-access.js +++ b/src/js/helper/get-access.js @@ -1,6 +1,7 @@ import axios from 'axios'; +import iziToast from 'izitoast'; -export { getAccess, postAccess }; +export { getAccess, patchAccess }; /** * Виконує GET-запит до сервера за вказаною URL з вказаними параметрами. @@ -31,21 +32,43 @@ async function getAccess({ filter, limit, page = 1, typeFilter, id = null }) { } } -/** - * Виконує POST-запит до сервера за вказаною URL з вказаними даними. - * @param {Object} options - Об'єкт з параметрами - * @param {Object} options.userEmail - Дані, які відправляються у POST-запиті (відправляються у форматі JSON) - * @param {string} options.typeFilter - Тип фільтра, який використовується у URL (в данному випадку потрібно вказувати subscription) - * @returns {Promise} Об'єкт Promise, який розрішується у відповідь від сервера. - */ -async function postAccess({ userEmail, typeFilter }) { +async function patchAccess({ id, formData }) { try { - const response = await axios.post( - `https://energyflow.b.goit.study/api/${typeFilter}`, - userEmail - ); + const response = await axios.patch( + `https://energyflow.b.goit.study/api/exercises/${id}/rating`, formData); + iziToast.info({ + message: 'Rating has been updated' + }) return response; } catch (error) { - console.error(error.message); + if (error.response) { + const statusCode = error.response.status; + if (statusCode === 400) { + iziToast.error({ + message: 'Bad request! Please check your data.' + }); + } else if (statusCode === 404) { + iziToast.error({ + message: 'Exercises not found!' + }); + } else if (statusCode === 409) { + iziToast.error({ + message: 'Sorry! But you have already appreciated this exercise' + }); + } else if (statusCode === 500) { + iziToast.error({ + message: 'Internal server error! Please try again later.' + }); + } else { + iziToast.error({ + message: 'An error occurred! Please try again later.' + }); + } + } else { + iziToast.error({ + message: 'An error occurred! Please try again later.' + }); + } + return statusCode; } -} +} \ No newline at end of file diff --git a/src/js/modal-window.js b/src/js/modal-window.js index 7a95625..a44cf06 100644 --- a/src/js/modal-window.js +++ b/src/js/modal-window.js @@ -6,6 +6,7 @@ export const refs = { galleryWindow: document.querySelector('.js-gallery'), ratingBtn: document.querySelector('.js-open-rating'), } +export let idExercises; const raitings = document.querySelectorAll('.raiting') @@ -30,7 +31,7 @@ function openModal(e) { refs.closeIcon.addEventListener('click', closeModal); document.addEventListener('keydown', closeModalByEsc); -function closeModal(e) { +function closeModal() { refs.backdrop.classList.add('is-open'); document.body.style.overflow = ''; @@ -58,6 +59,7 @@ function hiddenWindow() { // Завантаження сторінки function getExercisesObject(id) { + idExercises = id; getAccess({ typeFilter: 'exercises', id: id }) .then(({ data }) => { const { diff --git a/src/js/rating.js b/src/js/rating.js index fdcdb37..13306bf 100644 --- a/src/js/rating.js +++ b/src/js/rating.js @@ -1,69 +1,92 @@ -import { refs } from "./modal-window"; +import { patchAccess } from "./helper/get-access"; +import { idExercises, refs } from "./modal-window"; import iziToast from 'izitoast'; -const numberRating = document.querySelector('.js-rating'); -const labelgInputs = document.querySelectorAll('.rating__label'); -const backdrop = document.querySelector('.backdrop-rating-thumb') -const closeRatingModal = document.querySelector('.js-rating-window'); -const ratingBtn = document.querySelector('.js-open-rating'); +const refsRating = { + numberRating: document.querySelector('.js-rating'), + labelsInputs: document.querySelectorAll('.rating__label'), + backdrop: document.querySelector('.backdrop-rating-thumb'), + closeRatingModal: document.querySelector('.js-rating-window'), + ratingBtn: document.querySelector('.js-open-rating'), + inputEmail: document.querySelector('.js-input'), + textareaComment: document.querySelector('.js-textarea'), + formRating: document.querySelector('.js-form'), +} const pattern = /^\w+(\.\w+)?@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; -const inputEmail = document.querySelector('.js-input'); -const textareaComment = document.querySelector('.js-textarea') -const formRating = document.querySelector('.js-form') +let lastClickedRating = 0; // налаштування зірочок -let lastClickedRating = 0; -labelgInputs.forEach(input => { +refsRating.labelsInputs.forEach(input => { input.addEventListener('mouseover', function (event) { const rating = Number(event.target.getAttribute('data-value')); - numberRating.textContent = rating.toFixed(1); + refsRating.numberRating.textContent = rating.toFixed(1); }); input.addEventListener('mouseout', function () { if (lastClickedRating > 0) { - numberRating.textContent = lastClickedRating.toFixed(1); + refsRating.numberRating.textContent = lastClickedRating.toFixed(1); } else { - numberRating.textContent = '0.0'; + refsRating.numberRating.textContent = '0.0'; } }); input.addEventListener('click', function (event) { lastClickedRating = Number(event.target.getAttribute('data-value')); - numberRating.textContent = lastClickedRating.toFixed(1); + refsRating.numberRating.textContent = lastClickedRating.toFixed(1); }); }); - -ratingBtn.addEventListener('click', openModal); +refsRating.ratingBtn.addEventListener('click', openModal); // Відкриття модалки function openModal() { - backdrop.classList.remove('is-close'); + refsRating.backdrop.classList.remove('is-close'); document.body.style.overflow = 'hidden'; } // Закриття модального вікна -closeRatingModal.addEventListener('click', closeModal); +refsRating.closeRatingModal.addEventListener('click', closeModal); function closeModal() { - backdrop.classList.add('is-close'); + refsRating.backdrop.classList.add('is-close'); document.body.style.overflow = ''; refs.backdrop.classList.remove('is-open'); } -backdrop.addEventListener('click', function (event) { +refsRating.backdrop.addEventListener('click', function (event) { if (event.target === this) { refs.backdrop.classList.remove('is-open'); closeModal(); } }); -formRating.addEventListener('submit', sendRating) +export const timeToClose = () => setTimeout(() => closeModal(), 1500) +// Функція відправки рейтенгу +refsRating.formRating.addEventListener('submit', sendRating) function sendRating(event) { event.preventDefault(); - const email = inputEmail.value.trim(); + + const objectDate = { + rate: lastClickedRating, + email: refsRating.inputEmail.value.trim(), + review: refsRating.textareaComment.value.trim(), + } + + const email = refsRating.inputEmail.value.trim(); if (!pattern.test(email)) { iziToast.error({ message: 'Enter the correct email!' }); + } else { + patchAccess({ + id: idExercises, + formData: objectDate, + }) + .then(() => { + timeToClose(); + refsRating.formRating.reset(); + }) + .catch((error) => { + console.log(error); + }) } } \ No newline at end of file