Merge pull request #35 from jaiminiprajapati/filter-and-rerender-cate…

…gories-by-category-tags Filter and rerender categories by category tags
jaiminiprajapati · Feb 11, 2024 · f3790c0 · f3790c0
2 parents e0fb802 + 616f85d
commit f3790c0
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -29,23 +29,17 @@ <h3>PULSE</h3>
         </button>
         <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
           <div class="btn-group">
-            <button type="button" class="btn btn-lg btn-secondary dropdown-toggle navCat" data-bs-toggle="dropdown"
-              data-bs-display="static" aria-expanded="false">
-              SEARCH EVENT BY CATEGORIES
-            </button>
-            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start dw">
-              <!-- TODO generate dynamically buttons for the drop down -->
-              <li><button class="dropdown-item" type="button">MUSIC</button></li>
-              <li><button class="dropdown-item" type="button">NIGHTLIFE</button></li>
-              <li><button class="dropdown-item" type="button">PERFORMING & VISUAL ART</button></li>
-              <li><button class="dropdown-item" type="button">NETWORKING</button></li>
-              <li><button class="dropdown-item" type="button">FOOD & DRINK</button></li>
-              <li><button class="dropdown-item" type="button">HOBBIES</button></li>
+            <a id="drop-down-btn" type="button" class="btn btn-lg btn-secondary dropdown-toggle navCat"
+              data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
+              SEARCH BY CATEGORIES
+            </a>
+            <ul id="search-by-category-dropdown-ul" class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start dw">
+              <!-- Events Categories -->
             </ul>
           </div>
           <form class="d-flex">
             <div class="input-group flex-row">
-              <input type="text" class="form-control" id="search" placeholder="enter event/ location">
+              <input type="text" class="form-control" id="search" placeholder="Enter city">
               <button type="button" class="btn btn-secondary btn-group" id="searchBtn"><i
                   class="fa-solid fa-magnifying-glass"></i></button>
             </div>
@@ -84,25 +78,6 @@ <h3>PULSE</h3>
 
   <br>
 
-  <section id="topNav">
-    <!-- TODO move this to nav bar -->
-    <div class="btn-group">
-      <button type="button" class="btn btn-lg btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
-        data-bs-display="static" aria-expanded="false">
-        SEARCH EVENT BY CATEGORIES
-      </button>
-      <ul id="search-by-category-dropdown-ul" class="dropdown-menu dropdown-menu-end dropdown-menu-lg-start">
-        <!-- Categories -->
-        <!-- <li><button class="dropdown-item" type="button">MUSIC</button></li>
-        <li><button class="dropdown-item" type="button">NIGHTLIFE</button></li>
-        <li><button class="dropdown-item" type="button">PERFORMING & VISUAL ART</button></li>
-        <li><button class="dropdown-item" type="button">NETWORKING</button></li>
-        <li><button class="dropdown-item" type="button">FOOD & DRINK</button></li>
-        <li><button class="dropdown-item" type="button">HOBBIES</button></li> -->
-      </ul>
-    </div>
-  </section>
-
   <!-- Events section -->
   <section id="trending">
     <div class="container-fluid p-5">
@@ -398,17 +373,18 @@ <h2>PULSE</h2>
   <script src="js/api/seatgeek.js"></script>
   <script src="js/api/datathistle.js"></script>
 
-  <!-- Resources -->
-  <script src="js/res/utils.js"></script>
-  <script src="js/res/localeStorage.js"></script>
-
   <!-- Creators -->
   <script src="js/creators/upcomingEventCard.js"></script>
   <script src="js/creators/searchBycategoryDropdown.js"></script>
 
   <!-- Renders -->
   <script src="js/renders/upcomingEventsSection.js"></script>
   <script src="js/renders/categorySearchDropdown.js"></script>
+  <script src="js/renders/filteredEventsbyCategory.js"></script>
+
+  <!-- Resources -->
+  <script src="js/res/utils.js"></script>
+  <script src="js/res/localeStorage.js"></script>
 
   <!-- Logic -->
   <script src="script.js"></script>

diff --git a/js/renders/categorySearchDropdown.js b/js/renders/categorySearchDropdown.js
@@ -1,5 +1,5 @@
-function renderSearchByCategoryDropdown() {
-  categories.forEach((categoryName) => {
+function renderSearchByCategoryDropdown(categoriesList) {
+  categoriesList.forEach((categoryName) => {
     CATEGORIES_SEARCH_DROPDOWN_UL.append(
       createSearchByCategoryLiElement(categoryName)
     );

diff --git a/js/renders/filteredEventsbyCategory.js b/js/renders/filteredEventsbyCategory.js
@@ -0,0 +1,19 @@
+function renderEventsBySelectedCategory(categoryName) {
+  console.log(
+    "🚀 ~ renderEventsBySelectedCategory ~ renderEventsBySelectedCategory:",
+    renderEventsBySelectedCategory
+  );
+
+  // Clear existing events
+  EVENTS_SECTION_ROW_CONTAINER.empty();
+
+  events.forEach((event) => {
+    var serializedName = event.info.category;
+
+    if (serializedName === categoryName) {
+      var eventCard = createUpcomingEventCard(event);
+
+      EVENTS_SECTION_ROW_CONTAINER.append(eventCard);
+    }
+  });
+}
diff --git a/script.js b/script.js
@@ -18,26 +18,28 @@ $(document).ready(function () {
     .then(serializedEventCategoriesFromSeatgeek)
     .then(function () {
       renderEventsSection();
-      renderSearchByCategoryDropdown();
-      // console.log(events);
-      // console.log(categories);
+      renderSearchByCategoryDropdown(categories);
     })
     .catch(function (error) {
       console.error(error);
     });
 
-  searchBtn.click(function () {
-    selectedCity = $(inputEl).val();
-
-    // getDataFromSeatgeekByCityName()
-    //   .then(serializedSeatgeekDataByUpcomingEvents)
-    //   .then(serializedEventCategoriesFromSeatgeek)
-    //   .then(function () {
-    //     renderEventsSection();
-    //     // console.log(events);
-    //   })
-    //   .catch(function (error) {
-    //     console.error(error);
-    //   });
+  SEARCH_BTN.click(function () {
+    selectedCity = $(INPUT_EL).val();
+    //TODO add logic
+    getDataFromSeatgeekByCityName(selectedCity)
+      .then(serializedSeatgeekDataByUpcomingEvents)
+      .then(serializedEventCategoriesFromSeatgeek)
+      .then(function () {
+        renderEventsSection();
+        renderSearchByCategoryDropdown(categories);
+      })
+      .catch(function (error) {
+        console.error(error);
+      });
   });
+
+  CATEGORIES_SEARCH_DROPDOWN_UL.onchange = function () {
+    console.log(this.value);
+  };
 });