From 5c227eefaedc1505a1d76c57e1b4ed0377d274b1 Mon Sep 17 00:00:00 2001
From: Konstantin Lysenko <konstantin.it.lysenko@gmail.com>
Date: Sun, 22 Oct 2023 22:29:40 +0300
Subject: [PATCH] add open modal exercise logic

---
 src/js/categories.js                 | 15 ++++++++++++++-
 src/js/modal-exercise.js             |  5 +++--
 src/js/templates/exercises-markup.js |  4 ++--
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/js/categories.js b/src/js/categories.js
index 5b028c0..4a1509e 100644
--- a/src/js/categories.js
+++ b/src/js/categories.js
@@ -8,6 +8,7 @@ import {
   createCategoryMarkup,
   createPaginationBtnsMarkup,
 } from './templates/categories-markup';
+import { handleOpenModalClick } from './modal-exercise';
 
 const refs = {
   catsList: document.querySelector('.categories-wrapper'),
@@ -16,8 +17,10 @@ const refs = {
   catFilterInput: document.querySelector('.cat-filter-input'),
 };
 const { catsList, catFilterList, exercisesTitleSpan, catFilterInput } = refs;
+
 let categoryName = '';
 let currentExercise;
+
 catFilterList.addEventListener('click', catFilterBtnHandler);
 catFilterInput.addEventListener('input', catInputHandler);
 
@@ -71,13 +74,23 @@ async function catsListBtnHandler(e) {
   }
 
   currentExercise = e.target.closest('.categories-item').dataset.bodyPart;
+  console.log('Exercise', currentExercise);
   const getExercises = await fetchExercises(categoryName, currentExercise);
 
   catsList.innerHTML = createExercisesMarkup(getExercises);
 
   exercisesTitleSpan.innerHTML = currentExercise;
   catFilterInput.hidden = false;
-//   const resp = await fetchAllExercises(categoryName, currentExercise);
+
+  const openModalBtns = document.querySelectorAll('[data-modal-exercise="open"]').forEach(btn => {
+    btn.addEventListener('click', (event) => {
+      const exerciseId = event.currentTarget.closest('.exercises-item').dataset.exerciseId;
+      console.log(exerciseId);
+      handleOpenModalClick(event, exerciseId);
+    })
+  });
+
+  //   const resp = await fetchAllExercises(categoryName, currentExercise);
 }
 
 function catInputHandler(e) {
diff --git a/src/js/modal-exercise.js b/src/js/modal-exercise.js
index e511ea1..c110a2f 100644
--- a/src/js/modal-exercise.js
+++ b/src/js/modal-exercise.js
@@ -17,13 +17,14 @@ openModalExerciseBtnRef.addEventListener('click', handleOpenModalClick);
 
 export async function handleOpenModalClick(
   _,
-  favoriteId = '64f389465ae26083f39b17a2'
+  favoriteId,
 ) {
+  console.log(favoriteId);
   let modalBox = {};
   let ratingValue = 0;
 
   try {
-    const exericiseData = await fetchExerciseModalById();
+    const exericiseData = await fetchExerciseModalById(favoriteId);
     modalBox = new ModalBox(
       createModalExerciseMarkup,
       closeModalSelector,
diff --git a/src/js/templates/exercises-markup.js b/src/js/templates/exercises-markup.js
index a189baf..7440771 100644
--- a/src/js/templates/exercises-markup.js
+++ b/src/js/templates/exercises-markup.js
@@ -3,8 +3,8 @@ export function createExercisesMarkup(data) {
 	<ul class="exer-pagination-list"></ul>`;
 }
 
-function createMarkup({ rating, name, burnedCalories, bodyPart, target }) {
-	return `<li class="exercises-item">
+function createMarkup({ rating, name, burnedCalories, bodyPart, target, _id }) {
+	return `<li class="exercises-item" data-exercise-id="${_id}">
 			<div class="exercises-header">
 				<div class="exercises-meta-container">
 					<p class="exercises-meta">WORKOUT</p>