refactor: convert AddComponent to typescript

Author: navinkarkera

…unit/add-component/AddComponent.test.jsx …unit/add-component/AddComponent.test.tsxsrc/course-unit/add-component/AddComponent.test.jsx renamed to src/course-unit/add-component/AddComponent.test.tsx src/course-unit/add-component/AddComponent.test.jsx renamed to src/course-unit/add-component/AddComponent.test.tsx

@@ -14,7 +14,7 @@ import { fetchCourseSectionVerticalData } from '../data/thunk';
 import { getCourseSectionVerticalApiUrl } from '../data/api';
 import { courseSectionVerticalMock } from '../__mocks__';
 import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
-import AddComponent from './AddComponent';
+import AddComponent, { AddComponentProps } from './AddComponent';
 import messages from './messages';
 import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
 import { messageTypes } from '../constants';
@@ -56,13 +56,11 @@ jest.mock('../../generic/hooks/context/hooks', () => ({
   }),
 }));
 
-const renderComponent = (props) => render(
+const renderComponent = (props?: AddComponentProps) => render(
   <IframeProvider>
     <AddComponent
-      blockId={blockId}
       isUnitVerticalType
       parentLocator={blockId}
-      addComponentTemplateData={{}}
       handleCreateNewCourseXBlock={handleCreateNewCourseXBlockMock}
       {...props}
     />
@@ -94,7 +92,7 @@ describe('<AddComponent />', () => {
         ),
       });
       expect(btn).toBeInTheDocument();
-      if (component.beta) {
+      if (componentTemplates[component].beta) {
         expect(within(btn).queryByText('Beta')).toBeInTheDocument();
       }
     });

…urse-unit/add-component/AddComponent.jsx …urse-unit/add-component/AddComponent.tsxsrc/course-unit/add-component/AddComponent.jsx renamed to src/course-unit/add-component/AddComponent.tsx src/course-unit/add-component/AddComponent.jsx renamed to src/course-unit/add-component/AddComponent.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -21,6 +20,41 @@ import { useEventListener } from '../../generic/hooks';
 import VideoSelectorPage from '../../editors/VideoSelectorPage';
 import EditorPage from '../../editors/EditorPage';
 import { fetchCourseSectionVerticalData } from '../data/thunk';
+import { SelectedComponent } from '../../library-authoring';
+
+type ComponentTemplateData = {
+  displayName: string,
+  category?: string,
+  type: string,
+  beta?: boolean,
+  templates: Array<{
+    boilerplateName?: string,
+    category?: string,
+    displayName: string,
+    supportLevel?: string | boolean,
+  }>,
+  supportLegend: {
+    allowUnsupportedXblocks?: boolean,
+    documentationLabel?: string,
+    showLegend?: boolean,
+  },
+};
+
+export interface AddComponentProps {
+  isSplitTestType?: boolean,
+  isUnitVerticalType?: boolean,
+  parentLocator: string,
+  handleCreateNewCourseXBlock: (
+    args: object,
+    callback?: (args: { courseKey: string, locator: string }) => void
+  ) => void,
+  isProblemBankType?: boolean,
+  addComponentTemplateData?: {
+    blockId: string,
+    parentLocator?: string,
+    model: ComponentTemplateData,
+  },
+}
 
 const AddComponent = ({
   parentLocator,
@@ -29,24 +63,24 @@ const AddComponent = ({
   isProblemBankType,
   addComponentTemplateData,
   handleCreateNewCourseXBlock,
-}) => {
+}: AddComponentProps) => {
   const intl = useIntl();
   const dispatch = useDispatch();
 
   const [isOpenAdvanced, openAdvanced, closeAdvanced] = useToggle(false);
   const [isOpenHtml, openHtml, closeHtml] = useToggle(false);
   const [isOpenOpenAssessment, openOpenAssessment, closeOpenAssessment] = useToggle(false);
   const { componentTemplates = {} } = useSelector(getCourseSectionVertical);
-  const blockId = addComponentTemplateData.parentLocator || parentLocator;
+  const blockId = addComponentTemplateData?.parentLocator || parentLocator;
   const [isAddLibraryContentModalOpen, showAddLibraryContentModal, closeAddLibraryContentModal] = useToggle();
   const [isVideoSelectorModalOpen, showVideoSelectorModal, closeVideoSelectorModal] = useToggle();
   const [isXBlockEditorModalOpen, showXBlockEditorModal, closeXBlockEditorModal] = useToggle();
 
-  const [blockType, setBlockType] = useState(null);
-  const [courseId, setCourseId] = useState(null);
-  const [newBlockId, setNewBlockId] = useState(null);
+  const [blockType, setBlockType] = useState<string | null>(null);
+  const [courseId, setCourseId] = useState<string | null>(null);
+  const [newBlockId, setNewBlockId] = useState<string | null>(null);
   const [isSelectLibraryContentModalOpen, showSelectLibraryContentModal, closeSelectLibraryContentModal] = useToggle();
-  const [selectedComponents, setSelectedComponents] = useState([]);
+  const [selectedComponents, setSelectedComponents] = useState<SelectedComponent[]>([]);
   const [usageId, setUsageId] = useState(null);
   const { sendMessageToIframe } = useIframe();
   const { useVideoGalleryFlow } = useWaffleFlags(courseId ?? undefined);
@@ -85,7 +119,7 @@ const AddComponent = ({
     dispatch(fetchCourseSectionVerticalData(blockId, sequenceId));
   }, [closeXBlockEditorModal, closeVideoSelectorModal, sendMessageToIframe, blockId, sequenceId]);
 
-  const handleLibraryV2Selection = useCallback((selection) => {
+  const handleLibraryV2Selection = useCallback((selection: SelectedComponent) => {
     handleCreateNewCourseXBlock({
       type: COMPONENT_TYPES.libraryV2,
       category: selection.blockType,
@@ -95,7 +129,7 @@ const AddComponent = ({
     closeAddLibraryContentModal();
   }, [usageId]);
 
-  const handleCreateNewXBlock = (type, moduleName) => {
+  const handleCreateNewXBlock = (type: string, moduleName?: string) => {
     switch (type) {
       case COMPONENT_TYPES.discussion:
       case COMPONENT_TYPES.dragAndDrop:
@@ -164,9 +198,9 @@ const AddComponent = ({
           <>
             <h5 className="h3 mb-4 text-center">{intl.formatMessage(messages.title)}</h5>
             <ul className="new-component-type list-unstyled m-0 d-flex flex-wrap justify-content-center">
-              {componentTemplates.map((component) => {
+              {componentTemplates.map((component: ComponentTemplateData) => {
                 const { type, displayName, beta } = component;
-                let modalParams;
+                let modalParams: { open: () => void, close: () => void, isOpen: boolean };
 
                 if (!component.templates.length) {
                   return null;
@@ -269,7 +303,7 @@ const AddComponent = ({
             />
           </div>
         </StandardModal>
-        {isXBlockEditorModalOpen && (
+        {isXBlockEditorModalOpen && courseId && blockType && newBlockId && (
           <div className="editor-page">
             <EditorPage
               courseId={courseId}
@@ -289,32 +323,4 @@ const AddComponent = ({
   return null;
 };
 
-AddComponent.propTypes = {
-  isSplitTestType: PropTypes.bool.isRequired,
-  isUnitVerticalType: PropTypes.bool.isRequired,
-  parentLocator: PropTypes.string.isRequired,
-  handleCreateNewCourseXBlock: PropTypes.func.isRequired,
-  addComponentTemplateData: {
-    blockId: PropTypes.string.isRequired,
-    model: PropTypes.shape({
-      displayName: PropTypes.string.isRequired,
-      category: PropTypes.string,
-      type: PropTypes.string.isRequired,
-      templates: PropTypes.arrayOf(
-        PropTypes.shape({
-          boilerplateName: PropTypes.string,
-          category: PropTypes.string,
-          displayName: PropTypes.string.isRequired,
-          supportLevel: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-        }),
-      ),
-      supportLegend: PropTypes.shape({
-        allowUnsupportedXblocks: PropTypes.bool,
-        documentationLabel: PropTypes.string,
-        showLegend: PropTypes.bool,
-      }),
-    }),
-  },
-};
-
 export default AddComponent;

src/course-unit/hooks.jsx

@@ -72,7 +72,10 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const isUnitVerticalType = unitCategory === COURSE_BLOCK_NAMES.vertical.id;
   const isUnitLibraryType = unitCategory === COURSE_BLOCK_NAMES.libraryContent.id;
   const isSplitTestType = unitCategory === COURSE_BLOCK_NAMES.splitTest.id;
-  const isProblemBankType = [COURSE_BLOCK_NAMES.legacyLibraryContent.id, COURSE_BLOCK_NAMES.itembank.id].includes(unitCategory);
+  const isProblemBankType = [
+    COURSE_BLOCK_NAMES.legacyLibraryContent.id,
+    COURSE_BLOCK_NAMES.itembank.id,
+  ].includes(unitCategory);
 
   const headerNavigationsActions = {
     handleViewLive: () => {

src/library-authoring/component-picker/ComponentPicker.tsx

@@ -56,11 +56,11 @@ type ComponentPickerProps = {
 } & (
   {
     componentPickerMode?: 'single',
-    onComponentSelected?: ComponentSelectedEvent,
-    onChangeComponentSelection?: never,
+    onComponentSelected: ComponentSelectedEvent,
+    onChangeComponentSelection?: ComponentSelectionChangedEvent,
   } | {
-    componentPickerMode: 'multiple'
-    onComponentSelected?: never,
+    componentPickerMode?: 'multiple'
+    onComponentSelected?: ComponentSelectedEvent,
     onChangeComponentSelection?: ComponentSelectionChangedEvent,
   }
 );