fix: warning: The prop onClose marked as required in SelectTypeModal

src/editors/Editor.jsx → src/editors/Editor.tsx

@@ -1,21 +1,29 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import * as hooks from './hooks';
 
 import supportedEditors from './supportedEditors';
+import type { EditorComponent } from './EditorComponent';
 
-const Editor = ({
-  learningContextId,
+export interface Props extends EditorComponent {
+  blockType: string;
+  blockId?: string | null;
+  learningContextId?: string | null;
+  lmsEndpointUrl?: string | null;
+  studioEndpointUrl?: string | null;
+}
+
+const Editor: React.FC<Props> = ({
+  learningContextId = null,
   blockType,
-  blockId,
-  lmsEndpointUrl,
-  studioEndpointUrl,
-  onClose,
-  returnFunction,
+  blockId = null,
+  lmsEndpointUrl = null,
+  studioEndpointUrl = null,
+  onClose = null,
+  returnFunction = null,
 }) => {
   const dispatch = useDispatch();
   hooks.initializeApp({
@@ -46,23 +54,5 @@ const Editor = ({
     </div>
   );
 };
-Editor.defaultProps = {
-  blockId: null,
-  learningContextId: null,
-  lmsEndpointUrl: null,
-  onClose: null,
-  returnFunction: null,
-  studioEndpointUrl: null,
-};
-
-Editor.propTypes = {
-  blockId: PropTypes.string,
-  blockType: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string,
-  lmsEndpointUrl: PropTypes.string,
-  onClose: PropTypes.func,
-  returnFunction: PropTypes.func,
-  studioEndpointUrl: PropTypes.string,
-};
 
 export default Editor;

src/editors/EditorComponent.ts

@@ -0,0 +1,6 @@
+/** Shared interface that all Editor components (like ProblemEditor) adhere to */
+export interface EditorComponent {
+  onClose: (() => void) | null;
+  // TODO: get a better type for the 'result' here
+  returnFunction?: (() => (result: any) => void) | null;
+}

src/editors/containers/ProblemEditor/components/SelectTypeModal/index.jsx → src/editors/containers/ProblemEditor/components/SelectTypeModal/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Row, Stack } from '@openedx/paragon';
 import ProblemTypeSelect from './content/ProblemTypeSelect';
@@ -9,7 +8,11 @@ import SelectTypeWrapper from './SelectTypeWrapper';
 import * as hooks from './hooks';
 import { AdvanceProblemKeys } from '../../../../data/constants/problem';
 
-const SelectTypeModal = ({
+interface Props {
+  onClose: (() => void) | null;
+}
+
+const SelectTypeModal: React.FC<Props> = ({
   onClose,
 }) => {
   const { selected, setSelected } = hooks.selectHooks();
@@ -29,8 +32,4 @@ const SelectTypeModal = ({
   );
 };
 
-SelectTypeModal.propTypes = {
-  onClose: PropTypes.func.isRequired,
-};
-
 export default SelectTypeModal;

src/editors/containers/ProblemEditor/index.tsx

@@ -8,10 +8,9 @@ import { selectors, thunkActions } from '../../data/redux';
 import { RequestKeys } from '../../data/constants/requests';
 import messages from './messages';
 import { ProblemType } from '../../data/constants/problem';
+import type { EditorComponent } from '../../EditorComponent';
 
-interface Props {
-  onClose: () => void | null;
-  returnFunction?: () => (result: any) => void | null;
+export interface Props extends EditorComponent {
   // redux
   advancedSettingsFinished: boolean;
   blockFinished: boolean;

src/editors/supportedEditors.js → src/editors/supportedEditors.ts

@@ -15,6 +15,6 @@ const supportedEditors = {
   [blockTypes.video_upload]: VideoUploadEditor,
   // ADDED_EDITORS GO BELOW
   [blockTypes.game]: GameEditor,
-};
+} as const;
 
 export default supportedEditors;