Feat/search improvements

cigaradvisor/blocks/search-results/search-results.js

@@ -1,88 +1,10 @@
 import { readBlockConfig, loadCSS } from '../../scripts/aem.js';
 
-import { getSearchIndexData, loadPosts, getRelativePath } from '../../scripts/scripts.js';
+import { getRelativePath } from '../../scripts/scripts.js';
 import { renderPage } from '../article-list/article-list.js';
 
 const searchParams = new URLSearchParams(window.location.search);
 
-const IGNORED_TERMS = [];
-
-const doMatch = (property, term) => {
-  const regex = new RegExp(term, 'gi');
-  if (property) {
-    return property.match(regex);
-  }
-  return false;
-};
-
-function filterData(fullTerm, data) {
-  const searchTokens = [];
-  searchTokens.push(fullTerm);
-
-  searchTokens.push(...fullTerm.toLowerCase().split(/\s+/).filter((term) => term && term.length > 2 && term !== fullTerm.toLowerCase()));
-
-  // Object
-  // {
-  //    priority: Number
-  //    article:  article
-  //    count: Number
-  // }
-  const results = [];
-  data.forEach((result) => {
-    const found = {
-      article: result,
-      count: 0,
-    };
-
-    searchTokens.forEach((token) => {
-      if (IGNORED_TERMS.includes(token.toLowerCase().trim())) return;
-      // eslint-disable-next-line no-param-reassign
-      if (token.endsWith('s')) token = token.substring(0, token.length - 1); // Handle potential pluralization of token.
-
-      if (doMatch(result.title, token)) {
-        found.rank ||= 1;
-        found.count += 1;
-      }
-      if (doMatch(result.heading, token)) {
-        found.rank ||= 2;
-        found.count += 1;
-      }
-      if (doMatch(result.description, token)) {
-        found.rank ||= 3;
-        found.count += 1;
-      }
-      if (doMatch(result.blurb, token)) {
-        found.rank ||= 4;
-        found.count += 1;
-      }
-      if (doMatch(result.text, token)) {
-        found.rank ||= 5;
-        found.count += 1;
-      }
-    });
-
-    if (found.count > 0) {
-      results.push(found);
-    }
-  });
-
-  return results.sort((l, r) => {
-    if (l.rank < r.rank) {
-      return -1;
-    }
-    if (l.rank === r.rank) {
-      if (l.count > r.count) {
-        return -1;
-      }
-      if (l.count < r.count) {
-        return 1;
-      }
-      return 0;
-    }
-    return 1; // Left rank is greater than right rank - move it down the list.
-  }).map((r) => r.article);
-}
-
 /**
  * Get details of each search result from the article-index.
  *
@@ -119,6 +41,7 @@ async function handleSearch(searchValue, block, limit) {
     wrapper.replaceChildren(searchSummary);
     return;
   }
+
   // show loading spinner
   const loadingImageContainer = document.createElement('div');
   loadingImageContainer.classList.add('loading-image-container');
@@ -131,47 +54,54 @@ async function handleSearch(searchValue, block, limit) {
   loadingImageContainer.append(spinner);
   block.prepend(loadingImageContainer);
 
-  const data = await getSearchIndexData();
-  const filteredData = filterData(searchValue, data);
-  const articlesCount = filteredData.length;
-
-  const allArticles = await loadPosts();
+  if (window.Worker) {
+    const worker = new Worker(`${window.hlx.codeBasePath}/blocks/search-results/search-worker.js`);
+    worker.onmessage = async function handleWorker(event) {
+      const { results, articles } = event.data;
+      const searchResults = JSON.parse(results);
+      const allArticles = JSON.parse(articles);
+      const articlesCount = searchResults.length;
+
+      searchSummary.textContent = `Your search for "${searchValue}" resulted in ${searchResults.length} articles`;
+      if (searchResults.length === 0) {
+        const noResults = document.createElement('p');
+        noResults.classList.add('no-results');
+        noResults.textContent = 'Sorry, we couldn\'t find the information you requested!';
+        wrapper.replaceChildren(searchSummary);
+        wrapper.append(noResults);
+        loadingImageContainer.style.display = 'none';
+        return;
+      }
+      let filteredDataCopy = [...searchResults];
+
+      // load the first page of results
+      let resultsToShow = filteredDataCopy.slice(0, limit);
+      // eslint-disable-next-line max-len
+      await processSearchResults(resultsToShow, allArticles, wrapper, limit, articlesCount);
+
+      wrapper.prepend(searchSummary);
+
+      // handle pagination. Render each page of results when the hash changes
+      window.addEventListener('hashchange', async () => {
+        const heroSearch = document.querySelector('.hero-search');
+        if (heroSearch) {
+          heroSearch.querySelector('input').value = searchValue;
+        }
+        const url = new URL(window.location.href);
+        const hashParams = new URLSearchParams(url.hash.substring(1));
+        const page = hashParams.get('page');
+        const start = (page - 1) * limit;
+        const end = start + limit;
+        filteredDataCopy = [...searchResults];
+        resultsToShow = filteredDataCopy.slice(start, end);
+        await processSearchResults(resultsToShow, allArticles, wrapper, limit, articlesCount);
+        wrapper.prepend(searchSummary);
+      });
+    };
 
-  searchSummary.textContent = `Your search for "${searchValue}" resulted in ${filteredData.length} articles`;
-  if (filteredData.length === 0) {
-    const noResults = document.createElement('p');
-    noResults.classList.add('no-results');
-    noResults.textContent = 'Sorry, we couldn\'t find the information you requested!';
-    wrapper.replaceChildren(searchSummary);
-    wrapper.append(noResults);
-    loadingImageContainer.style.display = 'none';
-    return;
+    // To perform a search
+    worker.postMessage({ searchValue });
   }
-  let filteredDataCopy = [...filteredData];
-
-  // load the first page of results
-  let resultsToShow = filteredDataCopy.slice(0, limit);
-  // eslint-disable-next-line max-len
-  await processSearchResults(resultsToShow, allArticles, wrapper, limit, articlesCount);
-
-  wrapper.prepend(searchSummary);
-
-  // handle pagination. Render each page of results when the hash changes
-  window.addEventListener('hashchange', async () => {
-    const heroSearch = document.querySelector('.hero-search');
-    if (heroSearch) {
-      heroSearch.querySelector('input').value = searchValue;
-    }
-    const url = new URL(window.location.href);
-    const hashParams = new URLSearchParams(url.hash.substring(1));
-    const page = hashParams.get('page');
-    const start = (page - 1) * limit;
-    const end = start + limit;
-    filteredDataCopy = [...filteredData];
-    resultsToShow = filteredDataCopy.slice(start, end);
-    await processSearchResults(resultsToShow, allArticles, wrapper, limit, articlesCount);
-    wrapper.prepend(searchSummary);
-  });
 }
 
 export default async function decorate(block) {
@@ -196,12 +126,26 @@ export default async function decorate(block) {
 
   block.replaceChildren(articleListWrapper);
 
+  const heroSearch = document.querySelector('.hero-search');
+
   if (searchParams.get('s')) {
     const searchValue = searchParams.get('s').trim();
-    const heroSearch = document.querySelector('.hero-search');
     if (heroSearch) {
       heroSearch.querySelector('input').value = searchValue;
     }
     handleSearch(searchValue, block, limit);
   }
+
+  if (window.location.pathname === '/cigaradvisor/search') {
+    heroSearch.querySelector('form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const searchValue = heroSearch.querySelector('input').value;
+      if (searchValue) {
+        window.history.pushState({ search: searchValue }, '', `?s=${searchValue}`);
+        window.dispatchEvent(new Event('popstate'));
+        articleTeaserWrapper.replaceChildren();
+        handleSearch(searchValue, block, limit);
+      }
+    });
+  }
 }

cigaradvisor/blocks/search-results/search-worker.js

@@ -0,0 +1,156 @@
+/* eslint-disable max-len */
+/* eslint-disable no-restricted-globals */
+const ARTICLE_INDEX_PATH = '/cigaradvisor/index/article-index.json';
+const SEARCH_INDEX_PATH = '/cigaradvisor/index/search-index.json';
+const articleIndexData = [];
+
+const searchIndexData = [];
+/**
+ * Retrieves search index data from the server.
+ * @returns {Promise<Object>} The search index data.
+ */
+async function getSearchIndexData(path = SEARCH_INDEX_PATH, flag = false) {
+  if (searchIndexData.length === 0 || flag) {
+    const resp = await fetch(path);
+    let jsonData = '';
+    if (resp.ok) {
+      jsonData = await resp.json();
+    }
+    jsonData.data.forEach((a) => {
+      searchIndexData.push({ ...a });
+    });
+    // If there are more items to load, load them
+    if ((jsonData.total - jsonData.offset) > jsonData.limit) {
+      const offset = jsonData.offset + jsonData.limit;
+      const indexPath = `${SEARCH_INDEX_PATH}?offset=${offset}&limit=${jsonData.total - offset}`;
+      await getSearchIndexData(indexPath, true);
+    }
+  }
+  // Protected against callers modifying the objects
+  const ret = [];
+  if (searchIndexData) {
+    searchIndexData.forEach((a) => {
+      ret.push({ ...a });
+    });
+  }
+  return ret;
+}
+
+/**
+ * Loads posts from the specified path asynchronously.
+ * @param {string} path - The path to fetch the posts from.
+ * @param {boolean} recurse - Indicates whether to recursively load more articles.
+ * @returns {Promise<Array<Object>>} - A promise that resolves to an array of post objects.
+ */
+async function loadPosts(path = ARTICLE_INDEX_PATH, recurse = false) {
+  if (articleIndexData.length === 0 || recurse) {
+    const resp = await fetch(path);
+    let jsonData = '';
+    if (resp.ok) {
+      jsonData = await resp.json();
+    }
+    jsonData.data.forEach((a) => {
+      articleIndexData.push({ ...a });
+    });
+    // If there are more articles to load, load them
+    if ((jsonData.total - jsonData.offset) > jsonData.limit) {
+      const offset = jsonData.offset + jsonData.limit;
+      const indexPath = `${ARTICLE_INDEX_PATH}?offset=${offset}&limit=${jsonData.total - offset}`;
+      await loadPosts(indexPath, true);
+    }
+  }
+  // Protected against callers modifying the objects
+  const ret = [];
+  if (articleIndexData) {
+    articleIndexData.forEach((a) => {
+      ret.push({ ...a });
+    });
+  }
+  return ret;
+}
+
+const IGNORED_TERMS = [];
+
+const doMatch = (property, term) => {
+  const regex = new RegExp(term, 'gi');
+  if (property) {
+    return property.match(regex);
+  }
+  return false;
+};
+
+function filterData(fullTerm, data) {
+  const searchTokens = [];
+  searchTokens.push(fullTerm);
+
+  searchTokens.push(...fullTerm.toLowerCase().split(/\s+/).filter((term) => term && term.length > 2 && term !== fullTerm.toLowerCase()));
+
+  // Object
+  // {
+  //    priority: Number
+  //    article:  article
+  //    count: Number
+  // }
+  const results = [];
+  data.forEach((result) => {
+    const found = {
+      article: result,
+      count: 0,
+    };
+
+    searchTokens.forEach((token) => {
+      if (IGNORED_TERMS.includes(token.toLowerCase().trim())) return;
+      // eslint-disable-next-line no-param-reassign
+      if (token.endsWith('s')) token = token.substring(0, token.length - 1); // Handle potential pluralization of token.
+
+      if (doMatch(result.title, token)) {
+        found.rank ||= 1;
+        found.count += 1;
+      }
+      if (doMatch(result.heading, token)) {
+        found.rank ||= 2;
+        found.count += 1;
+      }
+      if (doMatch(result.description, token)) {
+        found.rank ||= 3;
+        found.count += 1;
+      }
+      if (doMatch(result.blurb, token)) {
+        found.rank ||= 4;
+        found.count += 1;
+      }
+      if (doMatch(result.text, token)) {
+        found.rank ||= 5;
+        found.count += 1;
+      }
+    });
+
+    if (found.count > 0) {
+      results.push(found);
+    }
+  });
+
+  return results.sort((l, r) => {
+    if (l.rank < r.rank) {
+      return -1;
+    }
+    if (l.rank === r.rank) {
+      if (l.count > r.count) {
+        return -1;
+      }
+      if (l.count < r.count) {
+        return 1;
+      }
+      return 0;
+    }
+    return 1; // Left rank is greater than right rank - move it down the list.
+  }).map((r) => r.article);
+}
+
+self.onmessage = async function handleSearch(event) {
+  const data = await getSearchIndexData();
+  const allArticles = await loadPosts();
+  const { searchValue } = event.data;
+  const searchResults = filterData(searchValue, data);
+  self.postMessage({ results: JSON.stringify(searchResults), articles: JSON.stringify(allArticles) });
+};