refactor: improve code formatting and structure in VideoEditorModal and related components

Author: bra-i-am

src/editors/containers/VideoEditor/components/VideoEditorModal.test.tsx

@@ -41,14 +41,16 @@ describe('VideoUploader', () => {
     initializeMocks();
   });
 
-  const renderComponent = () => editorRender(
-    <VideoEditorModal isLibrary={false} />,
-    {
-      routerProps: {
-        initialEntries: ['/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com'],
+  const renderComponent = () => (
+    editorRender(
+      <VideoEditorModal isLibrary={false} />,
+      {
+        routerProps: {
+          initialEntries: ['/some/path?selectedVideoId=id_1&selectedVideoUrl=https://video.com'],
+        },
+        initialState,
       },
-      initialState,
-    },
+    )
   );
 
   it('should render the component and call loadVideoData with correct parameters', async () => {

src/editors/containers/VideoEditor/components/VideoEditorModal.tsx

@@ -49,12 +49,13 @@ const VideoEditorModal: React.FC<Props> = ({
   }, [isLoaded, dispatch, selectedVideoId, selectedVideoUrl]);
 
   return (
-    <VideoSettingsModal {...{
-      onReturn: onSettingsReturn,
-      isLibrary,
-      onClose,
-      useNewVideoUploadsPage,
-    }}
+    <VideoSettingsModal
+      {...{
+        onReturn: onSettingsReturn,
+        isLibrary,
+        onClose,
+        useNewVideoUploadsPage,
+      }}
     />
   );
   // TODO: add logic to show SelectVideoModal if no selection

src/editors/containers/VideoEditor/components/VideoSettingsModal/index.test.tsx

@@ -1,5 +1,7 @@
 import {
-  screen, fireEvent, initializeMocks,
+  screen,
+  fireEvent,
+  initializeMocks,
 } from '@src/testUtils';
 import { editorRender } from '@src/editors/editorTestRender';
 import VideoSettingsModal from '.';

src/editors/containers/VideoEditor/components/VideoSettingsModal/index.tsx

@@ -49,9 +49,7 @@ const VideoSettingsModal: React.FC<Props> = ({
     <ErrorSummary />
     <ConnectedVideoPreviewWidget />
     <VideoSourceWidget />
-    {!isLibrary && (
-      <SocialShareWidget />
-    )}
+    {!isLibrary && <SocialShareWidget />}
     <ThumbnailWidget />
     <TranscriptWidget />
     <DurationWidget />

src/editors/containers/VideoGallery/hooks.test.jsx

@@ -9,22 +9,25 @@ jest.mock('react-redux', () => {
   const actual = jest.requireActual('react-redux');
   return {
     ...actual,
-    useSelector: jest.fn((selectorFn) => selectorFn({
-      app: {
-        learningContextId: 'course-v1:id',
-        blockId: 'block-v1:id',
-      },
-    })),
+    useSelector: jest.fn((selectorFn) =>
+      selectorFn({
+        app: {
+          learningContextId: 'course-v1:id',
+          blockId: 'block-v1:id',
+        },
+      })
+    ),
   };
 });
 
 jest.mock('../../hooks', () => ({
   navigateTo: jest.fn(),
 }));
 
-const createStore = (customState = {}) => configureStore({
-  reducer: () => customState,
-});
+const createStore = (customState = {}) =>
+  configureStore({
+    reducer: () => customState,
+  });
 
 describe('hooks module', () => {
   describe('useSearchAndSortProps', () => {
@@ -112,21 +115,20 @@ describe('hooks module', () => {
       jest.clearAllMocks();
     });
 
-    const wrapper = ({ children }) => (
-      <Provider store={createStore()}>{children}</Provider>
-    );
+    const wrapper = ({ children }) => <Provider store={createStore()}>{children}</Provider>;
 
     it('navigates to video editor when a video is selected', async () => {
       const { result } = renderHook(
-        () => hooks.useVideoListProps({
-          searchSortProps: {
-            searchString: '',
-            sortBy: 'dateNewest',
-            filterBy: filterKeys.anyStatus,
-            hideSelectedVideos: false,
-          },
-          videos,
-        }),
+        () =>
+          hooks.useVideoListProps({
+            searchSortProps: {
+              searchString: '',
+              sortBy: 'dateNewest',
+              filterBy: filterKeys.anyStatus,
+              hideSelectedVideos: false,
+            },
+            videos,
+          }),
         { wrapper },
       );
 
@@ -145,15 +147,16 @@ describe('hooks module', () => {
 
     it('sets showSelectVideoError to true if no video is selected', () => {
       const { result } = renderHook(
-        () => hooks.useVideoListProps({
-          searchSortProps: {
-            searchString: '',
-            sortBy: 'dateNewest',
-            filterBy: filterKeys.anyStatus,
-            hideSelectedVideos: false,
-          },
-          videos,
-        }),
+        () =>
+          hooks.useVideoListProps({
+            searchSortProps: {
+              searchString: '',
+              sortBy: 'dateNewest',
+              filterBy: filterKeys.anyStatus,
+              hideSelectedVideos: false,
+            },
+            videos,
+          }),
         { wrapper },
       );
 

src/editors/editorTestRender.tsx

@@ -23,7 +23,10 @@ export const editorRender = (
     initialState = {},
     learningContextId = 'course-v1:Org+COURSE+RUN',
     ...options
-  }: Omit<WrapperOptions, 'extraWrapper'> & RouteOptions & { initialState?: PartialEditorState, learningContextId?: string } = {},
+  }:
+    & Omit<WrapperOptions, 'extraWrapper'>
+    & RouteOptions
+    & { initialState?: PartialEditorState; learningContextId?: string; } = {},
 ) => {
   editorStore = createStore(initialState);