Bugfix: Add the correct techs to the compare button when loading a page (#1025)

* add the correct techs to the compare button when loading a page

* make comma usage consistent

Author: sarahfossheim

src/js/components/filters.js

@@ -73,7 +73,8 @@ class Filters {
     // url.hash = '#report-content';
 
     /* Update the url */
-    location.href = url;
+    const styledUrl = url.href.replaceAll('%2C', ',');
+    location.href = styledUrl;
   }
 
   /* Update the list of technologies */

src/js/techreport/tableLinked.js

@@ -9,11 +9,11 @@ class TableLinked {
     this.submetric = ''; // TODO: Fetch the default one from somewhere
     this.data = data;
     this.dataArray = [];
-    this.selectedTechs = this.getTechsFromURL()?.split(',') || [];
+    this.selectedTechs = DataUtils.getTechsFromURL()?.split(',') || [];
     this.rows = filters.rows || 10;
 
     this.updateContent();
-    this.updateSelectionText(this.getTechsFromURL());
+    this.updateSelectionText(DataUtils.getTechsFromURL());
 
     const rowCount = document.getElementById('rowsPerPage');
     rowCount?.addEventListener('change', (e) => this.updateRowsPerPage(e));
@@ -35,8 +35,6 @@ class TableLinked {
 
     this.dataArray = this.dataArray.filter(row => row.length > 0);
 
-    console.log('set content', content, this.dataArray);
-
     const isContent = content?.length > 0 || this.dataArray?.length > 0;
 
     if(tbody && isContent) {
@@ -159,11 +157,6 @@ class TableLinked {
     }
   }
 
-  getTechsFromURL() {
-    const url = new URL(window.location);
-    return url.searchParams.get('selected') || null;
-  }
-
   addColumnCheckbox(app) {
     const cell = document.createElement('td');
     const formattedApp = DataUtils.formatAppName(app);
@@ -192,7 +185,7 @@ class TableLinked {
 
   // Set selected content
   isTechSelected(app) {
-    const urlSelected = this.getTechsFromURL();
+    const urlSelected = DataUtils.getTechsFromURL();
     return urlSelected?.includes(app) || false;
   }
 
@@ -243,7 +236,8 @@ class TableLinked {
   updateURL(param, value) {
     const url = new URL(window.location);
     url.searchParams.set(param, value);
-    window.history.replaceState(null, null, url);
+    const styledUrl = url.href.replaceAll('%2C', ',');
+    window.history.replaceState(null, null, styledUrl);
   }
 
   updateSelectionText(allSelectedApps) {

src/js/techreport/utils/data.js

@@ -139,10 +139,12 @@ const fetchCategoryData = (rows, filters, callback) => {
       const lastTechNr = pageNr * rows;
       const paginatedTechs = category?.technologies?.slice(firstTechNr, lastTechNr);
 
-      const technologyFormatted = encodeURI(paginatedTechs?.join('%2C'));
+      const techsFromUrl = getTechsFromURL();
+      const technologyFormatted = paginatedTechs?.join(',');
+      const technologyUrl = encodeURI(techsFromUrl || technologyFormatted);
 
       const compare = document.querySelector('[data-name="selected-apps"]');
-      compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyFormatted}`);
+      compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyUrl}`);
 
       let allResults = {};
       paginatedTechs.forEach(tech => allResults[tech] = []);
@@ -194,6 +196,11 @@ const fetchCategoryData = (rows, filters, callback) => {
     });
 }
 
+const getTechsFromURL = () => {
+  const url = new URL(window.location);
+  return url.searchParams.get('selected') || null;
+}
+
 export const DataUtils = {
   parseVitalsData,
   parseLighthouseData,
@@ -203,4 +210,5 @@ export const DataUtils = {
   getLighthouseScoreCategories,
   formatAppName,
   fetchCategoryData,
+  getTechsFromURL,
 };