per front end architecture specs, 'Should use the AirBnB linter confi…

…guration for JavaScript'
GSA · Apr 22, 2019 · b0c02bc · b0c02bc
1 parent 31d65dd
commit b0c02bc
Show file tree

Hide file tree

Showing 4 changed files with 406 additions and 80 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,10 +1,11 @@
 {
-  "extends": "eslint:recommended",
+  "extends": "airbnb-base",
   "env": {
     "browser": true,
     "es6": true
   },
   "rules": {
-    "max-len": "off"
+    "max-len": "off",
+    "func-names": "off"
   }
 }
diff --git a/assets/js/search.js b/assets/js/search.js
@@ -1,85 +1,28 @@
 /* global lunr */
 
-(function(baseurl) {
-  if (baseurl === undefined) {
-    baseurl = '';
-  }
-
-  /**
-   * Initialize the search page content.
-   */
-  function initSearchPage() {
-    const searchTerm = getSearchQuery();
-    if (searchTerm) {
-      const url = baseurl + '/api/v1/pages.json';
-      const xhr = new XMLHttpRequest();
-      xhr.open('GET', url, true);
-      xhr.onload = function() {
-        if (xhr.readyState === 4) {
-          if (xhr.status === 200) {
-            const pagesData = JSON.parse(xhr.responseText);
-            search(pagesData.entries, searchTerm);
-          } else {
-            const $results = document.getElementById('search-results');
-            let output = '<p>There was an error while searching. Please try again.</p>';
-            output += '<p>' + xhr.statusText + '</p>';
-            $results.innerHTML = output;
-          }
-        }
-      };
-      xhr.onerror = function() {
-        const $results = document.getElementById('search-results');
-        let output = '<p>There was an error while searching. Please try again.</p>';
-        output += '<p>' + xhr.statusText + '</p>';
-        $results.innerHTML = output;
-      };
-      xhr.send(null);
-    }
-  }
-
-  function search(pages, searchTerm) {
-    document.getElementById('search-field').setAttribute('value', searchTerm);
-    const lunrIndex = lunr(function() {
-      this.ref('id');
-      this.field('title', { boost: 10 });
-      this.field('body');
-      this.field('category');
-      this.field('tags');
-    });
-
-    for (let index in pages) {
-      lunrIndex.add({
-        id: index,
-        title: pages[index].title,
-        body: pages[index].body,
-        category: pages[index].category,
-        tags: pages[index].tags
-      });
-    }
-
-    const matches = lunrIndex.search(searchTerm);
-
-    displayResults(matches, pages);
-  }
+(function () {
+  const actualBaseUrl = (window.baseurl === undefined) ? '' : window.baseurl;
 
   function getSearchQuery() {
     const rawParams = window.location.search.replace(/^\?/, '');
     const params = rawParams.split('&');
-    for (let index in params) {
-      const keyValuePair = params[index].split('=');
+    let query = '';
+    params.forEach((param) => {
+      const keyValuePair = param.split('=');
       const key = keyValuePair[0];
       const value = keyValuePair[1];
       if (key === 'search') {
-        return decodeURIComponent(value.replace(/\+/g, ' '));
+        query = decodeURIComponent(value.replace(/\+/g, ' '));
       }
-    }
+    });
+    return query;
   }
 
   function displayResults(matches, pages) {
     const $results = document.getElementById('search-results');
     if (matches.length > 0) {
       let output = '<ul class="usa-unstyled-list">';
-      for (let index in matches) {
+      matches.forEach((match, index) => {
         const page = pages[matches[index].ref];
         let icon = '<i class="fa fa-bar-chart flag"></i>';
 
@@ -103,24 +46,81 @@
             icon = '<i class="fa fa-file-text flag"></i>';
         }
 
-        const title = '<h3>' + '<a href="' + page.url + '">' + page.title + '</a></h3>';
-        const copy = '<p>' + page.body.substring(0, 200) + ' ...</p>';
+        const title = `<h3><a href="${page.url}">${page.title}</a></h3>`;
+        const copy = `<p>${page.body.substring(0, 200)} ...</p>`;
         let outputTags = '';
-        //loop through tags and parse
+        // loop through tags and parse
         const tags = Array.isArray(page.tags) ? page.tags : [page.tags];
-        for (let tag of tags) {
-          outputTags += '<span class="usa-label">' + tag + '</span>';
-        }
+        tags.forEach((tag) => {
+          outputTags += `<span class="usa-label">${tag}</span>`;
+        });
 
-        //final output for search
-        output += '<li class="result-item">' + '<div class="usa-grid"><div class="usa-width-one-third">' + icon + '</div>'+ '<div class="usa-width-two-thirds">' + title  + copy + outputTags + '</div></div>' +  '</li> <hr>';
-      }
-      output += "</ul>";
+        // final output for search
+        output += `<li class="result-item"><div class="usa-grid"><div class="usa-width-one-third">${icon}</div><div class="usa-width-two-thirds">${title} ${copy} ${outputTags}</div></div></li><hr>`;
+      });
+      output += '</ul>';
       $results.innerHTML = output;
     } else {
-      $results.innerHTML = "<p>No results found. Try searching something like API, Data, or Code!</p>";
+      $results.innerHTML = '<p>No results found. Try searching something like API, Data, or Code!</p>';
+    }
+  }
+
+  function search(pages, searchTerm) {
+    document.getElementById('search-field').setAttribute('value', searchTerm);
+    const lunrIndex = lunr(function () {
+      this.ref('id');
+      this.field('title', { boost: 10 });
+      this.field('body');
+      this.field('category');
+      this.field('tags');
+    });
+
+    pages.forEach((page, index) => {
+      lunrIndex.add({
+        id: index,
+        title: page.title,
+        body: page.body,
+        category: page.category,
+        tags: page.tags,
+      });
+    });
+
+    const matches = lunrIndex.search(searchTerm);
+
+    displayResults(matches, pages);
+  }
+
+  /**
+   * Initialize the search page content.
+   */
+  function initSearchPage() {
+    const searchTerm = getSearchQuery();
+    if (searchTerm) {
+      const url = `${actualBaseUrl}/api/v1/pages.json`;
+      const xhr = new XMLHttpRequest();
+      xhr.open('GET', url, true);
+      xhr.onload = function () {
+        if (xhr.readyState === 4) {
+          if (xhr.status === 200) {
+            const pagesData = JSON.parse(xhr.responseText);
+            search(pagesData.entries, searchTerm);
+          } else {
+            const $results = document.getElementById('search-results');
+            let output = '<p>There was an error while searching. Please try again.</p>';
+            output += `<p>${xhr.statusText}</p>`;
+            $results.innerHTML = output;
+          }
+        }
+      };
+      xhr.onerror = function () {
+        const $results = document.getElementById('search-results');
+        let output = '<p>There was an error while searching. Please try again.</p>';
+        output += `<p>${xhr.statusText}</p>`;
+        $results.innerHTML = output;
+      };
+      xhr.send(null);
     }
   }
 
   initSearchPage();
-})(window.baseurl);
+}());