chore: run oxfmt

Author: bradenmacdonald

src/CourseAuthoringContext.tsx

@@ -1,7 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
-import {
-  createContext, useContext, useMemo, useState,
-} from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useCreateCourseBlock } from '@src/course-outline/data/apiHooks';
 import { useSelector } from 'react-redux';
@@ -56,35 +54,24 @@ type CourseAuthoringProviderProps = {
   courseId: string;
 };
 
-export const CourseAuthoringProvider = ({
-  children,
-  courseId,
-}: CourseAuthoringProviderProps) => {
+export const CourseAuthoringProvider = ({ children, courseId }: CourseAuthoringProviderProps) => {
   const navigate = useNavigate();
   const waffleFlags = useWaffleFlags();
   const { data: courseDetails, status: courseDetailStatus } = useCourseDetails(courseId);
   const canChangeProviders = getAuthenticatedUser().administrator || new Date(courseDetails?.start ?? 0) > new Date();
   const { courseStructure } = useSelector(getOutlineIndexData);
   const { id: courseUsageKey } = courseStructure || {};
-  const [
-    isUnlinkModalOpen,
-    currentUnlinkModalData,
-    openUnlinkModal,
-    closeUnlinkModal,
-  ] = useToggleWithValue<ModalState>();
-  const [
-    isPublishModalOpen,
-    currentPublishModalData,
-    openPublishModal,
-    closePublishModal,
-  ] = useToggleWithValue<ModalState>();
+  const [isUnlinkModalOpen, currentUnlinkModalData, openUnlinkModal, closeUnlinkModal] =
+    useToggleWithValue<ModalState>();
+  const [isPublishModalOpen, currentPublishModalData, openPublishModal, closePublishModal] =
+    useToggleWithValue<ModalState>();
   /**
-  * This will hold the state of current item that is being operated on,
-  * For example:
-  *  - the details of container that is being edited.
-  *  - the details of container of which see more dropdown is open.
-  * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
-  */
+   * This will hold the state of current item that is being operated on,
+   * For example:
+   *  - the details of container that is being edited.
+   *  - the details of container of which see more dropdown is open.
+   * It is mostly used in modals which should be soon be replaced with its equivalent in sidebar.
+   */
   const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
 
   const getUnitUrl = (locator: string) => {
@@ -108,65 +95,66 @@ export const CourseAuthoringProvider = ({
     }
   };
   /**
-  * import a unit block from library and redirect user to this unit page.
-  */
+   * import a unit block from library and redirect user to this unit page.
+   */
   const handleAddAndOpenUnit = useCreateCourseBlock(courseId, openUnitPage);
   const handleAddBlock = useCreateCourseBlock(courseId);
 
-  const context = useMemo<CourseAuthoringContextData>(() => ({
-    courseId,
-    courseUsageKey,
-    courseDetails,
-    courseDetailStatus,
-    canChangeProviders,
-    handleAddBlock,
-    handleAddAndOpenUnit,
-    getUnitUrl,
-    openUnitPage,
-    isUnlinkModalOpen,
-    openUnlinkModal,
-    closeUnlinkModal,
-    currentUnlinkModalData,
-    isPublishModalOpen,
-    currentPublishModalData,
-    openPublishModal,
-    closePublishModal,
-    currentSelection,
-    setCurrentSelection,
-  }), [
-    courseId,
-    courseUsageKey,
-    courseDetails,
-    courseDetailStatus,
-    canChangeProviders,
-    handleAddBlock,
-    handleAddAndOpenUnit,
-    getUnitUrl,
-    openUnitPage,
-    isUnlinkModalOpen,
-    openUnlinkModal,
-    closeUnlinkModal,
-    currentUnlinkModalData,
-    isPublishModalOpen,
-    currentPublishModalData,
-    openPublishModal,
-    closePublishModal,
-    currentSelection,
-    setCurrentSelection,
-  ]);
-
-  return (
-    <CourseAuthoringContext.Provider value={context}>
-      {children}
-    </CourseAuthoringContext.Provider>
+  const context = useMemo<CourseAuthoringContextData>(
+    () => ({
+      courseId,
+      courseUsageKey,
+      courseDetails,
+      courseDetailStatus,
+      canChangeProviders,
+      handleAddBlock,
+      handleAddAndOpenUnit,
+      getUnitUrl,
+      openUnitPage,
+      isUnlinkModalOpen,
+      openUnlinkModal,
+      closeUnlinkModal,
+      currentUnlinkModalData,
+      isPublishModalOpen,
+      currentPublishModalData,
+      openPublishModal,
+      closePublishModal,
+      currentSelection,
+      setCurrentSelection,
+    }),
+    [
+      courseId,
+      courseUsageKey,
+      courseDetails,
+      courseDetailStatus,
+      canChangeProviders,
+      handleAddBlock,
+      handleAddAndOpenUnit,
+      getUnitUrl,
+      openUnitPage,
+      isUnlinkModalOpen,
+      openUnlinkModal,
+      closeUnlinkModal,
+      currentUnlinkModalData,
+      isPublishModalOpen,
+      currentPublishModalData,
+      openPublishModal,
+      closePublishModal,
+      currentSelection,
+      setCurrentSelection,
+    ],
   );
+
+  return <CourseAuthoringContext.Provider value={context}>{children}</CourseAuthoringContext.Provider>;
 };
 
 export function useCourseAuthoringContext(): CourseAuthoringContextData {
   const ctx = useContext(CourseAuthoringContext);
   if (ctx === undefined) {
     /* istanbul ignore next */
-    throw new Error('useCourseAuthoringContext() was used in a component without a <CourseAuthoringProvider> ancestor.');
+    throw new Error(
+      'useCourseAuthoringContext() was used in a component without a <CourseAuthoringProvider> ancestor.',
+    );
   }
   return ctx;
 }

src/CourseAuthoringPage.test.tsx

@@ -19,19 +19,14 @@ jest.mock('react-router-dom', () => ({
 let axiosMock;
 let store;
 
-const renderComponent = children => render(
-  <CourseAuthoringProvider courseId={courseId}>
-    {children}
-  </CourseAuthoringProvider>,
-);
+const renderComponent = (children) =>
+  render(<CourseAuthoringProvider courseId={courseId}>{children}</CourseAuthoringProvider>);
 
 beforeEach(async () => {
   const mocks = initializeMocks();
   store = mocks.reduxStore;
   axiosMock = mocks.axiosMock;
-  axiosMock
-    .onGet(getApiWaffleFlagsUrl(courseId))
-    .reply(200, {});
+  axiosMock.onGet(getApiWaffleFlagsUrl(courseId)).reply(200, {});
 });
 
 describe('Editor Pages Load no header', () => {
@@ -48,8 +43,7 @@ describe('Editor Pages Load no header', () => {
     const wrapper = renderComponent(
       <CourseAuthoringPage>
         <PagesAndResources />
-      </CourseAuthoringPage>
-      ,
+      </CourseAuthoringPage>,
     );
     expect(wrapper.queryByRole('status')).not.toBeInTheDocument();
   });
@@ -59,8 +53,7 @@ describe('Editor Pages Load no header', () => {
     const wrapper = renderComponent(
       <CourseAuthoringPage>
         <PagesAndResources />
-      </CourseAuthoringPage>
-      ,
+      </CourseAuthoringPage>,
     );
     expect(wrapper.queryByRole('status')).toBeInTheDocument();
   });
@@ -70,16 +63,12 @@ describe('Course authoring page', () => {
   const lmsApiBaseUrl = getConfig().LMS_BASE_URL;
   const courseDetailApiUrl = `${lmsApiBaseUrl}/api/courses/v1/courses`;
   const mockStoreNotFound = async () => {
-    axiosMock.onGet(
-      `${courseDetailApiUrl}/${courseId}?username=abc123`,
-    ).reply(404, {
+    axiosMock.onGet(`${courseDetailApiUrl}/${courseId}?username=abc123`).reply(404, {
       response: { status: 404 },
     });
   };
   const mockStoreError = async () => {
-    axiosMock.onGet(
-      `${courseDetailApiUrl}/${courseId}?username=abc123`,
-    ).reply(500, {
+    axiosMock.onGet(`${courseDetailApiUrl}/${courseId}?username=abc123`).reply(500, {
       response: { status: 500 },
     });
   };
@@ -98,8 +87,7 @@ describe('Course authoring page', () => {
     const wrapper = renderComponent(
       <CourseAuthoringPage>
         <div data-testid={contentTestId} />
-      </CourseAuthoringPage>
-      ,
+      </CourseAuthoringPage>,
     );
     expect(await wrapper.findByTestId(contentTestId)).toBeInTheDocument();
     expect(wrapper.queryByTestId('notFoundAlert')).not.toBeInTheDocument();
@@ -108,9 +96,7 @@ describe('Course authoring page', () => {
     const studioApiBaseUrl = getConfig().STUDIO_BASE_URL;
     const courseAppsApiUrl = `${studioApiBaseUrl}/api/course_apps/v1/apps`;
 
-    axiosMock.onGet(
-      `${courseAppsApiUrl}/${courseId}`,
-    ).reply(403);
+    axiosMock.onGet(`${courseAppsApiUrl}/${courseId}`).reply(403);
     await executeThunk(fetchCourseApps(courseId), store.dispatch);
   };
   test('renders PermissionDeniedAlert when courseAppsApiStatus is DENIED', async () => {

src/CourseAuthoringPage.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
-import {
-  useLocation,
-} from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { StudioFooterSlot } from '@edx/frontend-component-footer';
 import Header from './header';
 import NotFoundAlert from './generic/NotFoundAlert';
@@ -35,34 +33,30 @@ const CourseAuthoringPage = ({ children }: Props) => {
   const isEditor = pathname.includes('/editor');
 
   if (courseDetailStatus === RequestStatus.NOT_FOUND && !isEditor) {
-    return (
-      <NotFoundAlert />
-    );
+    return <NotFoundAlert />;
   }
   if (courseAppsApiStatus === RequestStatus.DENIED) {
-    return (
-      <PermissionDeniedAlert />
-    );
+    return <PermissionDeniedAlert />;
   }
   return (
     <div>
       {/* While V2 Editors are temporarily served from their own pages
       using url pattern containing /editor/,
       we shouldn't have the header and footer on these pages.
       This functionality will be removed in TNL-9591 */}
-      {inProgress ? !isEditor && <Loading />
-        : (!isEditor && (
-          <Header
-            number={courseNumber}
-            org={courseOrg}
-            title={courseTitle}
-            contextId={courseId}
-            containerProps={{
-              size: 'fluid',
-            }}
-          />
-        )
-        )}
+      {inProgress
+        ? !isEditor && <Loading />
+        : !isEditor && (
+            <Header
+              number={courseNumber}
+              org={courseOrg}
+              title={courseTitle}
+              contextId={courseId}
+              containerProps={{
+                size: 'fluid',
+              }}
+            />
+          )}
       {children}
       {!inProgress && !isEditor && <StudioFooterSlot />}
     </div>

src/CourseAuthoringRoutes.test.tsx

@@ -1,8 +1,6 @@
 import CourseAuthoringRoutes from './CourseAuthoringRoutes';
 import { getApiWaffleFlagsUrl } from './data/api';
-import {
-  screen, initializeMocks, render, waitFor,
-} from './testUtils';
+import { screen, initializeMocks, render, waitFor } from './testUtils';
 
 const courseId = 'course-v1:edX+TestX+Test_Course';
 const pagesAndResourcesMockText = 'Pages And Resources';
@@ -53,27 +51,19 @@ describe('<CourseAuthoringRoutes>', () => {
       username: 'username',
     };
     const { axiosMock } = initializeMocks({ user });
-    axiosMock
-      .onGet(getApiWaffleFlagsUrl(courseId))
-      .reply(200, {});
+    axiosMock.onGet(getApiWaffleFlagsUrl(courseId)).reply(200, {});
   });
 
   it('renders the PagesAndResources component when the pages and resources route is active', async () => {
-    render(
-      <CourseAuthoringRoutes />,
-      { routerProps: { initialEntries: ['/pages-and-resources'] } },
-    );
+    render(<CourseAuthoringRoutes />, { routerProps: { initialEntries: ['/pages-and-resources'] } });
     await waitFor(() => {
       expect(screen.getByText(pagesAndResourcesMockText)).toBeVisible();
       expect(mockComponentFn).toHaveBeenCalled();
     });
   });
 
   it('renders the EditorContainer component when the course editor route is active', async () => {
-    render(
-      <CourseAuthoringRoutes />,
-      { routerProps: { initialEntries: ['/editor/video/block-id'] } },
-    );
+    render(<CourseAuthoringRoutes />, { routerProps: { initialEntries: ['/editor/video/block-id'] } });
     await waitFor(() => {
       expect(screen.queryByText(editorContainerMockText)).toBeInTheDocument();
       expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
@@ -86,10 +76,7 @@ describe('<CourseAuthoringRoutes>', () => {
   });
 
   it('renders the VideoSelectorContainer component when the course videos route is active', async () => {
-    render(
-      <CourseAuthoringRoutes />,
-      { routerProps: { initialEntries: ['/editor/course-videos/block-id'] } },
-    );
+    render(<CourseAuthoringRoutes />, { routerProps: { initialEntries: ['/editor/course-videos/block-id'] } });
     await waitFor(() => {
       expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
       expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();