feat: separate text response view from editor

Author: muselesscreator

src/components/TextResponse/RichTextEditor.jsx renamed to src/components/TextResponseEditor/RichTextEditor.jsx

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextResponse /> render Rich Text Editor  1`] = `
+<div
+  className="mt-2"
+>
+  <RichTextEditor
+    disabled={true}
+    onChange={[MockFunction onChange]}
+    value="value"
+  />
+</div>
+`;
+
+exports[`<TextResponse /> render Text Editor  1`] = `
+<div
+  className="mt-2"
+>
+  <TextEditor
+    disabled={false}
+    onChange={[MockFunction onChange]}
+    optional={false}
+    value="value"
+  />
+</div>
+`;
+
+exports[`<TextResponseEditor /> render Rich Text Editor  1`] = `
+<div
+  className="mt-2"
+>
+  <RichTextEditor
+    disabled={true}
+    onChange={[MockFunction onChange]}
+    value="value"
+  />
+</div>
+`;
+
+exports[`<TextResponseEditor /> render Text Editor  1`] = `
+<div
+  className="mt-2"
+>
+  <TextEditor
+    disabled={false}
+    onChange={[MockFunction onChange]}
+    optional={false}
+    value="value"
+  />
+</div>
+`;

src/components/TextResponse/RichTextEditor.test.jsx renamed to src/components/TextResponseEditor/RichTextEditor.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import TextEditor from 'components/TextResponseEditor/TextEditor';
+import RichTextEditor from 'components/TextResponseEditor/RichTextEditor';
+
+import './index.scss';
+
+const TextResponseEditor = ({ submissionConfig, value, onChange }) => {
+  const { textResponseConfig } = submissionConfig;
+  const { optional, enabled } = textResponseConfig;
+  const props = {
+    optional,
+    disabled: !enabled,
+    value,
+    onChange,
+  };
+
+  return (
+    <div className="mt-2">
+      {
+        textResponseConfig?.editorType === 'text' ? <TextEditor {...props} /> : <RichTextEditor {...props} />
+      }
+    </div>
+  );
+};
+
+TextResponseEditor.propTypes = {
+  submissionConfig: PropTypes.shape({
+    textResponseConfig: PropTypes.shape({
+      optional: PropTypes.bool,
+      enabled: PropTypes.bool,
+      editorType: PropTypes.string,
+    }),
+  }).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export default TextResponseEditor;

src/components/TextResponse/TextEditor.jsx renamed to src/components/TextResponseEditor/TextEditor.jsx

@@ -0,0 +1,5 @@
+.textarea-response {
+  min-height: 200px;
+  max-height: 300px;
+  overflow-y: scroll;
+}

src/components/TextResponse/TextEditor.test.jsx renamed to src/components/TextResponseEditor/TextEditor.test.jsx

@@ -1,10 +1,10 @@
 import { shallow } from '@edx/react-unit-test-utils';
-import TextResponse from '.';
+import TextResponseEditor from '.';
 
 jest.mock('./TextEditor', () => 'TextEditor');
 jest.mock('./RichTextEditor', () => 'RichTextEditor');
 
-describe('<TextResponse />', () => {
+describe('<TextResponseEditor />', () => {
   const props = {
     submissionConfig: {
       textResponseConfig: {
@@ -19,15 +19,15 @@ describe('<TextResponse />', () => {
   };
 
   it('render Text Editor ', () => {
-    const wrapper = shallow(<TextResponse {...props} />);
+    const wrapper = shallow(<TextResponseEditor {...props} />);
     expect(wrapper.snapshot).toMatchSnapshot();
 
     expect(wrapper.instance.findByType('TextEditor').length).toEqual(1);
     expect(wrapper.instance.findByType('RichTextEditor').length).toEqual(0);
   });
 
   it('render Rich Text Editor ', () => {
-    const wrapper = shallow(<TextResponse {...props} submissionConfig={{ textResponseConfig: { editorType: 'rich-text' } }} />);
+    const wrapper = shallow(<TextResponseEditor {...props} submissionConfig={{ textResponseConfig: { editorType: 'rich-text' } }} />);
     expect(wrapper.snapshot).toMatchSnapshot();
 
     expect(wrapper.instance.findByType('TextEditor').length).toEqual(0);