Merge pull request #64 from konstantin-it-lysenko/Nastya

Nastya
konstantin-it-lysenko · Oct 23, 2023 · 187ab62 · 187ab62
2 parents b6b8d95 + 48dbb26
commit 187ab62
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.5.1",
     "basiclightbox": "^5.0.4",
     "gsap": "^3.12.2",
+    "lodash.throttle": "^4.1.1",
     "notiflix": "^3.2.6",
     "scrollmagic": "^2.0.8",
     "vite-plugin-full-reload": "^1.0.5",

diff --git a/src/js/api-service/exercises-api.js b/src/js/api-service/exercises-api.js
@@ -16,13 +16,18 @@ export async function fetchExercises(category, bodyPart, page = 1) {
   const categoriesUrl = `${BASE_URL}${EXERCISE_ENDPOINT}?${params}`;
   const response = await axios.get(categoriesUrl);
 
-  return response.data.results;
+  return response.data;
 }
 
-export async function fetchAllExercises(category, bodyPart) {
+export async function fetchAllExercises(
+  category,
+  bodyPart,
+  perPage,
+  totalPages
+) {
   const params = new URLSearchParams({
     [category]: bodyPart,
-    limit: 100,
+    limit: perPage * totalPages,
   });
 
   const categoriesUrl = `${BASE_URL}${EXERCISE_ENDPOINT}?${params}`;

diff --git a/src/js/categories.js b/src/js/categories.js
@@ -19,7 +19,8 @@ const refs = {
 const { catsList, catFilterList, exercisesTitleSpan, catFilterInput } = refs;
 
 let categoryName = '';
-
+let test = 'bodypart';
+let respFilterAll = [];
 catFilterList.addEventListener('click', catFilterBtnHandler);
 catFilterInput.addEventListener('input', catInputHandler);
 
@@ -41,16 +42,37 @@ async function catFilterBtnHandler(e) {
     return;
   }
   categoryName = e.target.dataset.name;
+
+  switch (categoryName) {
+    case 'Muscles':
+      test = 'muscles';
+      break;
+    case 'Equipment':
+      test = 'equipment';
+      break;
+    case 'Body parts':
+      test = 'bodypart';
+      break;
+  }
+
+  fetchCategories(categoryName)
+    .then(resp => {
+      const categoryByName = resp.filter(
+        ({ filter }) => filter === categoryName
+      );
+      exercisesTitleSpan.innerHTML = '';
+      catFilterInput.hidden = true;
+      catsList.innerHTML = createCategoryMarkup(categoryByName);
+    })
+    .catch(err => console.log(err));
   try {
     const resp = await fetchCategories(categoryName);
-    const categoryByName = resp.filter(
-      ({ filter }) => filter === categoryName
-    );
+    const categoryByName = resp.filter(({ filter }) => filter === categoryName);
     exercisesTitleSpan.innerHTML = '';
     catFilterInput.hidden = true;
     catsList.innerHTML = createCategoryMarkup(categoryByName);
   } catch {
-    err => console.log(err)
+    err => console.log(err);
   }
 }
 
@@ -69,22 +91,35 @@ async function paginationBtnHandler(e) {
 
 async function catsListBtnHandler(e) {
   try {
-    const currentExercise = e.target.closest('.categories-item').dataset.bodyPart;
-    const getExercises = await fetchExercises(categoryName, currentExercise);
-    catsList.innerHTML = createExercisesMarkup(getExercises);
+    catFilterInput.hidden = false;
+    const currentExercise =
+      e.target.closest('.categories-item').dataset.bodyPart;
+    const getExercises = await fetchExercises(test, currentExercise);
+    const perPage = getExercises.perPage;
+    const totalPages = getExercises.totalPages;
+    catsList.innerHTML = createExercisesMarkup(getExercises.results);
     exercisesTitleSpan.innerHTML = currentExercise;
-
+    respAll = await fetchAllExercises(
+      test,
+      currentExercise,
+      perPage,
+      totalPages
+    );
+    console.log(respAll);
     catFilterInput.hidden = false;
 
-    const exericesBtns = document.querySelectorAll('[data-modal-exercise="open"]');
+    const exericesBtns = document.querySelectorAll(
+      '[data-modal-exercise="open"]'
+    );
 
     exericesBtns.forEach(btn => {
-      btn.addEventListener('click', (event) => {
-        const exerciseId = event.currentTarget.closest('.exercises-item').dataset.exerciseId;
+      btn.addEventListener('click', event => {
+        const exerciseId =
+          event.currentTarget.closest('.exercises-item').dataset.exerciseId;
 
         handleOpenModalClick(event, exerciseId);
-      })
-    })
+      });
+    });
   } catch {
     err => console.log('Err', err);
   }
@@ -93,4 +128,5 @@ async function catsListBtnHandler(e) {
 
 function catInputHandler(e) {
   const filterInput = e.currentTarget.value.toLowerCase().trim('');
+  console.log(respFilterAll);
 }
diff --git a/src/partials/categories.html b/src/partials/categories.html
@@ -1,31 +1,33 @@
 <section class="exercises">
-  <div class="container">
-    <div class="cat-filter-container">
-      <h2 class="exercises-title">
-        Exercises / <span class="exercises-title-span"></span>
-      </h2>
-      <ul class="cat-filter-list">
-        <li class="cat-filter-item">
-          <input type="text" class="cat-filter-input" hidden />
-          <button type="button" class="cat-filter-btn" data-name="Body parts">
-            Body parts
-          </button>
-        </li>
-        <li class="cat-filter-item">
-          <button type="button" class="cat-filter-btn" data-name="Muscles">
-            Muscles
-          </button>
-        </li>
-        <li class="cat-filter-item">
-          <button type="button" class="cat-filter-btn" data-name="Equipment">
-            Equipment
-          </button>
-        </li>
-      </ul>
-    </div>
-    <div class="exercises-wrapper">
-      <load ="./catalog.html" />
-      <load ="./quote.html" />
-    </div>
-  </div>
-</section>
+	<div class="container">
+		<div class="cat-filter-container">
+			<h2 class="exercises-title">
+				Exercises / <span class="exercises-title-span"></span>
+			</h2>
+			<div class="filter-container">
+				<input type="text" class="cat-filter-input" hidden />
+				<ul class="cat-filter-list">
+					<li class="cat-filter-item">
+						<button type="button" class="cat-filter-btn" data-name="Body parts">
+							Body parts
+						</button>
+					</li>
+					<li class="cat-filter-item">
+						<button type="button" class="cat-filter-btn" data-name="Muscles">
+							Muscles
+						</button>
+					</li>
+					<li class="cat-filter-item">
+						<button type="button" class="cat-filter-btn" data-name="Equipment">
+							Equipment
+						</button>
+					</li>
+				</ul>
+			</div>
+		</div>
+		<div class="exercises-wrapper">
+			<load="./catalog.html" />
+			<load="./quote.html" />
+		</div>
+	</div>
+</section>