refactor: convert <UnitButton> and <UnitIcon> to TSX (#2649)

Author: bradenmacdonald

…uence/sequence-navigation/UnitButton.jsx …uence/sequence-navigation/UnitButton.tsxsrc/course-unit/course-sequence/sequence-navigation/UnitButton.jsx renamed to src/course-unit/course-sequence/sequence-navigation/UnitButton.tsx src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx renamed to src/course-unit/course-sequence/sequence-navigation/UnitButton.tsx

@@ -1,21 +1,29 @@
-import PropTypes from 'prop-types';
+import { type FC } from 'react';
 import { useSelector } from 'react-redux';
 import { Button } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
+import { DeprecatedReduxState } from '@src/store';
+import { getCourseId, getSequenceId } from '@src/course-unit/data/selectors';
 import UnitIcon from './UnitIcon';
-import { getCourseId, getSequenceId } from '../../data/selectors';
 
-const UnitButton = ({
+interface Props {
+  unitId: string;
+  className?: string;
+  showTitle?: boolean;
+  isActive?: boolean;
+}
+
+const UnitButton: FC<Props> = ({
   unitId,
   className,
-  showTitle,
   isActive, // passed from parent (SequenceNavigationTabs)
+  showTitle = false,
 }) => {
   const courseId = useSelector(getCourseId);
   const sequenceId = useSelector(getSequenceId);
 
-  const unit = useSelector((state) => state.models.units[unitId]);
+  const unit = useSelector((state: DeprecatedReduxState) => state.models.units[unitId]);
   const { title, contentType } = unit || {};
 
   return (
@@ -33,17 +41,4 @@ const UnitButton = ({
   );
 };
 
-UnitButton.propTypes = {
-  className: PropTypes.string,
-  showTitle: PropTypes.bool,
-  unitId: PropTypes.string.isRequired,
-  isActive: PropTypes.bool,
-};
-
-UnitButton.defaultProps = {
-  className: undefined,
-  showTitle: false,
-  isActive: false,
-};
-
 export default UnitButton;

…equence/sequence-navigation/UnitIcon.jsx …equence/sequence-navigation/UnitIcon.tsxsrc/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx renamed to src/course-unit/course-sequence/sequence-navigation/UnitIcon.tsx src/course-unit/course-sequence/sequence-navigation/UnitIcon.jsx renamed to src/course-unit/course-sequence/sequence-navigation/UnitIcon.tsx

@@ -1,17 +1,17 @@
-import PropTypes from 'prop-types';
+import { type FC } from 'react';
 import { Icon } from '@openedx/paragon';
 import { BookOpen as BookOpenIcon } from '@openedx/paragon/icons';
 
-import { UNIT_TYPE_ICONS_MAP, UNIT_ICON_TYPES } from '../../../generic/block-type-utils/constants';
+import { UNIT_TYPE_ICONS_MAP } from '@src/generic/block-type-utils/constants';
 
-const UnitIcon = ({ type }) => {
+interface Props {
+  type: keyof typeof UNIT_TYPE_ICONS_MAP;
+}
+
+const UnitIcon: FC<Props> = ({ type }) => {
   const icon = UNIT_TYPE_ICONS_MAP[type] || BookOpenIcon;
 
   return <Icon src={icon} screenReaderText={type} />;
 };
 
-UnitIcon.propTypes = {
-  type: PropTypes.oneOf(UNIT_ICON_TYPES).isRequired,
-};
-
 export default UnitIcon;

src/generic/block-type-utils/constants.ts

@@ -21,8 +21,6 @@ import {
 } from '@openedx/paragon/icons';
 import NewsstandIcon from '../NewsstandIcon';
 
-export const UNIT_ICON_TYPES = ['video', 'other', 'vertical', 'problem', 'lock'];
-
 export const COMPONENT_TYPES = {
   advanced: 'advanced',
   discussion: 'discussion',