refactor: Updates in CourseLibraries

Author: ChrisChV

src/CourseAuthoringRoutes.jsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {
   Navigate, Routes, Route, useParams,
 } from 'react-router-dom';
@@ -62,7 +61,7 @@ const CourseAuthoringRoutes = () => {
           />
           <Route
             path="libraries"
-            element={<PageWrap><CourseLibraries courseId={courseId} /></PageWrap>}
+            element={<PageWrap><CourseLibraries /></PageWrap>}
           />
           <Route
             path="assets"

src/course-libraries/CourseLibraries.test.tsx

@@ -9,17 +9,18 @@ import {
   screen,
   waitFor,
   within,
-} from '../testUtils';
-import { mockContentSearchConfig } from '../search-manager/data/api.mock';
+} from '@src/testUtils';
+import { mockContentSearchConfig } from '@src/search-manager/data/api.mock';
+import { type ToastActionData } from '@src/generic/toast-context';
 import { CourseLibraries } from './CourseLibraries';
 import {
   mockGetEntityLinks,
   mockGetEntityLinksSummaryByDownstreamContext,
   mockFetchIndexDocuments,
   mockUseLibBlockMetadata,
 } from './data/api.mocks';
-import { libraryBlockChangesUrl } from '../course-unit/data/api';
-import { type ToastActionData } from '../generic/toast-context';
+import { libraryBlockChangesUrl } from '@src/course-unit/data/api';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 
 mockContentSearchConfig.applyMock();
 mockGetEntityLinks.applyMock();
@@ -58,7 +59,11 @@ describe('<CourseLibraries />', () => {
 
   const renderCourseLibrariesPage = async (courseKey?: string) => {
     const courseId = courseKey || mockGetEntityLinks.courseKey;
-    render(<CourseLibraries courseId={courseId} />);
+    render(
+      <CourseAuthoringProvider courseId={courseId}>
+        <CourseLibraries />
+      </CourseAuthoringProvider>
+    );
   };
 
   it('shows the spinner before the query is complete', async () => {
@@ -176,7 +181,11 @@ describe('<CourseLibraries ReviewTab />', () => {
 
   const renderCourseLibrariesReviewPage = async (courseKey?: string) => {
     const courseId = courseKey || mockGetEntityLinks.courseKey;
-    render(<CourseLibraries courseId={courseId} />);
+    render(
+      <CourseAuthoringProvider courseId={courseId}>
+        <CourseLibraries />
+      </CourseAuthoringProvider>
+    );
   };
 
   it('shows the spinner before the query is complete', async () => {

src/course-libraries/CourseLibraries.tsx

@@ -33,10 +33,7 @@ import { useStudioHome } from '../studio-home/hooks';
 import NewsstandIcon from '../generic/NewsstandIcon';
 import ReviewTabContent from './ReviewTabContent';
 import { OutOfSyncAlert } from './OutOfSyncAlert';
-
-interface Props {
-  courseId: string;
-}
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
 interface LibraryCardProps {
   linkSummary: PublishableEntityLinkSummary;
@@ -100,9 +97,9 @@ const LibraryCard = ({ linkSummary }: LibraryCardProps) => {
   );
 };
 
-export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
+export const CourseLibraries = () => {
   const intl = useIntl();
-  const courseDetails = useModel('courseDetails', courseId);
+  const { courseId, courseDetails } = useCourseAuthoringContext();
   const [searchParams] = useSearchParams();
   const [tabKey, setTabKey] = useState<CourseLibraryTabs>(
     () => searchParams.get('tab') as CourseLibraryTabs,
@@ -189,7 +186,7 @@ export const CourseLibraries: React.FC<Props> = ({ courseId }) => {
     <>
       <Helmet>
         <title>
-          {getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.headingTitle))}
+          {getPageHeadTitle(courseDetails?.name || '', intl.formatMessage(messages.headingTitle))}
         </title>
       </Helmet>
       <Container size="xl" className="px-4 pt-4 mt-3">