Change Catalog Page to use the new v2 programs endpoint (#1971)

* Added tests, fixture and utility functions * oops, put nplus 1 back & reparameterize the fixture * reformat * Add to Programs as well * reformat * add v2 * updated per Nathan's feedback * merge + update for feedback * moved to v2, versioned tests and serializers as well * remove random copy pasta * Example of catalog data fixture * added v1 and v2 programs. having urls issues * reformat * namespace fixed. Paring down programs list a little. * Fixing programs * reformat * reformat * fix merge * testing * fix extra urls for records/program * less calls * reformat * v2 serializer test * start swapping to v2 * refactor v1 structure + add financial page * move v2 stuff * missing import * reformat * remove empty file * reformat * imports * how though * more mocks eaten * add .live() * update for additional query due to flex form * reformat * need to look at something in api v2 * test failure * fmt * fix patch * department filter unbroken * take off non-catalog pages * lint * fmt * fix structure in programs test (oops, missed it) * type wrong --------- Co-authored-by: Nathan Levesque <[email protected]>
mitodl · Nov 1, 2023 · 31ea6d8 · 31ea6d8
1 parent 863ea21
commit 31ea6d8
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 89 deletions.
diff --git a/courses/serializers/v2/programs.py b/courses/serializers/v2/programs.py
@@ -20,7 +20,7 @@ class ProgramSerializer(serializers.ModelSerializer):
     requirements = serializers.SerializerMethodField()
     req_tree = serializers.SerializerMethodField()
     page = serializers.SerializerMethodField()
-    departments = serializers.PrimaryKeyRelatedField(many=True, read_only=True)
+    departments = serializers.StringRelatedField(many=True, read_only=True)
 
     def get_courses(self, instance):
         return [course[0].id for course in instance.courses if course[0].live]

diff --git a/frontend/public/src/containers/pages/CatalogPage.js b/frontend/public/src/containers/pages/CatalogPage.js
@@ -404,7 +404,7 @@ export class CatalogPage extends React.Component<Props> {
       program =>
         selectedDepartment === ALL_DEPARTMENTS ||
         program.departments
-          .map(department => department.name)
+          .map(department => department)
           .includes(selectedDepartment)
     )
   }

diff --git a/frontend/public/src/containers/pages/CatalogPage_test.js b/frontend/public/src/containers/pages/CatalogPage_test.js
@@ -77,83 +77,14 @@ const displayedCourse = {
 }
 
 const displayedProgram = {
-  title:       "P2",
-  readable_id: "P2",
-  id:          2,
-  courses:     [
-    {
-      id:          1,
-      title:       "Demonstration Course",
-      readable_id: "course-v1:edX+DemoX",
-      courseruns:  [
-        {
-          title:            "Demonstration Course",
-          start_date:       moment(),
-          end_date:         moment().add(2, "M"),
-          enrollment_start: null,
-          enrollment_end:   null,
-          expiration_date:  null,
-          courseware_url:
-            "http://edx.odl.local:18000/courses/course-v1:edX+DemoX+Demo_Course/",
-          courseware_id:    "course-v1:edX+DemoX+Demo_Course",
-          upgrade_deadline: null,
-          is_upgradable:    true,
-          is_self_paced:    true,
-          run_tag:          "Demo_Course",
-          id:               1,
-          live:             true,
-          products:         [
-            {
-              id:                     2,
-              price:                  "999.00",
-              description:            "course-v1:edX+DemoX+Demo_Course",
-              is_active:              true,
-              product_flexible_price: null
-            }
-          ],
-          page: {
-            feature_image_src:             "/static/images/mit-dome.png",
-            page_url:                      "/courses/course-v1:edX+DemoX/",
-            financial_assistance_form_url:
-              "/courses/course-v1:edX+DemoX/data-economics-and-development-policy-financial-assistance-form/",
-            description:   "Demonstration Course",
-            current_price: null,
-            instructors:   [],
-            live:          true
-          },
-          approved_flexible_price_exists: false
-        }
-      ],
-      next_run_id: null,
-      departments: [
-        {
-          name: "History"
-        }
-      ],
-      page: {
-        feature_image_src:             "/static/images/mit-dome.png",
-        page_url:                      "/courses/course-v1:edX+DemoX/",
-        financial_assistance_form_url:
-          "/courses/course-v1:edX+DemoX/data-economics-and-development-policy-financial-assistance-form/",
-        description:   "Demonstration Course",
-        current_price: null,
-        instructors:   [],
-        live:          true
-      },
-      feature_image_src:             "/static/images/mit-dome.png",
-      page_url:                      "/courses/course-v1:edX+DemoX/",
-      financial_assistance_form_url:
-        "/courses/course-v1:edX+DemoX/data-economics-and-development-policy-financial-assistance-form/",
-      description:   "Demonstration Course",
-      current_price: null,
-      instructors:   [],
-      live:          true
-    }
-  ],
+  title:        "P2",
+  readable_id:  "P2",
+  id:           2,
   requirements: {
     required:  [1],
     electives: []
   },
+  courses:  [1],
   req_tree: [
     {
       data: {
@@ -201,12 +132,8 @@ const displayedProgram = {
       "http://mitxonline.odl.local:8013/static/images/mit-dome.png"
   },
   program_type: "Series",
-  departments:  [
-    {
-      name: "Science"
-    }
-  ],
-  live: true
+  departments:  ["Science"],
+  live:         true
 }
 
 describe("CatalogPage", function() {
@@ -426,11 +353,11 @@ describe("CatalogPage", function() {
 
   it("renders catalog programs when filtered by department", async () => {
     const program1 = JSON.parse(JSON.stringify(displayedProgram))
-    program1.departments = [{ name: "Math" }]
+    program1.departments = ["Math"]
     const program2 = JSON.parse(JSON.stringify(displayedProgram))
-    program2.departments = [{ name: "History" }]
+    program2.departments = ["History"]
     const program3 = JSON.parse(JSON.stringify(displayedProgram))
-    program3.departments = [{ name: "History" }]
+    program3.departments = ["History"]
     const { inner } = await renderPage()
     programs = [program1, program2, program3]
     let programsFilteredByCriteriaAndDepartment = inner
@@ -978,7 +905,7 @@ describe("CatalogPage", function() {
 
     sinon.assert.calledWith(
       helper.handleRequestStub,
-      "/api/programs/?page=2&live=true",
+      "/api/v2/programs/?page=2&live=true",
       "GET"
     )
 

diff --git a/frontend/public/src/flow/cmsTypes.js b/frontend/public/src/flow/cmsTypes.js
@@ -12,3 +12,10 @@ export type InstructorPage = {
   instructor_bio_long: ?string,
   feature_image_src: string,
 }
+
+export type ProgramPage = {
+  id: number,
+  featured_image_src: string,
+  page_url: string,
+  live: boolean,
+}
diff --git a/frontend/public/src/flow/courseTypes.js b/frontend/public/src/flow/courseTypes.js
@@ -73,11 +73,11 @@ export type Program = {
   title: string,
   readable_id: string,
   program_type: string,
-  courses: Array<CourseDetailWithRuns>,
+  courses: Array<number>,
   requirements: ?ProgramEnrollments,
   req_tree: Array<ProgramRequirement>,
   page: ?Page,
-  departments: ?Array<Department>,
+  departments: ?Array<string>,
   live: boolean,
 }
 
@@ -146,5 +146,6 @@ export type LearnerRecord = {
 }
 
 export type Department = {
-  name: string
+  name: string,
+  id: number
 }
diff --git a/frontend/public/src/lib/queries/courseRuns.js b/frontend/public/src/lib/queries/courseRuns.js
@@ -32,6 +32,7 @@ export const coursesQuery = (courseKey: string = "") => ({
   }
 })
 
+// This will need to be updated to v2 once we get the courses endpoint to allow for multiple ID query
 export const programsQuery = (programKey: string = "") => ({
   queryKey:  programsQueryKey,
   url:       `/api/programs/?readable_id=${encodeURIComponent(programKey)}`,

diff --git a/frontend/public/src/lib/queries/programs.js b/frontend/public/src/lib/queries/programs.js
@@ -18,7 +18,7 @@ export const programsQueryKey = "programs"
 
 export const programsQuery = page => ({
   queryKey:  programsQueryKey,
-  url:       `/api/programs/?page=${page}&live=true`,
+  url:       `/api/v2/programs/?page=${page}&live=true`,
   transform: json => ({
     programs: json
   }),