refactor: Editors - convert AnswerWidget, Button, ExpandableTextArea to TypeScript

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx → src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.tsx

@@ -1,35 +1,37 @@
-import React, { memo } from 'react';
-import { connect, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import {
   Collapsible,
   Icon,
   IconButton,
   Form,
 } from '@openedx/paragon';
 import { FeedbackOutline, DeleteOutline } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import { selectors } from '../../../../../data/redux';
-import { answerOptionProps } from '../../../../../data/services/cms/types';
 import Checker from './components/Checker';
 import { FeedbackBox } from './components/Feedback';
 import * as hooks from './hooks';
-import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import { AnswerData, ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
+import { useEditorContext } from '../../../../../EditorContext';
 
-const AnswerOption = ({
+interface Props {
+  answer: AnswerData;
+  hasSingleAnswer: boolean;
+}
+
+export const AnswerOption = ({
   answer,
   hasSingleAnswer,
-  // injected
-  intl,
-  // redux
-  problemType,
-  images,
-  isLibrary,
-  learningContextId,
-}) => {
+}: Props) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
+  const { learningContextId } = useEditorContext();
+  const problemType = useSelector(selectors.problem.problemType);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
   const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
   const setAnswerTitle = hooks.setAnswerTitle({
@@ -43,7 +45,7 @@ const AnswerOption = ({
   const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
 
   const getInputArea = () => {
-    if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType)) {
+    if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType as any)) {
       return (
         <ExpandableTextArea
           value={answer.title}
@@ -113,7 +115,6 @@ const AnswerOption = ({
             answer={answer}
             setSelectedFeedback={setSelectedFeedback}
             setUnselectedFeedback={setUnselectedFeedback}
-            intl={intl}
             {...{
               images,
               isLibrary,
@@ -126,7 +127,7 @@ const AnswerOption = ({
         <Collapsible.Trigger aria-label="Toggle feedback" className="btn-icon btn-icon-primary btn-icon-md align-items-center">
           <Icon
             src={FeedbackOutline}
-            alt={intl.formatMessage(messages.feedbackToggleIconAltText)}
+            screenReaderText={intl.formatMessage(messages.feedbackToggleIconAltText)}
           />
         </Collapsible.Trigger>
         <IconButton
@@ -140,26 +141,3 @@ const AnswerOption = ({
     </Collapsible.Advanced>
   );
 };
-
-AnswerOption.propTypes = {
-  answer: answerOptionProps.isRequired,
-  hasSingleAnswer: PropTypes.bool.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-  // redux
-  problemType: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  problemType: selectors.problem.problemType(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  learningContextId: selectors.app.learningContextId(state),
-});
-
-export const mapDispatchToProps = {};
-export const AnswerOptionInternal = AnswerOption; // For testing only
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption)));

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx → src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.tsx

@@ -1,29 +1,29 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import { Dropdown, Icon } from '@openedx/paragon';
 import { Add } from '@openedx/paragon/icons';
 import messages from './messages';
 import { useAnswerContainer, isSingleAnswerProblem } from './hooks';
 import { actions, selectors } from '../../../../../data/redux';
-import { answerOptionProps } from '../../../../../data/services/cms/types';
-import AnswerOption from './AnswerOption';
+import { AnswerOption } from './AnswerOption';
 import Button from '../../../../../sharedComponents/Button';
-import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+import { ProblemType, ProblemTypeKeys } from '../../../../../data/constants/problem';
 
-const AnswersContainer = ({
-  problemType,
-  // Redux
-  answers,
-  addAnswer,
-  addAnswerRange,
-  updateField,
-}) => {
+interface Props {
+  problemType: ProblemType;
+}
+
+export const AnswersContainer = ({ problemType }: Props) => {
   const hasSingleAnswer = isSingleAnswerProblem(problemType);
+  const answers = useSelector(selectors.problem.answers);
+  const dispatch = useDispatch();
+  const addAnswer = React.useCallback(() => dispatch(actions.problem.addAnswer), [dispatch]);
+  const addAnswerRange = React.useCallback(() => dispatch(actions.problem.addAnswerRange), [dispatch]);
+  const updateField = React.useCallback(() => dispatch(actions.problem.updateField), [dispatch]);
 
-  useAnswerContainer({ answers, problemType, updateField });
+  useAnswerContainer({ answers, updateField });
 
   return (
     <div className="answers-container border border-light-700 rounded py-4 pl-4 pr-3">
@@ -76,24 +76,3 @@ const AnswersContainer = ({
     </div>
   );
 };
-
-AnswersContainer.propTypes = {
-  problemType: PropTypes.string.isRequired,
-  answers: PropTypes.arrayOf(answerOptionProps).isRequired,
-  addAnswer: PropTypes.func.isRequired,
-  addAnswerRange: PropTypes.func.isRequired,
-  updateField: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  answers: selectors.problem.answers(state),
-});
-
-export const mapDispatchToProps = {
-  addAnswer: actions.problem.addAnswer,
-  addAnswerRange: actions.problem.addAnswerRange,
-  updateField: actions.problem.updateField,
-};
-
-export const AnswersContainerInternal = AnswersContainer; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(AnswersContainer);

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx

@@ -37,7 +37,7 @@ Checker.propTypes = {
   hasSingleAnswer: PropTypes.bool.isRequired,
   answer: PropTypes.shape({
     correct: PropTypes.bool,
-    id: PropTypes.number,
+    id: PropTypes.string,
   }).isRequired,
   setAnswer: PropTypes.func.isRequired,
   disabled: PropTypes.bool,

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx → src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
-import { ProblemTypes } from '../../../../../data/constants/problem';
-import AnswersContainer from './AnswersContainer';
+import { ProblemType, ProblemTypes } from '../../../../../data/constants/problem';
+import { AnswersContainer } from './AnswersContainer';
+
+interface Props {
+  problemType: ProblemType;
+}
 
 // This widget should be connected, grab all answers from store, update them as needed.
-const AnswerWidget = ({
-  // Redux
-  problemType,
-  // injected
-  intl,
-}) => {
+export const AnswerWidget = ({ problemType }: Props) => {
+  const intl = useIntl();
   const problemStaticData = ProblemTypes[problemType];
   return (
     <div>
@@ -28,11 +27,3 @@ const AnswerWidget = ({
     </div>
   );
 };
-
-AnswerWidget.propTypes = {
-  problemType: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-export const AnswerWidgetInternal = AnswerWidget; // For testing only
-export default injectIntl(AnswerWidget);

src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx

@@ -9,7 +9,7 @@ import {
   AlertModal,
   ActionRow,
 } from '@openedx/paragon';
-import AnswerWidget from './AnswerWidget';
+import { AnswerWidget } from './AnswerWidget';
 import SettingsWidget from './SettingsWidget';
 import QuestionWidget from './QuestionWidget';
 import EditorContainer from '../../../EditorContainer';

src/editors/data/constants/problem.ts

@@ -239,3 +239,13 @@ export const ignoredOlxAttributes = [
   '@_url_name',
   '@_x-is-pointer-node',
 ] as const;
+
+export interface AnswerData {
+  id: string;
+  title?: string;
+  correct?: boolean;
+  isAnswerRange?: boolean;
+  feedback?: string;
+  selectedFeedback?: string;
+  unselectedFeedback?: string;
+}

src/editors/data/redux/app/selectors.ts

@@ -15,7 +15,7 @@ export const simpleSelectors = {
   blockType: mkSimpleSelector(app => app.blockType),
   blockValue: mkSimpleSelector(app => app.blockValue),
   studioView: mkSimpleSelector(app => app.studioView),
-  /** @deprecated Get as `const { learningContextid } = useEditorContext()` instead */
+  /** @deprecated Get as `const { learningContextId } = useEditorContext()` instead */
   learningContextId: mkSimpleSelector(app => app.learningContextId),
   editorInitialized: mkSimpleSelector(app => app.editorInitialized),
   saveResponse: mkSimpleSelector(app => app.saveResponse),

src/editors/data/redux/index.ts

@@ -8,7 +8,7 @@ import * as video from './video';
 import * as problem from './problem';
 import * as game from './game';
 import type { RequestKeys, RequestStates } from '../constants/requests';
-import { AdvancedProblemType, ProblemType } from '../constants/problem';
+import { AdvancedProblemType, AnswerData, ProblemType } from '../constants/problem';
 
 export { default as thunkActions } from './thunkActions';
 
@@ -148,7 +148,7 @@ export interface EditorState {
     rawOLX: string;
     problemType: null | ProblemType | AdvancedProblemType;
     question: string;
-    answers: any[];
+    answers: AnswerData[];
     correctAnswerCount: number;
     groupFeedbackList: any[];
     generalFeedback: string;

src/editors/data/services/cms/types.ts

@@ -27,6 +27,7 @@ export const videoDataProps = {
 };
 */
 
+/** @deprecated Use `AnswerData` TypeScript type instead (src/editors/data/constants/problem.ts) */
 export const answerOptionProps = PropTypes.shape({
   id: PropTypes.string,
   title: PropTypes.string,

src/editors/sharedComponents/Button/hooks.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Add } from '@openedx/paragon/icons';
+import { Button as ParagonButton } from '@openedx/paragon';
+
+type ButtonProps = React.ComponentProps<typeof ParagonButton>;
+
+export const getButtonProps = ({ variant, className }: { variant: string, className?: string }) => {
+  const variantClasses = {
+    default: 'shared-button',
+    add: 'shared-button pl-0 text-primary-500 button-variant-add',
+  };
+  const variantMap = {
+    add: 'tertiary',
+  };
+  const classes = [variantClasses[variant]];
+  if (className) { classes.push(className); }
+
+  const iconProps: Partial<ButtonProps> = {};
+  if (variant === 'add') { iconProps.iconBefore = Add; }
+
+  return {
+    className: classes.join(' '),
+    variant: variantMap[variant] || variant,
+    ...iconProps,
+  };
+};

src/editors/sharedComponents/Button/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button as ParagonButton } from '@openedx/paragon';
+
+import { getButtonProps } from './hooks';
+import './index.scss';
+
+interface Props extends React.ComponentProps<typeof ParagonButton> {
+  text?: string;
+}
+
+export const Button = ({
+  variant = 'default', className, text, children, ...props
+}: Props) => (
+  <ParagonButton
+    {...getButtonProps({ variant, className })}
+    {...props}
+  >
+    {children || text}
+  </ParagonButton>
+);
+
+export default Button;