rating is ready

KristinaHranovska · Feb 27, 2024 · da71372 · da71372
1 parent a4aea19
commit da71372
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 39 deletions.
diff --git 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;
   }
-}
+}
diff --git 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
@@ -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);
+            })
     }
 }