refactor: change event schema (#28)

Co-authored-by: Maxwell Frank <[email protected]>
edx · Aug 3, 2023 · 5f8e8a9 · 5f8e8a9
1 parent 374f695
commit 5f8e8a9
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 32 deletions.
diff --git a/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx b/src/skills-builder/skills-builder-modal/view-results/ProductCardGrid.jsx
@@ -21,16 +21,17 @@ const ProductCardGrid = ({
           handleCourseCardClick={handleCourseCardClick}
           rec={rec}
           productType={productTypeName}
-          indexInList={index}
+          position={index}
         />
       ))
     ) : (
-      productTypeRecommendations?.slice(0, 4).map(rec => (
+      productTypeRecommendations?.slice(0, 4).map((rec, index) => (
         <RecommendationCard
           key={rec.uuid}
           handleCourseCardClick={handleCourseCardClick}
           rec={rec}
           productType={productTypeName}
+          position={index}
         />
       ))
     )}

diff --git a/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx b/src/skills-builder/skills-builder-modal/view-results/RecommendationCard.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import cardImageCapFallbackSrc from '../../images/card-imagecap-fallback.png';
 
 const RecommendationCard = ({
-  rec, productType, handleCourseCardClick, indexInList,
+  rec, productType, handleCourseCardClick, position,
 }) => {
   const {
     card_image_url: cardImageUrl,
@@ -17,6 +17,7 @@ const RecommendationCard = ({
     organization_logo_override: organizationLogoOverride,
     partner,
     title,
+    uuid,
   } = rec;
 
   const schoolName = organizationShortCodeOverride
@@ -25,14 +26,17 @@ const RecommendationCard = ({
   const schoolLogoUrl = organizationLogoOverride
   || owners[0].logoImageUrl;
 
+  // If this label changes, make sure to duplicate the change in extractProductKeys.js
+  const productLabel = courseKey || `${title} [${uuid}]`;
+
   return (
     <Card
       as={Hyperlink}
       target="_blank"
       showLaunchIcon={false}
       destination={marketingUrl}
       className="product-card"
-      onClick={() => handleCourseCardClick(courseKey, productType, indexInList)}
+      onClick={() => handleCourseCardClick(productLabel, productType, position)}
     >
       <Card.ImageCap
         src={cardImageUrl}
@@ -65,14 +69,11 @@ RecommendationCard.propTypes = {
     active_run_key: PropTypes.string,
     organization_short_code_override: PropTypes.string,
     organization_logo_override: PropTypes.string,
+    uuid: PropTypes.string.isRequired,
   }).isRequired,
   productType: PropTypes.string.isRequired,
   handleCourseCardClick: PropTypes.func.isRequired,
-  indexInList: PropTypes.number,
-};
-
-RecommendationCard.defaultProps = {
-  indexInList: 0,
+  position: PropTypes.number.isRequired,
 };
 
 export default RecommendationCard;
diff --git a/src/skills-builder/skills-builder-modal/view-results/RecommendationStack.jsx b/src/skills-builder/skills-builder-modal/view-results/RecommendationStack.jsx
@@ -12,7 +12,7 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
   const { expandedList } = state;
   const { id: jobId, name: jobName, recommendations } = selectedRecommendations;
 
-  const handleCourseCardClick = (courseKey, productTypeName, index) => {
+  const handleCourseCardClick = (productLabel, productTypeName, index) => {
     // check to see if the grid of recommendations for this product line has been expanded
     if (expandedList.includes(productTypeName)) {
       // fire expanded click event
@@ -22,9 +22,9 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
           app_name: 'skills_builder',
           category: 'skills_builder',
           page: 'skills_builder',
-          courserun_key: courseKey,
+          label: productLabel,
           product_line: productTypeName,
-          index_in_list: index,
+          position: index,
           selected_recommendations: {
             job_id: jobId,
             job_name: jobName,
@@ -41,8 +41,9 @@ const RecommendationStack = ({ selectedRecommendations, productTypeNames }) => {
         app_name: 'skills_builder',
         category: 'skills_builder',
         page: 'skills_builder',
-        courserun_key: courseKey,
+        label: productLabel,
         product_line: productTypeName,
+        position: index,
         selected_recommendations: {
           job_id: jobId,
           job_name: jobName,

diff --git a/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx b/src/skills-builder/skills-builder-modal/view-results/ViewResults.jsx
@@ -49,7 +49,7 @@ const ViewResults = () => {
         selected_recommendations: {
           job_id: results[0].id,
           job_name: results[0].name,
-          /* We extract the title and course key into an array of objects */
+          /* Extract a product label, title, and position for each recommendation */
           product_keys: extractProductKeys(results[0].recommendations),
         },
         is_default: true,

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
@@ -124,7 +124,8 @@ describe('view-results', () => {
           app_name: 'skills_builder',
           category: 'skills_builder',
           page: 'skills_builder',
-          courserun_key: 'MONS101',
+          label: 'MONS101',
+          position: 0,
           product_line: '2U_degree',
           selected_recommendations: {
             job_id: 0,

diff --git a/src/skills-builder/test/__mocks__/jobSkills.mockData.js b/src/skills-builder/test/__mocks__/jobSkills.mockData.js
@@ -72,24 +72,24 @@ export const mockData = {
   useAlgoliaSearch: [{}, {}, {}],
   productKeys: {
     course: [
-      { title: 'Mining with the Mons', courserun_key: 'MONS101' },
-      { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' },
+      { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
+      { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
     '2U_degree': [
-      { title: 'Mining with the Mons', courserun_key: 'MONS101' },
-      { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' },
+      { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
+      { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
     program: [
-      { title: 'Mining with the Mons', courserun_key: 'MONS101' },
-      { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' },
+      { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
+      { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
     boot_camp: [
-      { title: 'Mining with the Mons', courserun_key: 'MONS101' },
-      { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' },
+      { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
+      { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
     executive_education: [
-      { title: 'Mining with the Mons', courserun_key: 'MONS101' },
-      { title: 'The Art of Warren Upkeep', courserun_key: 'WAR101' },
+      { title: 'Mining with the Mons', label: 'MONS101', position: 0 },
+      { title: 'The Art of Warren Upkeep', label: 'WAR101', position: 1 },
     ],
   },
 };

diff --git a/src/skills-builder/utils/extractProductKeys.js b/src/skills-builder/utils/extractProductKeys.js
@@ -15,7 +15,7 @@ import { productTypeNames } from '../skills-builder-modal/view-results/data/cons
 * @return
 *   @typedef productKeys - an object with a key for each product line
 *   @type {object}
-*   @property {array[object]} product_line - each object contains a title and product key
+*   @property {array[object]} product_line - each object contains a title, product label, and its position in the list
 */
 export const extractProductKeys = (recommendations, expandedList = []) => (
   Object.fromEntries(
@@ -30,10 +30,12 @@ export const extractProductKeys = (recommendations, expandedList = []) => (
       return [
         type,
         // create an array of objects for each product line
-        // each object contains a title and product key, rather than the entire response from Algolia (rec)
-        recommendationsRefinedList?.map(rec => ({
+        // each object contains a title, product label, and position - rather than the entire response from Algolia
+        recommendationsRefinedList?.map((rec, index) => ({
           title: rec.title,
-          courserun_key: rec.active_run_key,
+          // If this label changes, make sure to duplicate the change in RecommendationCard.jsx
+          label: rec.active_run_key || `${rec.title} [${rec.uuid}]`,
+          position: index,
         })),
       ];
     }),

diff --git a/src/skills-builder/utils/tests/extractProductKeys.test.js b/src/skills-builder/utils/tests/extractProductKeys.test.js
@@ -12,15 +12,17 @@ const mockRecommendations = Object.fromEntries(
   )),
 );
 
-// When the values are extracted, each course should only have two values: title and courserun_key
+// When the values are extracted, each course should only have: title, label, and position
 const expectedCourseData = [
   {
     title: 'Mining with the Mons',
-    courserun_key: 'MONS101',
+    label: 'MONS101',
+    position: 0,
   },
   {
     title: 'The Art of Warren Upkeep',
-    courserun_key: 'WAR101',
+    label: 'WAR101',
+    position: 1,
   },
 ];