refactor: use URLSearchParams to manage params (#38)

edx · Aug 16, 2023 · 75ae84a · 75ae84a
1 parent 9a1fa54
commit 75ae84a
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 21 deletions.
diff --git a/src/skills-builder/skills-builder-modal/view-results/data/constants.js b/src/skills-builder/skills-builder-modal/view-results/data/constants.js
@@ -1,9 +1,15 @@
 export const COURSE = 'course';
 export const BOOT_CAMP = 'boot_camp';
 export const EXECUTIVE_EDUCATION = 'executive_education';
-export const DEGREE = '2U_degrees';
+export const DEGREE = '2U_degree';
 export const PROGRAM = 'program';
 
+export const COURSE_PARAM = 'course';
+export const BOOT_CAMP_PARAM = 'boot_camp';
+export const EXECUTIVE_EDUCATION_PARAM = 'executive_education';
+export const DEGREE_PARAM = '2U_degrees';
+export const PROGRAM_PARAM = 'program';
+
 // This array is used to determine the validity of product types as they are passed through the query string
 export const productTypeNames = [
   DEGREE,
@@ -12,3 +18,11 @@ export const productTypeNames = [
   PROGRAM,
   COURSE,
 ];
+
+export const productTypeParams = {};
+
+productTypeParams[COURSE_PARAM] = COURSE;
+productTypeParams[BOOT_CAMP_PARAM] = BOOT_CAMP;
+productTypeParams[EXECUTIVE_EDUCATION_PARAM] = EXECUTIVE_EDUCATION;
+productTypeParams[DEGREE_PARAM] = DEGREE;
+productTypeParams[PROGRAM_PARAM] = PROGRAM;
diff --git a/src/skills-builder/skills-builder-modal/view-results/data/hooks.js b/src/skills-builder/skills-builder-modal/view-results/data/hooks.js
@@ -1,5 +1,5 @@
 import { useLocation } from 'react-router-dom';
-import { productTypeNames as acceptedProductTypes, COURSE } from './constants';
+import { productTypeParams, COURSE } from './constants';
 
 const defaultSetting = [COURSE];
 
@@ -13,27 +13,18 @@ const defaultSetting = [COURSE];
 export const useProductTypes = () => {
   const { search } = useLocation();
   const checkedTypes = [];
+  const searchParams = new URLSearchParams(search);
+  const productTypes = searchParams.get('product_types');
 
-  if (search) {
-    // remove the "?" and split the query string at "="
-    const splitString = search.slice(1).split('&')[0].split('=');
-
-    // if the key is not "product_types", use a default setting
-    if (splitString[0] !== 'product_types') {
-      return defaultSetting;
-    }
-
-    // split productTypes string into an array at ","
-    const queryProductTypes = splitString[1]?.split(',');
-
+  if (productTypes) {
+    const productTypesArray = productTypes.split(',');
     // compare each product type from the query string with a list of accepted product types
-    queryProductTypes.forEach(productType => {
-      if (acceptedProductTypes.includes(productType)) {
-        checkedTypes.push(productType);
+    productTypesArray.forEach(productParam => {
+      if (productParam in productTypeParams) {
+        checkedTypes.push(productTypeParams[productParam]);
       }
     });
   }
-
   // if no types were set, use default setting
   return checkedTypes.length > 0 ? checkedTypes : defaultSetting;
 };
diff --git a/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx b/src/skills-builder/skills-builder-modal/view-results/test/ViewResults.test.jsx
@@ -40,7 +40,7 @@ describe('view-results', () => {
 
   describe('user interface', () => {
     beforeAll(() => {
-      useProductTypes.mockImplementation(() => (['2U_degrees', 'boot_camp', 'executive_education', 'program', 'course']));
+      useProductTypes.mockImplementation(() => (['2U_degree', 'boot_camp', 'executive_education', 'program', 'course']));
     });
 
     beforeEach(async () => {
@@ -126,7 +126,7 @@ describe('view-results', () => {
           page: 'skills_builder',
           label: 'MONS101',
           position: 0,
-          product_line: '2U_degrees',
+          product_line: '2U_degree',
           selected_recommendations: {
             job_id: 0,
             job_name: 'Prospector',

diff --git a/src/skills-builder/test/__mocks__/jobSkills.mockData.js b/src/skills-builder/test/__mocks__/jobSkills.mockData.js
@@ -75,7 +75,7 @@ export const mockData = {
       { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
       { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
-    '2U_degrees': [
+    '2U_degree': [
       { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
       { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],