feat(app-degree-pages): allow list view including both GR and UGCM c…

packages/app-degree-pages/src/components/ListingPage/index.jsx

@@ -91,7 +91,7 @@ const ListingPage = ({
   const [dataInitView, setDataInitView] = useState([]);
   const [searchKeyword, setSearchKeyword] = useState("");
   // start set default data view
-  const settingDefaultView = programList.settings?.defaultView;
+  const settingDefaultView = programList?.settings?.defaultView;
   const defaultView = [LIST_VIEW_ID, GRID_VIEW_ID].includes(settingDefaultView)
     ? settingDefaultView
     : LIST_VIEW_ID;

packages/app-degree-pages/src/components/ListingPage/index.stories.jsx

@@ -187,6 +187,41 @@ DefaultWithCertificate.args = {
   },
 };
 
+/**
+ * @type {{ args: AppProps }}
+ */
+export const GradWithCertificate = Template.bind({});
+GradWithCertificate.args = {
+  ...defaultArgs,
+  introContent: null,
+  programList: {
+    ...defaultArgs.programList,
+    dataSource: {
+      ...defaultArgs.programList.dataSource,
+      program: "graduate",
+      cert: "true",
+      showInactivePrograms: "true",
+    },
+  },
+};
+/**
+ * @type {{ args: AppProps }}
+ */
+export const AllWithCertificate = Template.bind({});
+AllWithCertificate.args = {
+  ...defaultArgs,
+  introContent: null,
+  programList: {
+    ...defaultArgs.programList,
+    dataSource: {
+      ...defaultArgs.programList.dataSource,
+      program: "all",
+      cert: "true",
+      showInactivePrograms: "true",
+    },
+  },
+};
+
 /**
  * @type {{ args: AppProps}}
  */

packages/app-degree-pages/src/core/services/degree-data-manager-service.js

@@ -80,7 +80,7 @@ function filterData({
 
     // If showing certificates is enabled and the program is graduate,
     // include it only if it's a minor or certificate.
-    if (showCerts === "true" && program === "graduate") {
+    if (showCerts === "true") {
       return resolver.isMinorOrCertificate();
     }
 

packages/app-degree-pages/src/core/types/listing-page-types.js

@@ -52,7 +52,7 @@
  * @property {"true" | "false"} [init]
  * @property {"true" | "false"} [cert]
  * @property {string} [fields]
- * @property {"undergrad" | "graduate"} [program]
+ * @property {"undergrad" | "graduate" | "all"} [program]
  * @property {string} [collegeAcadOrg]
  * @property {string} [acadPlan]
  * @property {string} [departmentCode]

packages/app-degree-pages/src/core/types/shared-local-types.js

@@ -79,7 +79,7 @@ const DegreeDataPropResolverServiceType = degreeDataPropResolverService({});
  *    showInactivePrograms?: boolean | "true" | "false"
  *    blacklistAcadPlans?: Array
  *    showCerts?: "true" | "false"
- *    program: "undergrad" | "graduate"
+ *    program: "undergrad" | "graduate" | "all"
  * }} FiltersState
  */
 

packages/app-degree-pages/src/core/utils/http-url-resolver.js

@@ -22,7 +22,11 @@ function urlResolver(dataSource, defaultDataSource) {
     // to accommodate Data Potluck API changes.
     const { program } = httpParameters;
 
-    if (httpParameters.cert === "true" && program === "undergrad") {
+    if (httpParameters.cert === "true" && program === "all") {
+      httpParameters["degreeType"] = "GR,UGCM";
+    } else if (program === "all") {
+      httpParameters["degreeType"] = "GR,UG";
+    } else if (httpParameters.cert === "true" && program === "undergrad") {
       httpParameters["degreeType"] = "UGCM";
     } else if (program === "graduate") {
       httpParameters["degreeType"] = "GR";
@@ -47,20 +51,34 @@ function urlResolver(dataSource, defaultDataSource) {
 
   */
 
-  const { endpoint, include, ...keyValues } = httpParameters;
+  const { endpoint, ...keyValues } = httpParameters;
 
-  const formattedIncludes = include
-    .split(",")
-    .map(item => `include=${item.trim()}`)
-    .join("&");
+  const splitParamsContainingCommas = (paramName, csvString) => {
+    // httpParameters that are arrays format to send to API should have 1 paramName seperated by commas
+    // input: paramName = "foo", csvString = ["bar", "baz"]
+    // output: "foo=bar,baz"
+    if (Array.isArray(csvString)) {
+      return `${paramName}=${csvString}`;
+    }
+    // If the paramName is a string already including commas, we need to split it into multiple params
+    // input: paramName = "foo", csvString = "bar,baz"
+    // output: "foo=bar&foo=baz"
+    return csvString
+      .split(",")
+      .map(item => `${paramName}=${item.trim()}`)
+      .join("&");
+  };
 
   const params = Object.keys(keyValues).reduce(
     (accumulator, paramName) =>
-      `${accumulator}&${paramName}=${httpParameters[paramName]}`,
+      `${accumulator}&${splitParamsContainingCommas(
+        paramName,
+        httpParameters[paramName]
+      )}`,
     ""
   );
 
-  return `${endpoint}?${params}&${formattedIncludes}`;
+  return `${endpoint}?${params}`;
 }
 
 export { urlResolver };