chore: update logic and rewrite in typescript

src/components/Rubric/CriterionContainer/CriterionFeedback.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import CriterionFeedback  from './CriterionFeedback';
+
+describe('<CriterionFeedback />', () => {
+  const props = {
+    criterion: {
+      feedbackValue: 'feedback-1',
+      feedbackIsInvalid: false,
+      feedbackOnChange: jest.fn().mockName('feedbackOnChange'),
+      feedbackEnabled: true,
+      feedbackRequired: true,
+    },
+  };
+  describe('renders', () => {
+    test('feedbackEnabled', () => {
+      const wrapper = shallow(<CriterionFeedback {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+
+    test('feedbackDisabled', () => {
+      const wrapper = shallow(<CriterionFeedback {...props} criterion={{ ...props.criterion, feedbackEnabled: false }} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

src/components/Rubric/CriterionContainer/CriterionFeedback.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { InferProps } from 'prop-types';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { feedbackRequirement } from 'data/services/lms/constants';
+
+import messages from './messages';
+import { Criterion } from '../hooks';
+
+type CriterionFeedbackProps = {
+  criterion: Pick<
+    Criterion,
+    | 'feedbackValue'
+    | 'feedbackIsInvalid'
+    | 'feedbackOnChange'
+    | 'feedbackEnabled'
+    | 'feedbackRequired'
+  >;
+};
+
+/**
+ * <CriterionFeedback />
+ */
+const CriterionFeedback = ({ criterion }: CriterionFeedbackProps) => {
+  const { formatMessage } = useIntl();
+
+  let commentMessage = formatMessage(messages.addComments);
+  if (criterion.feedbackRequired === feedbackRequirement.optional) {
+    commentMessage += ` ${formatMessage(messages.optional)}`;
+  }
+
+  const { feedbackValue, feedbackIsInvalid, feedbackOnChange } = criterion;
+
+  if (
+    !criterion.feedbackEnabled ||
+    criterion.feedbackRequired === feedbackRequirement.disabled
+  ) {
+    return null;
+  }
+
+  return (
+    <Form.Group isInvalid={feedbackIsInvalid}>
+      <Form.Control
+        as='textarea'
+        className='criterion-feedback feedback-input'
+        floatingLabel={commentMessage}
+        value={feedbackValue}
+        onChange={feedbackOnChange}
+      />
+      {feedbackIsInvalid && (
+        <Form.Control.Feedback type='invalid' className='feedback-error-msg'>
+          {formatMessage(messages.criterionFeedbackError)}
+        </Form.Control.Feedback>
+      )}
+    </Form.Group>
+  );
+};
+
+export default CriterionFeedback;

src/components/Rubric/CriterionContainer/RadioCriterion.test.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import RadioCriterion  from './RadioCriterion';
+
+describe('<RadioCriterion />', () => {
+  const props = {
+    isGrading: true,
+    criterion: {
+      name: "criterion-1",
+      optionsValue: 'option-1',
+      optionsIsInvalid: true,
+      optionsOnChange: jest.fn().mockName('optionsOnChange'),
+      options: [
+        {
+          name: 'option-1',
+          description: 'description-1',
+          points: 1,
+        },
+        {
+          name: 'option-2',
+          description: 'description-2',
+          points: 2,
+        },
+      ],
+    },
+  };
+  describe('renders', () => {
+    test('optins is invalid', () => {
+      const wrapper = shallow(<RadioCriterion {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+
+    test('options is valid', () => {
+      const wrapper = shallow(<RadioCriterion {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+
+    test('not isGrading', () => {
+      const wrapper = shallow(<RadioCriterion {...props} isGrading={false} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+});

src/components/Rubric/CriterionContainer/RadioCriterion.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import messages from './messages';
+import { Criterion } from '../hooks';
+
+type RadioCriterionProps = {
+  isGrading: boolean;
+  criterion: Pick<
+    Criterion,
+    'optionsValue' | 'optionsIsInvalid' | 'optionsOnChange' | 'name' | 'options'
+  >;
+};
+
+/**
+ * <RadioCriterion />
+ */
+const RadioCriterion = ({ isGrading, criterion }: RadioCriterionProps) => {
+  const { formatMessage } = useIntl();
+
+  const { optionsValue, optionsIsInvalid, optionsOnChange } = criterion;
+
+  return (
+    <Form.RadioSet name={criterion.name} value={optionsValue}>
+      {criterion.options.map((option) => (
+        <Form.Radio
+          className='criteria-option'
+          key={option.name}
+          value={option.name}
+          description={formatMessage(messages.optionPoints, {
+            points: option.points,
+          })}
+          onChange={optionsOnChange}
+          disabled={!isGrading}
+        >
+          {option.name}
+        </Form.Radio>
+      ))}
+      {optionsIsInvalid && (
+        <Form.Control.Feedback type='invalid' className='feedback-error-msg'>
+          {formatMessage(messages.rubricSelectedError)}
+        </Form.Control.Feedback>
+      )}
+    </Form.RadioSet>
+  );
+};
+
+export default RadioCriterion;

src/components/Rubric/CriterionContainer/ReviewCriterion.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import ReviewCriterion  from './ReviewCriterion';
+
+describe('<ReviewCriterion />', () => {
+  const props = {
+    criterion: {
+      options: [
+        {
+          name: 'option-1',
+          description: 'description-1',
+          points: 1,
+        },
+        {
+          name: 'option-2',
+          description: 'description-2',
+          points: 2,
+        },
+      ],
+    },
+  };
+
+  test('renders', () => {
+    const wrapper = shallow(<ReviewCriterion {...props} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});

src/components/Rubric/CriterionContainer/ReviewCriterion.jsx → src/components/Rubric/CriterionContainer/ReviewCriterion.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import { Form, FormControlFeedback } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
+import { Criterion } from '../hooks';
+
+type ReviewCriterionProps = {
+  criterion: Pick<Criterion, 'options'>;
+};
 
 /**
  * <ReviewCriterion />
  */
-const ReviewCriterion = ({ criterion }) => (
+const ReviewCriterion = ({ criterion }: ReviewCriterionProps) => (
   <div className="review-criterion">
     {criterion.options.map((option) => (
       <div key={option.name} className="criteria-option">
@@ -24,16 +28,4 @@ const ReviewCriterion = ({ criterion }) => (
   </div>
 );
 
-ReviewCriterion.propTypes = {
-  criterion: PropTypes.shape({
-    options: PropTypes.arrayOf(
-      PropTypes.shape({
-        description: PropTypes.string,
-        name: PropTypes.string,
-        points: PropTypes.number,
-      }),
-    ),
-  }).isRequired,
-};
-
 export default ReviewCriterion;

src/components/Rubric/CriterionContainer/__snapshots__/CriterionFeedback.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CriterionFeedback /> renders feedbackDisabled 1`] = `null`;
+
+exports[`<CriterionFeedback /> renders feedbackEnabled 1`] = `null`;