style: Nits on the code

Author: ChrisChV

plugins/course-apps/live/BbbSettings.test.jsx

@@ -13,7 +13,7 @@ import userEvent from '@testing-library/user-event';
 import { executeThunk } from 'CourseAuthoring/utils';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,

plugins/course-apps/live/Settings.test.jsx

@@ -15,7 +15,7 @@ import ReactDOM from 'react-dom';
 import { executeThunk } from 'CourseAuthoring/utils';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,

plugins/course-apps/live/ZoomSettings.test.jsx

@@ -10,7 +10,7 @@ import ReactDOM from 'react-dom';
 
 import { executeThunk } from 'CourseAuthoring/utils';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
-import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
 import LiveSettings from './Settings';
 import {
   generateLiveConfigurationApiResponse,

plugins/course-apps/proctoring/Settings.test.jsx

@@ -9,7 +9,7 @@ import StudioApiService from 'CourseAuthoring/data/services/StudioApiService';
 import ExamsApiService from 'CourseAuthoring/data/services/ExamsApiService';
 import PagesAndResourcesProvider from 'CourseAuthoring/pages-and-resources/PagesAndResourcesProvider';
 import { CourseAuthoringProvider } from 'CourseAuthoring/CourseAuthoringContext';
-import { getCourseDetailUrl } from 'CourseAuthoring/data/api';
+import { getCourseDetailsUrl } from 'CourseAuthoring/data/api';
 import ProctoredExamSettings from './Settings';
 
 const courseId = 'course-v1%3AedX%2BDemoX%2BDemo_Course';
@@ -51,7 +51,7 @@ describe('ProctoredExamSettings', () => {
 
     axiosMock = mocks.axiosMock;
     axiosMock
-      .onGet(getCourseDetailUrl(courseId, user.username))
+      .onGet(getCourseDetailsUrl(courseId, user.username))
       .reply(200, {
         courseId,
         name: 'Course Test',

src/CourseAuthoringPage.tsx

@@ -26,10 +26,9 @@ const CourseAuthoringPage = ({ children }: Props) => {
   }, []);
 
   const { courseId, courseDetails, courseDetailStatus } = useCourseAuthoringContext();
-
-  const courseNumber = courseDetails ? courseDetails.number : undefined;
-  const courseOrg = courseDetails ? courseDetails.org : undefined;
-  const courseTitle = courseDetails ? courseDetails.name : courseId;
+  const courseNumber = courseDetails?.number;
+  const courseOrg = courseDetails?.org;
+  const courseTitle = courseDetails?.name;
   const inProgress = courseDetailStatus === RequestStatus.IN_PROGRESS || courseDetailStatus === RequestStatus.PENDING;
   const courseAppsApiStatus = useSelector(getCourseAppsApiStatus);
   const { pathname } = useLocation();

src/custom-pages/CustomPages.tsx

@@ -54,7 +54,7 @@ const CustomPages = () => {
 
   document.title = getPageHeadTitle(courseDetails?.name || '', intl.formatMessage(messages.heading));
 
-  // @ts-ignore
+  // @ts-expect-error - frontend-platform doesn't have type information
   const { config } = useContext(AppContext);
   const learningCourseURL = `${config.LEARNING_BASE_URL}/course/${courseId}`;
 

src/data/api.ts

@@ -2,7 +2,7 @@ import { camelCaseObject, getConfig, snakeCaseObject } from '@edx/frontend-platf
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
 const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL as string;
-export const getCourseDetailUrl = (courseId: string, username: string) => (
+export const getCourseDetailsUrl = (courseId: string, username: string) => (
   `${getConfig().LMS_BASE_URL}/api/courses/v1/courses/${courseId}?username=${username}`
 );
 
@@ -17,7 +17,10 @@ export type CourseDetailsData = {
   id: string;
   invitationOnly: boolean;
   isEnrolled: boolean;
-  media: Object;
+  media: Record<
+  'image' | 'course_image' | 'banner_image' | 'course_video',
+  Record<string, string | null>
+  >;
   mobileAvailable: boolean;
   name: string;
   number: string;
@@ -47,9 +50,9 @@ export const getApiWaffleFlagsUrl = (courseId?: string): string => {
   return courseId ? `${baseUrl}${apiPath}/${courseId}` : `${baseUrl}${apiPath}`;
 };
 
-export async function getCourseDetail(courseId: string, username: string): Promise<CourseDetailsData> {
+export async function getCourseDetails(courseId: string, username: string): Promise<CourseDetailsData> {
   const { data } = await getAuthenticatedHttpClient()
-    .get(getCourseDetailUrl(courseId, username));
+    .get(getCourseDetailsUrl(courseId, username));
   return {
     id: data.course_id,
     ...camelCaseObject(data),

src/data/apiHooks.ts

@@ -9,7 +9,7 @@ import {
   bulkModulestoreMigrate,
   getModulestoreMigrationStatus,
   BulkMigrateRequestData,
-  getCourseDetail,
+  getCourseDetails,
 } from './api';
 import { RequestStatus, RequestStatusType } from './constants';
 
@@ -90,10 +90,14 @@ export const useModulestoreMigrationStatus = (migrationId: string | null) => (
 export const useCourseDetails = (courseId: string) => {
   const query = useQuery({
     queryKey: courseDetailsKey.courseDetails(courseId),
-    queryFn: () => getCourseDetail(courseId, getAuthenticatedUser().username),
+    queryFn: () => getCourseDetails(courseId, getAuthenticatedUser().username),
     retry: false,
   });
 
+  /**
+   * Include a status summary field for now, to better match the old redux data
+   * loading status that other components expect. This could be changed/removed in the future.
+   */
   let status: RequestStatusType = RequestStatus.PENDING;
 
   if (query.isLoading) {

src/export-page/CourseExportPage.test.jsx

@@ -3,7 +3,7 @@ import { Helmet } from 'react-helmet';
 import Cookies from 'universal-cookie';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
-import { getCourseDetailUrl } from '@src/data/api';
+import { getCourseDetailsUrl } from '@src/data/api';
 import {
   initializeMocks,
   fireEvent,
@@ -52,7 +52,7 @@ describe('<CourseExportPage />', () => {
       .onGet(postExportCourseApiUrl(courseId))
       .reply(200, exportPageMock);
     axiosMock
-      .onGet(getCourseDetailUrl(courseId, user.username))
+      .onGet(getCourseDetailsUrl(courseId, user.username))
       .reply(200, { courseId, name: courseName });
     cookies = new Cookies();
     cookies.get.mockReturnValue(null);

src/import-page/CourseImportPage.test.tsx

@@ -2,7 +2,7 @@ import { Helmet } from 'react-helmet';
 import Cookies from 'universal-cookie';
 
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
-import { getCourseDetailUrl } from '@src/data/api';
+import { getCourseDetailsUrl } from '@src/data/api';
 import { initializeMocks, render, waitFor } from '../testUtils';
 import { RequestStatus } from '../data/constants';
 import messages from './messages';
@@ -44,7 +44,7 @@ describe('<CourseImportPage />', () => {
       .onGet(getImportStatusApiUrl(courseId, 'testFileName.test'))
       .reply(200, { importStatus: 1, message: '' });
     axiosMock
-      .onGet(getCourseDetailUrl(courseId, user.username))
+      .onGet(getCourseDetailsUrl(courseId, user.username))
       .reply(200, { courseId, name: courseName });
     cookies = new Cookies();
     cookies.get.mockReturnValue(null);