Feat(JS) Added pagination

ViktorSvertoka · Dec 18, 2023 · 72a2b67 · 72a2b67
1 parent ae05c6f
commit 72a2b67
Show file tree

Hide file tree

Showing 5 changed files with 158 additions and 26 deletions.
diff --git a/src/css/utils/command.css b/src/css/utils/command.css
@@ -83,3 +83,23 @@ body {
     height: 20px;
   }
 }
+
+#pagination-number {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.pagination-button {
+  background-color: transparent;
+  border: none;
+}
+
+.active-btn {
+  background-color: transparent;
+  width: 32px;
+  padding: 5px 12px;
+  border-radius: 18px;
+  border: 1px solid #242424;
+}
diff --git a/src/js/00-api.js b/src/js/00-api.js
@@ -10,22 +10,20 @@ export default class APIService {
     this.page = 0;
   }
 
-  async getExercises(params1, params2) {
+  async getExercises(params1, params2, page) {
     try {
-      this.page += 1;
-
       const response = await axios.get(
-        `${this.baseURL}exercises?${params1}=${params2}&page=1&limit=10`
+        `${this.baseURL}exercises?${params1}=${params2}&page=${page}&limit=10`
       );
-      return response.data.results;
+
+      return response.data;
     } catch (error) {
       console.log(error);
     }
   }
 
   async getSearch(params1, params2, params3) {
     try {
-      this.page += 1;
       const response = await axios.get(
         `${this.baseURL}exercises?${params1}=${params2}&keyword=${params3}&page=1&limit=10`
       );
@@ -38,8 +36,6 @@ export default class APIService {
 
   async getExercisesById(_id) {
     try {
-      this.page += 1;
-
       const response = await axios.get(`${this.baseURL}exercises/${_id}`);
 
       return response.data;
@@ -48,13 +44,13 @@ export default class APIService {
     }
   }
 
-  async getFilter(params) {
+  async getFilter(params, page) {
     try {
       const response = await axios.get(
-        `${this.baseURL}filters?filter=${params}`
+        `${this.baseURL}filters?filter=${params}&page=${page}&limit=12`
       );
 
-      return response.data.results;
+      return response.data;
     } catch (error) {
       console.log(error);
     }

diff --git a/src/js/03-filters.js b/src/js/03-filters.js
@@ -1,25 +1,32 @@
 import APIService from './00-api';
 const apiService = new APIService();
 const listItem = document.querySelector('.js-list');
+const paginationButtons = document.getElementById('pagination-numbers');
+let currentPage = 1;
 
-getFiltersExercises('Muscles');
+getFiltersExercises('Muscles', currentPage);
 
-async function getFiltersExercises(params) {
+async function getFiltersExercises(params, currentPage) {
   try {
-    const data = await apiService.getFilter(params);
+    const { results, totalPages } = await apiService.getFilter(
+      params,
+      currentPage
+    );
 
-    displayExercises(data);
+    setupPagination({ results, totalPages });
+    displayExercises(results);
   } catch (error) {
     console.log(error);
   }
 }
 
-function displayExercises(data) {
-  const markup = data
+function displayExercises(results) {
+  listItem.innerHTML = '';
+  const markup = results
     .map(({ filter, name, imgURL }) => {
       return `
   <li class="filters__item">
-    <img class="filters__img-first" src="${imgURL}" alt="${name}" width="290" height="242"></img>
+    <img class="filters__img-first" src="${imgURL}"></img>
     <div class="filters__wrapper-first">
     <h2 class="filters__title-first">${filter}</h2>
     <p class="filters__text-first">${name}</p>
@@ -36,6 +43,51 @@ document.querySelectorAll('.btnFilters').forEach(button => {
   button.addEventListener('click', () => {
     const params = button.innerText;
     listItem.innerHTML = '';
-    getFiltersExercises(params);
+    currentPage = 1;
+    getFiltersExercises(params, currentPage);
   });
 });
+
+function setupPagination({ results, totalPages }) {
+  paginationButtons.innerHTML = '';
+
+  if (totalPages <= 1) return;
+
+  const params = results[0].filter;
+
+  for (let i = 1; i <= totalPages; i++) {
+    const pageNumber = document.createElement('button');
+    pageNumber.className = 'pagination-button';
+    pageNumber.textContent = i;
+
+    paginationButtons.appendChild(pageNumber);
+
+    pageNumber.addEventListener('click', () => {
+      setCurrentPage(params, i);
+    });
+  }
+  handleActivePageNumber();
+}
+
+async function setCurrentPage(params, i) {
+  currentPage = i;
+  await getFiltersExercises(params, currentPage);
+  handleActivePageNumber();
+  scrollToTop();
+}
+
+const handleActivePageNumber = () => {
+  document.querySelectorAll('.pagination-button').forEach((button, page) => {
+    button.classList.remove('active-btn');
+    if (page + 1 === currentPage) {
+      button.classList.add('active-btn');
+    }
+  });
+};
+
+function scrollToTop() {
+  window.scrollTo({
+    top: 830,
+    behavior: 'auto',
+  });
+}
diff --git a/src/js/12-exercises.js b/src/js/12-exercises.js
@@ -3,9 +3,12 @@ import icons from '../img/sprite.svg';
 
 const apiService = new APIService();
 const listItem = document.querySelector('.js-list');
+const paginationButtons = document.getElementById('pagination-numbers');
 const searchForm = document.querySelector('.search__form');
 const span = document.querySelector('.exersices__span');
 const text = document.querySelector('.exersices__text');
+let currentPage = 1;
+
 listItem.addEventListener('click', onCardClick);
 
 async function onCardClick(event) {
@@ -32,23 +35,29 @@ async function onCardClick(event) {
   localStorage.setItem('paramSearch', JSON.stringify(obj));
 
   try {
-    const data = await apiService.getExercises(filter, name);
-    renderExercises(data);
-    textExercises(data);
+    const { results, totalPages } = await apiService.getExercises(
+      filter,
+      name,
+      currentPage
+    );
+
+    setupPagination({ filter, name, totalPages });
+    renderExercises(results);
+    textExercises(results);
   } catch (error) {
     console.log(error);
   }
 }
 
-function textExercises(data) {
-  text.innerText = `${data[0].bodyPart}`;
+function textExercises(results) {
+  text.innerText = `${results[0].bodyPart}`;
   text.classList.remove('hidden');
   span.classList.remove('hidden');
 }
 
-export function renderExercises(data) {
+export function renderExercises(results) {
   listItem.innerHTML = '';
-  const markup = data
+  const markup = results
     .map(({ _id, rating, name, burnedCalories, bodyPart, target }) => {
       return `
       <li class="filters__item-card">
@@ -100,3 +109,57 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   });
 });
+
+async function setCurrentPage(filter, name, i) {
+  currentPage = i;
+  try {
+    const { results, totalPages } = await apiService.getExercises(
+      filter,
+      name,
+      currentPage
+    );
+
+    setupPagination({ filter, name, totalPages });
+    renderExercises(results);
+    textExercises(results);
+  } catch (error) {
+    console.log(error);
+  }
+  handleActivePageNumber();
+  scrollToTop();
+}
+
+function setupPagination({ filter, name, totalPages }) {
+  paginationButtons.innerHTML = '';
+
+  if (totalPages <= 1) return;
+
+  for (let i = 1; i <= totalPages; i++) {
+    const pageNumber = document.createElement('button');
+    pageNumber.className = 'pagination-button';
+    pageNumber.textContent = i;
+
+    paginationButtons.appendChild(pageNumber);
+
+    pageNumber.addEventListener('click', () => {
+      setCurrentPage(filter, name, i);
+    });
+  }
+  handleActivePageNumber();
+}
+
+const handleActivePageNumber = () => {
+  document.querySelectorAll('.pagination-button').forEach((button, page) => {
+    button.classList.remove('active-btn');
+    if (page + 1 === currentPage) {
+      button.classList.add('active-btn');
+    }
+  });
+};
+
+function scrollToTop() {
+  window.scrollTo({
+    top: 830,
+    behavior: 'auto',
+  });
+}
diff --git a/src/partials/03-exercises.html b/src/partials/03-exercises.html
@@ -84,6 +84,7 @@ <h4 class="aside__white-card-subtitle">Daily norm of sports</h4>
 
     <div class="filters__container">
       <ul class="filters__list js-list"></ul>
+      <div id="pagination-numbers"></div>
     </div>
   </div>
 </section>