refactor: Replace connect with useSelector() and useDispatch() 2/5 #231

Author: Ahtesham Quraish

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -9,27 +8,31 @@ import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
 import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
 
-const ExplanationWidget = ({
-  // redux
-  settings,
-  learningContextId,
-  images,
-  isLibrary,
-  blockId,
-}) => {
+const ExplanationWidget = () => {
   const intl = useIntl();
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+
+  // Select state values using useSelector
+  const settings = useSelector(selectors.problem.settings);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const blockId = useSelector(selectors.app.blockId);
+
   const initialContent = settings?.solutionExplanation || '';
   const newContent = replaceStaticWithAsset({
     initialContent,
     learningContextId,
   });
   const solutionContent = newContent || initialContent;
+
   let staticRootUrl;
   if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`;
   }
+
   if (!refReady) { return null; }
+
   return (
     <div className="tinyMceWidget mt-4 text-primary-500">
       <div className="h4 mb-3">
@@ -57,22 +60,4 @@ const ExplanationWidget = ({
   );
 };
 
-ExplanationWidget.propTypes = {
-  // redux
-  // eslint-disable-next-line
-  settings: PropTypes.any.isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  blockId: PropTypes.string.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  settings: selectors.problem.settings(state),
-  learningContextId: selectors.app.learningContextId(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  blockId: selectors.app.blockId(state),
-});
-
-export const ExplanationWidgetInternal = ExplanationWidget; // For testing only
-export default connect(mapStateToProps)(ExplanationWidget);
+export default ExplanationWidget;

src/editors/containers/ProblemEditor/components/EditProblemView/ExplanationWidget/index.test.tsx

@@ -1,27 +1,8 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import ExplanationWidget from '.';
-
-jest.mock('../../../../../data/redux', () => ({
-  __esModule: true,
-  default: jest.fn(),
-  selectors: {
-    problem: {
-      settings: jest.fn(state => ({ question: state })),
-    },
-    app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-      images: jest.fn(state => ({ images: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-      blockId: jest.fn(state => ({ blockId: state })),
-    },
-  },
-  thunkActions: {
-    video: {
-      importTranscript: jest.fn(),
-    },
-  },
-}));
+import { screen, initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../modifiedEditorTestRender';
+import ExplanationWidget from './index';
+import { initializeStore } from '../../../../../data/redux';
 
 jest.mock('../../../../../sharedComponents/TinyMceWidget/hooks', () => ({
   ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
@@ -36,19 +17,27 @@ jest.mock('../../../../../sharedComponents/TinyMceWidget', () => ({
   default: () => <div>TinyMceWidget</div>,
 }));
 
-describe('SolutionWidget', () => {
-  const props = {
+const initialState = {
+  problem: {
     settings: { solutionExplanation: 'This is my solution' },
+  },
+  app: {
     learningContextId: 'course+org+run',
     images: {},
     isLibrary: false,
     blockId: 'block-v1:Org+TS100+24+type@html+block@12345',
-  };
+  },
+};
+
+describe('SolutionWidget', () => {
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({
+      initializeStore,
+      initialState,
+    });
   });
   test('renders correct default', () => {
-    render(<ExplanationWidget {...props} />);
+    editorRender(<ExplanationWidget />, { initialState });
     expect(screen.getByText('Explanation')).toBeInTheDocument();
     expect(screen.getByText('Provide an explanation for the correct answer')).toBeInTheDocument();
     expect(screen.getByText('TinyMceWidget')).toBeInTheDocument();

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

@@ -1,36 +1,40 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
+import { useSelector } from 'react-redux';
+import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
 import { selectors } from '../../../../../data/redux';
 import messages from './messages';
 import TinyMceWidget from '../../../../../sharedComponents/TinyMceWidget';
-import { prepareEditorRef, replaceStaticWithAsset } from '../../../../../sharedComponents/TinyMceWidget/hooks';
+import {
+  prepareEditorRef,
+  replaceStaticWithAsset,
+} from '../../../../../sharedComponents/TinyMceWidget/hooks';
+
+const QuestionWidget = () => {
+  const intl = useIntl();
+  const question = useSelector(selectors.problem.question);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const blockId = useSelector(selectors.app.blockId);
 
-const QuestionWidget = ({
-  // redux
-  question,
-  learningContextId,
-  images,
-  isLibrary,
-  blockId,
-  // injected
-  intl,
-}) => {
   const { editorRef, refReady, setEditorRef } = prepareEditorRef();
+
   const initialContent = question;
   const newContent = replaceStaticWithAsset({
     initialContent,
     learningContextId,
   });
   const questionContent = newContent || initialContent;
+
   let staticRootUrl;
   if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
+    staticRootUrl = `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`;
   }
+
   if (!refReady) { return null; }
+
   return (
     <div className="tinyMceWidget">
       <div className="h4 mb-3">
@@ -55,23 +59,4 @@ const QuestionWidget = ({
   );
 };
 
-QuestionWidget.propTypes = {
-  // redux
-  question: PropTypes.string.isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  blockId: PropTypes.string.isRequired,
-  // injected
-  intl: intlShape.isRequired,
-};
-export const mapStateToProps = (state) => ({
-  question: selectors.problem.question(state),
-  learningContextId: selectors.app.learningContextId(state),
-  images: selectors.app.images(state),
-  isLibrary: selectors.app.isLibrary(state),
-  blockId: selectors.app.blockId(state),
-});
-
-export const QuestionWidgetInternal = QuestionWidget; // For testing only
-export default injectIntl(connect(mapStateToProps)(QuestionWidget));
+export default QuestionWidget;

src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.test.tsx

@@ -1,33 +1,8 @@
 import React from 'react';
-import { render, screen, initializeMocks } from '@src/testUtils';
-import { formatMessage } from '@src/editors/testUtils';
-import { QuestionWidgetInternal as QuestionWidget } from '.';
-
-jest.mock('@src/editors/data/redux', () => ({
-  __esModule: true,
-  default: jest.fn(),
-  actions: {
-    problem: {
-      updateQuestion: jest.fn().mockName('actions.problem.updateQuestion'),
-    },
-  },
-  selectors: {
-    app: {
-      learningContextId: jest.fn(state => ({ learningContextId: state })),
-      images: jest.fn(state => ({ images: state })),
-      isLibrary: jest.fn(state => ({ isLibrary: state })),
-      blockId: jest.fn(state => ({ blockId: state })),
-    },
-    problem: {
-      question: jest.fn(state => ({ question: state })),
-    },
-  },
-  thunkActions: {
-    video: {
-      importTranscript: jest.fn(),
-    },
-  },
-}));
+import { screen, initializeMocks } from '@src/testUtils';
+import editorRender from '../../../../../modifiedEditorTestRender';
+import { initializeStore } from '../../../../../data/redux';
+import QuestionWidget from '.';
 
 jest.mock('@src/editors/sharedComponents/TinyMceWidget/hooks', () => ({
   ...jest.requireActual('../../../../../sharedComponents/TinyMceWidget/hooks'),
@@ -39,23 +14,28 @@ jest.mock('@src/editors/sharedComponents/TinyMceWidget/hooks', () => ({
 
 jest.mock('@src/editors/sharedComponents/TinyMceWidget', () => ('TinyMceWidget'));
 
-describe('QuestionWidget', () => {
-  const props = {
+const initialState = {
+  problem: {
     question: 'This is my question',
-    updateQuestion: jest.fn(),
+  },
+  app: {
     learningContextId: 'course+org+run',
     images: {},
     isLibrary: false,
     blockId: '',
-    // injected
-    intl: { formatMessage },
-  };
+  },
+};
+
+describe('QuestionWidget', () => {
+  beforeEach(() => {
+    initializeMocks({ initialState, initializeStore });
+  });
   describe('render', () => {
     beforeEach(() => {
       initializeMocks();
     });
     test('renders correct default', () => {
-      render(<QuestionWidget {...props} />);
+      editorRender(<QuestionWidget />, { initialState });
       expect(screen.getByText('Question')).toBeInTheDocument();
     });
   });