refactor: Migration of course details to React query (#2724)

- Migrates the `courseDetails` part from the Redux Store to React Query.
- Creates a new `CourseAuthoringContext` 
- Update the pages in `<CourseAuthoringRoutes>` to use the newly created context.
- Migrates some files to Typescript
- Migrates some tests to use `src/testUtils.tsx`

src/data/apiHooks.ts

@@ -1,6 +1,7 @@
 import {
   skipToken, useMutation, useQuery, useQueryClient,
 } from '@tanstack/react-query';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { libraryAuthoringQueryKeys } from '@src/library-authoring/data/apiHooks';
 import {
   getWaffleFlags,
@@ -8,7 +9,9 @@ import {
   bulkModulestoreMigrate,
   getModulestoreMigrationStatus,
   BulkMigrateRequestData,
+  getCourseDetails,
 } from './api';
+import { RequestStatus, RequestStatusType } from './constants';
 
 export const migrationQueryKeys = {
   all: ['contentLibrary'],
@@ -18,6 +21,14 @@ export const migrationQueryKeys = {
   migrationTask: (migrationId?: string | null) => [...migrationQueryKeys.all, migrationId],
 };
 
+export const courseDetailsKey = {
+  all: ['courseDetails'],
+  /**
+   * Base key for get course details data.
+   */
+  courseDetails: (courseId: string) => [...courseDetailsKey.all, courseId],
+};
+
 /**
  * Get the waffle flags (which enable/disable specific features). They may
  * depend on which course we're in.
@@ -72,3 +83,38 @@ export const useModulestoreMigrationStatus = (migrationId: string | null, refetc
     refetchInterval,
   })
 );
+
+/**
+ * Get details of a course
+ */
+export const useCourseDetails = (courseId: string) => {
+  const query = useQuery({
+    queryKey: courseDetailsKey.courseDetails(courseId),
+    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) {
+    status = RequestStatus.IN_PROGRESS;
+  } else if (query.isSuccess) {
+    status = RequestStatus.SUCCESSFUL;
+  } else if (query.error) {
+    const errorStatus = (query.error as any)?.response?.status;
+    if (errorStatus === 404) {
+      status = RequestStatus.NOT_FOUND;
+    } else {
+      status = RequestStatus.FAILED;
+    }
+  }
+
+  return {
+    ...query,
+    status,
+  };
+};