Update MITxOnline API Client (#2554)

* remove erroneous duplicate code

* update mitxonline api package

* fix a ts error

Author: ChristopherChudzicki

frontends/api/package.json

@@ -25,13 +25,13 @@
     "@testing-library/react": "^16.3.0",
     "enforce-unique": "^1.3.0",
     "jest": "^29.7.0",
-    "jest-when": "^3.6.0",
+    "jest-when": "^3.7.0",
     "lodash": "^4.17.21",
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "^2025.9.11",
+    "@mitodl/mitxonline-api-axios": "^2025.9.26",
     "@tanstack/react-query": "^5.66.0",
-    "axios": "^1.6.3"
+    "axios": "^1.12.2"
   }
 }

frontends/api/src/mitxonline/hooks/pages/index.ts

@@ -1,3 +1,3 @@
-import { pagesQueries, getPagesDetail } from "./queries"
+import { pagesQueries } from "./queries"
 
-export { pagesQueries, getPagesDetail }
+export { pagesQueries }

frontends/api/src/mitxonline/hooks/pages/queries.ts

@@ -1,10 +1,6 @@
 import { queryOptions } from "@tanstack/react-query"
-import {
-  // pagesApi,
-  axiosInstance,
-  pagesApi,
-} from "../../clients"
-import { CoursePageList } from "@mitodl/mitxonline-api-axios/v2"
+import { pagesApi } from "../../clients"
+
 const pagesKeys = {
   root: ["mitxonline", "pages"],
   coursePageDetail: (readableId: string) => [
@@ -14,33 +10,16 @@ const pagesKeys = {
   ],
 }
 
-const getPagesDetail = async (readableId: string) => {
-  // TODO: When MITxOnline is published, API client will support readable_id param.
-  // The API supports it now, just not the client.
-  // return pagesApi
-  // .pagesfieldstypecmsCoursePageRetrieve({ readable_id: readableId })
-  // .then((res) => res.data)
-  const todo = (
-    ..._params: Parameters<typeof pagesApi.pagesfieldstypecmsCoursePageRetrieve>
-  ) => {}
-  // @ts-expect-error See above ... This error will trigger when client is updated.
-  todo({ readable_id: readableId })
-
-  const BASE_PATH =
-    process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL?.replace(/\/+$/, "") ?? ""
-
-  const url = `${BASE_PATH}/api/v2/pages/?fields=*&readable_id=${encodeURIComponent(readableId)}&type=cms.CoursePage`
-  return axiosInstance.get<CoursePageList>(url)
-}
-
 const pagesQueries = {
   courseDetail: (readableId: string) =>
     queryOptions({
       queryKey: pagesKeys.coursePageDetail(readableId),
       queryFn: async () => {
-        return getPagesDetail(readableId).then((res) => res.data)
+        return pagesApi
+          .pagesfieldstypecmsCoursePageRetrieve({ readable_id: readableId })
+          .then((res) => res.data)
       },
     }),
 }
 
-export { pagesQueries, pagesKeys, getPagesDetail }
+export { pagesQueries, pagesKeys }

frontends/api/src/mitxonline/test-utils/factories/programs.ts

@@ -63,6 +63,15 @@ const program: PartialFactory<V2Program> = (overrides = {}) => {
     min_weekly_hours: `${faker.number.int({ min: 1, max: 5 })} hours`,
     max_weekly_hours: `${faker.number.int({ min: 6, max: 10 })} hours`,
     start_date: faker.date.past().toISOString(),
+    max_price: faker.number.int({ min: 50, max: 5000 }),
+    min_price: faker.number.int({ min: 50, max: 5000 }),
+    enrollment_start: faker.helpers.maybe(() =>
+      faker.date.past().toISOString(),
+    ),
+    enrollment_end: faker.helpers.maybe(() =>
+      faker.date.future().toISOString(),
+    ),
+    end_date: faker.helpers.maybe(() => faker.date.future().toISOString()),
   }
 
   return mergeOverrides<V2Program>(defaults, overrides)

frontends/api/src/mitxonline/test-utils/urls.ts

@@ -49,9 +49,9 @@ const courses = {
 
 const pages = {
   courseDetail: (readableId: string) =>
-    `${API_BASE_URL}/api/v2/pages/?fields=*&readable_id=${encodeURIComponent(
+    `${API_BASE_URL}/api/v2/pages/?fields=*&type=cms.CoursePage&readable_id=${encodeURIComponent(
       readableId,
-    )}&type=cms.CoursePage`,
+    )}`,
 }
 
 const organization = {

frontends/api/src/test-utils/mockAxios.ts

@@ -8,16 +8,28 @@ type Method = "get" | "post" | "patch" | "delete"
 
 type PartialAxiosResponse = Pick<AxiosResponse, "data" | "status">
 
-const alwaysError = (
-  method: string,
+type RequestMaker = (
+  method: Method,
   url: string,
-  _body?: unknown,
-): Promise<PartialAxiosResponse> => {
+  body?: unknown,
+) => Promise<PartialAxiosResponse>
+
+const alwaysError: RequestMaker = (method, url, _body) => {
   const msg = `No response specified for ${method} ${url}`
   console.error(msg)
   throw new Error(msg)
 }
 
+const standardizeUrl = (url: string) => {
+  if (!url.includes("?")) {
+    return url
+  }
+  const [path, queryString] = url.split("?")
+  const query = new URLSearchParams(queryString)
+  query.sort()
+  return `${path}?${query.toString()}`
+}
+
 /**
  * A jest mock function that makes fake network requests.
  *
@@ -29,17 +41,23 @@ const alwaysError = (
  *  '/some/url/to/thing',
  *   expect.objectContaining({ some: 'value' }) // request body
  * ])
+ *
+ * NOTE: URLs called by this function are first
  * ```
  */
 const makeRequest = jest.fn(alwaysError)
+const makeSortedRequest: RequestMaker = (method, url, body) =>
+  makeRequest(method, standardizeUrl(url), body)
 
 const mockAxiosInstance = {
-  get: jest.fn((url: string) => makeRequest("get", url, undefined)),
-  post: jest.fn((url: string, body: unknown) => makeRequest("post", url, body)),
+  get: jest.fn((url: string) => makeSortedRequest("get", url, undefined)),
+  post: jest.fn((url: string, body: unknown) =>
+    makeSortedRequest("post", url, body),
+  ),
   patch: jest.fn((url: string, body: unknown) =>
-    makeRequest("patch", url, body),
+    makeSortedRequest("patch", url, body),
   ),
-  delete: jest.fn((url: string) => makeRequest("delete", url, undefined)),
+  delete: jest.fn((url: string) => makeSortedRequest("delete", url, undefined)),
   request: jest.fn(
     (
       {
@@ -57,7 +75,11 @@ const mockAxiosInstance = {
       // on object shape.
       const deserialized =
         typeof data === "string" ? JSON.parse(data) : undefined
-      return makeRequest(method.toLowerCase(), url, deserialized)
+      return makeSortedRequest(
+        method.toLowerCase() as Method,
+        url,
+        deserialized,
+      )
     },
   ),
   defaults: {}, // OpenAPI Generator accesses this, so it needs to exist
@@ -72,24 +94,16 @@ const expectAnythingOrNil = expect.toBeOneOf([
   expect.toBeNil(),
 ])
 
-const standardizeUrl = <T>(url: T) => {
-  if (!(typeof url === "string")) return url
-  if (!url.includes("?")) return url
-  const [path, queryString] = url.split("?")
-  const query = new URLSearchParams(queryString)
-  query.sort()
-  return `${path}?${query.toString()}`
-}
-
 const mockRequest = <T, U>(
   method: Method,
   url: string,
   requestBody: T = expectAnythingOrNil,
   responseBody: U | ((req: T) => U) | undefined = undefined,
   code: number,
 ) => {
+  const urlMatcher = typeof url === "string" ? standardizeUrl(url) : url
   when(makeRequest)
-    .calledWith(method, standardizeUrl(url), requestBody)
+    .calledWith(method, urlMatcher, requestBody)
     .mockImplementation(async () => {
       let data
       if (isFunction(responseBody)) {
@@ -158,7 +172,7 @@ const setMockResponse = {
     { code = 200, requestBody }: MockResponseOptions = {},
   ) => mockRequest("patch", url, requestBody, responseBody, code),
   /**
-   * Set mock response for a PATCH request; default response status is 204.
+   * Set mock response for a DELETE request; default response status is 204.
    *
    * If `responseBody` is a Promise, the request will resolve to the value of
    * `responseBody` when `responseBody` resolves.

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
-    "@mitodl/mitxonline-api-axios": "^2025.9.11",
+    "@mitodl/mitxonline-api-axios": "^2025.9.26",
     "@mitodl/smoot-design": "^6.17.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@react-pdf/renderer": "^4.3.0",