feat(thought-leadership): add URL/query parameter to sidebar filters (#…

…279) * Added query param deep linking to thought leadership * lint issues fixed * feat(thought-leadership): updated latest code * feat(thought-leadership): fixed filter issue * review comments fixed --------- Co-authored-by: Putra Bonaccorsi <putra.roeung@gmail.com>
hlxsites · Jul 27, 2023 · 9ecb0fc · 9ecb0fc
1 parent 967f1b4
commit 9ecb0fc
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 5 deletions.
diff --git a/blocks/blog-home/blog-home.js b/blocks/blog-home/blog-home.js
@@ -6,6 +6,59 @@ const NUM_CARDS_SHOWN_AT_A_TIME = 6;
 let loadMoreElement;
 const MODE = 'blog-home';
 
+// Function to update the query parameter with the current state of global object.
+function updateQueryParameter() {
+  const params = new URLSearchParams();
+
+  // Convert global object to a query parameter string
+  // eslint-disable-next-line no-restricted-syntax
+  for (const group in window.queryParam) {
+    if (Object.prototype.hasOwnProperty.call(window.queryParam, group)) {
+      const values = window.queryParam[group];
+      values.forEach((value) => {
+        params.append(group, value);
+      });
+    }
+  }
+
+  // Update the browsers history with new URL
+  if (params.toString()) {
+    window.history.replaceState(null, '', `?${params.toString()}`);
+  } else {
+    window.history.replaceState(null, '', window.location.pathname);
+  }
+}
+
+function pushValueToQueryParameter(group, value) {
+  if (!window.queryParam) {
+    window.queryParam = {};
+  }
+  if (Object.prototype?.hasOwnProperty?.call((window.queryParam || {}), group)) {
+    window.queryParam[group].push(value);
+  } else {
+    window.queryParam[group] = [value];
+  }
+  updateQueryParameter();
+}
+
+function popValueFromQueryParameter(group, value) {
+  if (Object.prototype?.hasOwnProperty?.call((window.queryParam || {}), group)) {
+    const index = window.queryParam[group].indexOf(value);
+    if (index !== -1) {
+      window.queryParam[group].splice(index, 1);
+    }
+  }
+  updateQueryParameter();
+}
+
+function clearAllQueryParam() {
+  // Clear the global object
+  window.queryParam = {};
+
+  // Clear all the query parameter from the URL
+  window.history.replaceState(null, '', window.location.pathname);
+}
+
 export function loadMoreCards(num) {
   if (!loadMoreElement) {
     loadMoreElement = document.querySelector('.load-more');
@@ -82,6 +135,9 @@ function clearFilters(mode) {
 
   updateFiltersCount(null, mode);
   loadMoreCards(7);
+  if (mode !== MODE) {
+    clearAllQueryParam();
+  }
 }
 
 async function createCheckboxList(label, group) {
@@ -118,7 +174,7 @@ function uncheckCheckbox(val, mode) {
   }
 }
 
-function refreshCards(mode) {
+export function refreshCards(mode) {
   let hits = 0;
   const checkboxes = document.querySelectorAll('input[type=checkbox][name=blogFilters]');
   // Convert checkboxes to an array to use filter and map.
@@ -189,6 +245,7 @@ function refreshCards(mode) {
       clearFilters(mode);
       deselectAllCheckboxes();
       clearAllFilters.innerText = '';
+      if (mode !== MODE) clearAllQueryParam();
     });
 
     checkedList.forEach((item) => {
@@ -200,6 +257,7 @@ function refreshCards(mode) {
       selectedValue.addEventListener('click', () => {
         uncheckCheckbox(item.value, mode);
         selectedValue.innerText = '';
+        popValueFromQueryParameter(item.group, item.value);
       });
     });
   } else {
@@ -208,7 +266,18 @@ function refreshCards(mode) {
 }
 
 async function addEventListeners(checkboxes, mode) {
-  checkboxes.forEach((checkbox) => checkbox.addEventListener('change', () => refreshCards(mode)));
+  checkboxes.forEach((checkbox) => checkbox.addEventListener('change', (event) => {
+    const { group } = event.target.dataset;
+    const { value } = event.target;
+    if (mode !== MODE) {
+      if (event.target.checked) {
+        pushValueToQueryParameter(group, value);
+      } else {
+        popValueFromQueryParameter(group, value);
+      }
+    }
+    refreshCards(mode);
+  }));
 }
 
 async function createCategories(categoriesList, mode) {
@@ -319,7 +388,7 @@ export async function createFilters(categories, topics, audiences, contentTypes,
   });
   if (audiences.size) {
     await sortArrayOfObjects(audiences, '', 'set').forEach(async (audience) => {
-      audiencesElement.append(await createCheckboxList(audience));
+      audiencesElement.append(await createCheckboxList(audience, 'audience'));
     });
     filtersMain.append(audiencesElement);
   }
@@ -361,7 +430,7 @@ export async function createFilters(categories, topics, audiences, contentTypes,
   });
   if (topics.size) {
     await sortArrayOfObjects(topics, '', 'set').forEach(async (topic) => {
-      topicsElement.append(await createCheckboxList(topic));
+      topicsElement.append(await createCheckboxList(topic, 'topics'));
     });
     filtersMain.append(topicsElement);
   }

diff --git a/blocks/thought-leadership-home/thought-leadership-home.js b/blocks/thought-leadership-home/thought-leadership-home.js
@@ -1,12 +1,38 @@
+/* eslint-disable no-restricted-syntax */
 import {
   createCard, getSolutionCategoryPages, createTag, getThoughtLeadership,
 } from '../../scripts/scripts.js';
-import { loadMoreCards, createFilters } from '../blog-home/blog-home.js';
+import { loadMoreCards, createFilters, refreshCards } from '../blog-home/blog-home.js';
 
 const NUM_CARDS_SHOWN_AT_A_TIME = 6;
 const MODE = 'thought-leadership-home';
 let loadMoreElement;
 
+function loadPersistedValues() {
+  const params = new URLSearchParams(window.location.search);
+
+  // Clear the existing data from the global object
+  window.queryParam = {};
+
+  // Iterate through the query parameters and update the global object
+  for (const [key, value] of params.entries()) {
+    if (!Object.prototype.hasOwnProperty.call(window.queryParam, key)) {
+      window.queryParam[key] = [];
+    }
+    window.queryParam[key].push(value);
+  }
+
+  const checkboxes = document.querySelectorAll('input[type=checkbox][name=blogFilters]');
+  Array.from(checkboxes).forEach((checkbox) => {
+    const groupName = checkbox.dataset.group;
+    const { value } = checkbox;
+    const isChecked = Object.prototype.hasOwnProperty.call(window.queryParam, groupName)
+      && window.queryParam[groupName].includes(value);
+    checkbox.checked = isChecked;
+  });
+  refreshCards(MODE);
+}
+
 export default async function decorate(block) {
   const category = block.textContent.trim();
   block.textContent = '';
@@ -99,6 +125,7 @@ export default async function decorate(block) {
     blogContent.append(blogCards);
     blogContent.append(loadMoreElement);
     block.append(blogContent);
+    loadPersistedValues();
   } else {
     block.remove();
   }