refactor: Replace connect with useSelector() and useDispatch() 1/5

Author: Ahtesham Quraish

src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx

@@ -1,17 +1,23 @@
 import PropTypes from 'prop-types';
-import { connect, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { Button } from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
 import UnitIcon from './UnitIcon';
 import { getCourseId, getSequenceId } from '../../data/selectors';
 
 const UnitButton = ({
-  title, contentType, isActive, unitId, className, showTitle,
+  unitId,
+  className,
+  showTitle,
 }) => {
   const courseId = useSelector(getCourseId);
   const sequenceId = useSelector(getSequenceId);
 
+  const unit = useSelector((state) => state.models.units[unitId]);
+
+  const { title, contentType, isActive } = unit || {};
+
   return (
     <Button
       className={className}
@@ -29,26 +35,13 @@ const UnitButton = ({
 
 UnitButton.propTypes = {
   className: PropTypes.string,
-  contentType: PropTypes.string.isRequired,
-  isActive: PropTypes.bool,
   showTitle: PropTypes.bool,
-  title: PropTypes.string.isRequired,
   unitId: PropTypes.string.isRequired,
 };
 
 UnitButton.defaultProps = {
   className: undefined,
-  isActive: false,
   showTitle: false,
 };
 
-const mapStateToProps = (state, props) => {
-  if (props.unitId) {
-    return {
-      ...state.models.units[props.unitId],
-    };
-  }
-  return {};
-};
-
-export default connect(mapStateToProps)(UnitButton);
+export default UnitButton;

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

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { connect, useDispatch } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   Collapsible,
@@ -22,15 +22,16 @@ import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextAr
 const AnswerOption = ({
   answer,
   hasSingleAnswer,
-  // redux
-  problemType,
-  images,
-  isLibrary,
-  blockId,
-  learningContextId,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
+
+  const problemType = useSelector(selectors.problem.problemType);
+  const images = useSelector(selectors.app.images);
+  const isLibrary = useSelector(selectors.app.isLibrary);
+  const learningContextId = useSelector(selectors.app.learningContextId);
+  const blockId = useSelector(selectors.app.blockId);
+
   const removeAnswer = hooks.removeAnswer({ answer, dispatch });
   const setAnswer = hooks.setAnswer({ answer, hasSingleAnswer, dispatch });
   const setAnswerTitle = hooks.setAnswerTitle({
@@ -42,10 +43,10 @@ const AnswerOption = ({
   const setSelectedFeedback = hooks.setSelectedFeedback({ answer, hasSingleAnswer, dispatch });
   const setUnselectedFeedback = hooks.setUnselectedFeedback({ answer, hasSingleAnswer, dispatch });
   const { isFeedbackVisible, toggleFeedback } = hooks.useFeedback(answer);
-  let staticRootUrl;
-  if (isLibrary) {
-    staticRootUrl = `${getConfig().STUDIO_BASE_URL }/library_assets/blocks/${ blockId }/`;
-  }
+
+  const staticRootUrl = isLibrary
+    ? `${getConfig().STUDIO_BASE_URL}/library_assets/blocks/${blockId}/`
+    : undefined;
 
   const getInputArea = () => {
     if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType)) {
@@ -55,12 +56,10 @@ const AnswerOption = ({
           setContent={setAnswerTitle}
           placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
           id={`answer-${answer.id}`}
-          {...{
-            images,
-            isLibrary,
-            learningContextId,
-            staticRootUrl,
-          }}
+          images={images}
+          isLibrary={isLibrary}
+          learningContextId={learningContextId}
+          staticRootUrl={staticRootUrl}
         />
       );
     }
@@ -93,7 +92,6 @@ const AnswerOption = ({
           <FormattedMessage {...messages.answerRangeHelperText} />
         </div>
       </div>
-
     );
   };
 
@@ -120,11 +118,9 @@ const AnswerOption = ({
             setSelectedFeedback={setSelectedFeedback}
             setUnselectedFeedback={setUnselectedFeedback}
             intl={intl}
-            {...{
-              images,
-              isLibrary,
-              learningContextId,
-            }}
+            images={images}
+            isLibrary={isLibrary}
+            learningContextId={learningContextId}
           />
         </Collapsible.Body>
       </div>
@@ -150,22 +146,6 @@ const AnswerOption = ({
 AnswerOption.propTypes = {
   answer: answerOptionProps.isRequired,
   hasSingleAnswer: PropTypes.bool.isRequired,
-  // redux
-  problemType: PropTypes.string.isRequired,
-  images: PropTypes.shape({}).isRequired,
-  learningContextId: PropTypes.string.isRequired,
-  isLibrary: PropTypes.bool.isRequired,
-  blockId: PropTypes.string.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),
-  blockId: selectors.app.blockId(state),
-});
-
-export const mapDispatchToProps = {};
-export const AnswerOptionInternal = AnswerOption; // For testing only
-export default connect(mapStateToProps, mapDispatchToProps)(memo(AnswerOption));
+export default memo(AnswerOption);

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.test.tsx

@@ -6,6 +6,23 @@ import { selectors } from '../../../../../data/redux';
 
 const { problem } = selectors;
 
+const initialState = {
+  problem: {
+    problemType: 'multiplechoiceresponse', // No problem type selected by default
+    // ... other problem-related state
+  },
+  app: {
+    images: {}, // No images loaded by default; use {} if it's an object keyed by IDs, or [] if it's a list
+    isLibrary: false, // Default to false; not in library context initially
+    learningContextId: 'course+org+run', // No context ID by default
+    blockId: 'block-id', // No block ID initially
+    // ... other app-related state
+  },
+  // ... any other top-level state slices
+};
+
+export default initialState;
+
 jest.mock('../../../../../data/redux', () => ({
   __esModule: true,
   default: jest.fn(),
@@ -57,12 +74,6 @@ describe('AnswerOption', () => {
   const props = {
     hasSingleAnswer: false,
     answer: answerWithOnlyFeedback,
-    // redux
-    problemType: 'multiplechoiceresponse',
-    images: {},
-    isLibrary: false,
-    learningContextId: 'course+org+run',
-    blockId: 'block-id',
   };
 
   beforeEach(() => {
@@ -75,7 +86,7 @@ describe('AnswerOption', () => {
       isFeedbackVisible: false,
       toggleFeedback: jest.fn(),
     });
-    initializeMocks();
+    initializeMocks({ initialState });
   });
 
   test('renders correct option with feedback', () => {

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

@@ -1,28 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector, useDispatch } 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 Button from '../../../../../sharedComponents/Button';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 
-const AnswersContainer = ({
-  problemType,
-  // Redux
-  answers,
-  addAnswer,
-  addAnswerRange,
-  updateField,
-}) => {
+const AnswersContainer = ({ problemType }) => {
+  const dispatch = useDispatch();
+  const answers = useSelector(selectors.problem.answers);
   const hasSingleAnswer = isSingleAnswerProblem(problemType);
 
+  const addAnswer = () => dispatch(actions.problem.addAnswer());
+  const addAnswerRange = () => dispatch(actions.problem.addAnswerRange());
+  const updateField = (field, value) => dispatch(actions.problem.updateField(field, value));
+
   useAnswerContainer({ answers, problemType, updateField });
 
   return (
@@ -42,17 +40,14 @@ const AnswersContainer = ({
         >
           <FormattedMessage {...messages.addAnswerButtonText} />
         </Button>
-
       ) : (
         <Dropdown>
           <Dropdown.Toggle
             id="Add-Answer-Or-Answer-Range"
             variant="tertiary"
             className="pl-0"
           >
-            <Icon
-              src={Add}
-            />
+            <Icon src={Add} />
             <FormattedMessage {...messages.addAnswerButtonText} />
           </Dropdown.Toggle>
           <Dropdown.Menu>
@@ -79,21 +74,6 @@ const AnswersContainer = ({
 
 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);
+export default AnswersContainer;

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.tsx

@@ -2,17 +2,50 @@ import React from 'react';
 import {
   render, screen, fireEvent, initializeMocks,
 } from '../../../../../../testUtils';
-import { AnswersContainerInternal as AnswersContainer } from './AnswersContainer';
+import AnswersContainer from './AnswersContainer';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
+// Import actions after mocking to access mocked functions
+import { actions } from '../../../../../data/redux';
 
 const { useAnswerContainer } = require('./hooks');
 
+// Mock answers for state
+const answers = [
+  { id: 'a1', isAnswerRange: false },
+  { id: 'a2', isAnswerRange: false },
+];
+
+const initialState = {
+  problem: {
+    answers,
+  },
+};
+
+// Mock actions module
+jest.mock('../../../../../data/redux', () => ({
+  __esModule: true,
+  actions: {
+    problem: {
+      addAnswer: jest.fn(() => ({ type: 'ADD_ANSWER' })),
+      addAnswerRange: jest.fn(() => ({ type: 'ADD_ANSWER_RANGE' })),
+      updateField: jest.fn((field, value) => ({ type: 'UPDATE_FIELD', payload: { field, value } })),
+    },
+  },
+  selectors: {
+    problem: {
+      answers: jest.fn(() => answers),
+    },
+  },
+}));
+
+// Mock AnswerOption and Button components
 jest.mock('./AnswerOption', () => jest.fn(({ answer }) => <div>AnswerOption-{answer.id}</div>));
 jest.mock(
   '../../../../../sharedComponents/Button',
   () => jest.fn(({ children, ...props }) => <button type="button" {...props}>{children}</button>),
 );
 
+// Mock hooks
 jest.mock('./hooks', () => ({
   useAnswerContainer: jest.fn(),
   isSingleAnswerProblem: jest.fn(() => false),
@@ -21,17 +54,11 @@ jest.mock('./hooks', () => ({
 describe('AnswersContainer', () => {
   const defaultProps = {
     problemType: 'multiple_choice',
-    answers: [
-      { id: 'a1', isAnswerRange: false },
-      { id: 'a2', isAnswerRange: false },
-    ],
-    addAnswer: jest.fn(),
-    addAnswerRange: jest.fn(),
-    updateField: jest.fn(),
   };
 
   beforeEach(() => {
-    initializeMocks();
+    initializeMocks({ initialState });
+    jest.clearAllMocks();
   });
 
   it('renders AnswerOption for each answer', () => {
@@ -45,7 +72,7 @@ describe('AnswersContainer', () => {
     const button = screen.getByRole('button', { name: 'Add answer' });
     expect(button).toBeInTheDocument();
     fireEvent.click(button);
-    expect(defaultProps.addAnswer).toHaveBeenCalled();
+    expect(actions.problem.addAnswer).toHaveBeenCalled();
   });
 
   it('renders Dropdown for NUMERIC problemType', () => {
@@ -57,9 +84,19 @@ describe('AnswersContainer', () => {
   it('calls useAnswerContainer with correct args', () => {
     render(<AnswersContainer {...defaultProps} />);
     expect(useAnswerContainer).toHaveBeenCalledWith({
-      answers: defaultProps.answers,
+      answers,
       problemType: defaultProps.problemType,
-      updateField: defaultProps.updateField,
+      updateField: expect.any(Function),
     });
   });
+
+  it('dispatches updateField with correct params', () => {
+    render(<AnswersContainer {...defaultProps} />);
+    // Directly call updateField to test
+    const field = 'exampleField';
+    const value = 'exampleValue';
+    const { updateField } = actions.problem;
+    updateField({ field, value });
+    expect(updateField).toHaveBeenCalledWith({ field, value });
+  });
 });