refactor: replace use of context with thunks and Redux store in instr…

…uctions components

This commit replaces the use of the ExamStateContext with the use of thunks and the Redux store in the instructions components.

The original pattern was to use the withExamStore higher-order component to provide context to the instructions components. This context contained provided the Redux store state and action creators as props by using the connect API. This posed a problem for our need to merge the frontend-app-learning and frontend-lib-special-exams stores, because the special exams store is initialized in this repository and used by the higher-order component. In order to eventually be able to remove the creation of the store in this repository, we have to remove references to the store by interfacing with the Redux more directly by using the useDispatch and useSelector hooks.

src/data/index.js

@@ -1,4 +1,5 @@
 export {
+  createProctoredExamAttempt,
   getExamAttemptsData,
   getLatestAttemptData,
   getProctoringSettings,

src/instructions/Instructions.test.jsx

@@ -3,9 +3,10 @@ import { Factory } from 'rosie';
 import React from 'react';
 import { fireEvent, waitFor } from '@testing-library/dom';
 import Instructions from './index';
-import { store, getExamAttemptsData, startTimedExam } from '../data';
+import {
+  store, continueExam, getExamAttemptsData, startProctoredExam, startTimedExam, submitExam,
+} from '../data';
 import { pollExamAttempt, softwareDownloadAttempt } from '../data/api';
-import { continueExam, submitExam } from '../data/thunks';
 import Emitter from '../data/emitter';
 import { TIMER_REACHED_NULL } from '../timer/events';
 import {
@@ -18,12 +19,11 @@ import {
 
 jest.mock('../data', () => ({
   store: {},
-  getExamAttemptsData: jest.fn(),
-  startTimedExam: jest.fn(),
-}));
-jest.mock('../data/thunks', () => ({
   continueExam: jest.fn(),
+  getExamAttemptsData: jest.fn(),
   getExamReviewPolicy: jest.fn(),
+  startProctoredExam: jest.fn(),
+  startTimedExam: jest.fn(),
   submitExam: jest.fn(),
 }));
 jest.mock('../data/api', () => ({
@@ -33,6 +33,7 @@ jest.mock('../data/api', () => ({
 continueExam.mockReturnValue(jest.fn());
 submitExam.mockReturnValue(jest.fn());
 getExamAttemptsData.mockReturnValue(jest.fn());
+startProctoredExam.mockReturnValue(jest.fn());
 startTimedExam.mockReturnValue(jest.fn());
 pollExamAttempt.mockReturnValue(Promise.resolve({}));
 store.subscribe = jest.fn();

src/instructions/SubmitInstructions.jsx

@@ -1,17 +1,20 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { Button, Container } from '@edx/paragon';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import Emitter from '../data/emitter';
 import { ExamType } from '../constants';
+import { continueExam } from '../data';
 import { SubmitProctoredExamInstructions } from './proctored_exam';
 import { SubmitTimedExamInstructions } from './timed_exam';
 import Footer from './proctored_exam/Footer';
-import ExamStateContext from '../context';
 import { TIMER_REACHED_NULL } from '../timer/events';
 
 const SubmitExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { exam, continueExam, activeAttempt } = state;
+  const { exam, activeAttempt } = useSelector(state => state.specialExams);
+
+  const dispatch = useDispatch();
+
   const { time_remaining_seconds: timeRemaining } = activeAttempt;
   const { type: examType } = exam || {};
   const [canContinue, setCanContinue] = useState(timeRemaining > 0);
@@ -33,7 +36,7 @@ const SubmitExamInstructions = () => {
           ? <SubmitTimedExamInstructions />
           : <SubmitProctoredExamInstructions />}
         {canContinue && (
-          <Button variant="outline-primary" onClick={continueExam} data-testid="continue-exam-button">
+          <Button variant="outline-primary" onClick={() => dispatch(continueExam())} data-testid="continue-exam-button">
             <FormattedMessage
               id="exam.SubmitExamInstructions.continueButton"
               defaultMessage="No, I'd like to continue working"

src/instructions/index.jsx

@@ -1,4 +1,5 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import {
   DownloadSoftwareProctoredExamInstructions,
@@ -13,7 +14,6 @@ import {
   ExamType,
   IS_ONBOARDING_ERROR,
 } from '../constants';
-import ExamStateContext from '../context';
 import EntranceExamInstructions from './EntranceInstructions';
 import SubmitExamInstructions from './SubmitInstructions';
 import RejectedInstructions from './RejectedInstructions';
@@ -24,8 +24,7 @@ import ExpiredInstructions from './ExpiredInstructions';
 import UnknownAttemptStatusError from './UnknownAttemptStatusError';
 
 const Instructions = ({ children }) => {
-  const state = useContext(ExamStateContext);
-  const { exam } = state;
+  const { exam } = useSelector(state => state.specialExams);
   const {
     attempt,
     type: examType,

src/instructions/onboarding_exam/EntranceOnboardingExamInstructions.jsx

@@ -1,11 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, MailtoLink } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { createProctoredExamAttempt } from '../../data';
 
 const EntranceOnboardingExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { createProctoredExamAttempt, proctoringSettings } = state;
+  const { proctoringSettings } = useSelector(state => state.specialExams);
+
+  const dispatch = useDispatch();
+
   const {
     provider_name: providerName,
     learner_notification_from_email: learnerNotificationFromEmail,
@@ -89,7 +93,7 @@ const EntranceOnboardingExamInstructions = () => {
         <Button
           data-testid="start-exam-button"
           variant="primary"
-          onClick={createProctoredExamAttempt}
+          onClick={() => dispatch(createProctoredExamAttempt())}
         >
           <FormattedMessage
             id="exam.EntranceOnboardingExamInstructions.startExamButtonText"

src/instructions/onboarding_exam/ErrorOnboardingExamInstructions.jsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { resetExam } from '../../data';
 
 const ErrorOnboardingExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { resetExam } = state;
+  const dispatch = useDispatch();
 
   return (
     <div>
@@ -25,7 +26,7 @@ const ErrorOnboardingExamInstructions = () => {
       <Button
         data-testid="retry-exam-button"
         variant="primary"
-        onClick={resetExam}
+        onClick={() => dispatch(resetExam())}
       >
         <FormattedMessage
           id="exam.ErrorOnboardingExamInstructions.retryExamButton"

src/instructions/onboarding_exam/RejectedOnboardingExamInstructions.jsx

@@ -1,11 +1,15 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, MailtoLink } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { resetExam } from '../../data';
 
 const RejectedOnboardingExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { proctoringSettings, resetExam } = state;
+  const { proctoringSettings } = useSelector(state => state.specialExams);
+
+  const dispatch = useDispatch();
+
   const { integration_specific_email: integrationSpecificEmail } = proctoringSettings || {};
 
   return (
@@ -34,7 +38,7 @@ const RejectedOnboardingExamInstructions = () => {
       <Button
         data-testid="reset-exam-button"
         variant="primary"
-        onClick={resetExam}
+        onClick={() => dispatch(resetExam())}
       >
         <FormattedMessage
           id="exam.RejectedOnboardingExamInstructions.resetExamButton"

src/instructions/onboarding_exam/SubmittedOnboardingExamInstructions.jsx

@@ -1,12 +1,17 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, MailtoLink, useToggle } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { resetExam } from '../../data';
 
 const SubmittedOnboardingExamInstructions = () => {
   const [isConfirm, confirm] = useToggle(false);
-  const state = useContext(ExamStateContext);
-  const { proctoringSettings, resetExam } = state;
+
+  const { proctoringSettings } = useSelector(state => state.specialExams);
+
+  const dispatch = useDispatch();
+
   const {
     learner_notification_from_email: learnerNotificationFromEmail,
     integration_specific_email: integrationSpecificEmail,
@@ -70,7 +75,7 @@ const SubmittedOnboardingExamInstructions = () => {
       <Button
         data-testid="retry-exam-button"
         variant="primary"
-        onClick={resetExam}
+        onClick={() => dispatch(resetExam())}
         disabled={!isConfirm}
       >
         <FormattedMessage

src/instructions/onboarding_exam/VerifiedOnboardingExamInstructions.jsx

@@ -1,13 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { MailtoLink } from '@edx/paragon';
-import ExamStateContext from '../../context';
 
 const VerifiedOnboardingExamInstructions = () => {
-  const state = useContext(ExamStateContext);
+  const { proctoringSettings } = useSelector(state => state.specialExams);
+
   const {
     integration_specific_email: integrationSpecificEmail,
-  } = state.proctoringSettings || {};
+  } = proctoringSettings || {};
 
   return (
     <div>

src/instructions/practice_exam/EntrancePracticeExamInstructions.jsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { createProctoredExamAttempt } from '../../data';
 
 const EntrancePracticeExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { createProctoredExamAttempt } = state;
+  const dispatch = useDispatch();
 
   return (
     <>
@@ -26,7 +27,7 @@ const EntrancePracticeExamInstructions = () => {
         <Button
           data-testid="start-exam-button"
           variant="primary"
-          onClick={createProctoredExamAttempt}
+          onClick={() => dispatch(createProctoredExamAttempt())}
         >
           <FormattedMessage
             id="exam.EntrancePracticeExamInstructions.startExamButtonText"

src/instructions/practice_exam/ErrorPracticeExamInstructions.jsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { resetExam } from '../../data';
 
 const ErrorPracticeExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { resetExam } = state;
+  const dispatch = useDispatch();
 
   return (
     <div>
@@ -37,7 +38,7 @@ const ErrorPracticeExamInstructions = () => {
       <Button
         data-testid="retry-exam-button"
         variant="primary"
-        onClick={resetExam}
+        onClick={() => dispatch(resetExam())}
       >
         <FormattedMessage
           id="exam.ErrorOnboardingExamInstructions.retryExamButton"

src/instructions/practice_exam/SubmittedPracticeExamInstructions.jsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { resetExam } from '../../data';
 
 const SubmittedPracticeExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { resetExam } = state;
+  const dispatch = useDispatch();
 
   return (
     <div>
@@ -25,7 +26,7 @@ const SubmittedPracticeExamInstructions = () => {
       <Button
         data-testid="retry-exam-button"
         variant="primary"
-        onClick={resetExam}
+        onClick={() => dispatch(resetExam())}
       >
         <FormattedMessage
           id="exam.SubmittedPracticeExamInstructions.retryExamButton"

src/instructions/proctored_exam/EntranceProctoredExamInstructions.jsx

@@ -1,13 +1,17 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
-import ExamStateContext from '../../context';
+
+import { createProctoredExamAttempt } from '../../data';
 import SkipProctoredExamButton from './SkipProctoredExamButton';
 
 const EntranceProctoredExamInstructions = ({ skipProctoredExam }) => {
-  const state = useContext(ExamStateContext);
-  const { exam, createProctoredExamAttempt, allowProctoringOptOut } = state;
+  const { exam, allowProctoringOptOut } = useSelector(state => state.specialExams);
+
+  const dispatch = useDispatch();
+
   const { attempt } = exam || {};
   const { total_time: totalTime = 0 } = attempt;
 
@@ -54,7 +58,7 @@ const EntranceProctoredExamInstructions = ({ skipProctoredExam }) => {
         <Button
           data-testid="start-exam-button"
           variant="primary"
-          onClick={createProctoredExamAttempt}
+          onClick={() => dispatch(createProctoredExamAttempt())}
         >
           <FormattedMessage
             id="exam.startExamInstructions.startExamButtonText"

src/instructions/proctored_exam/ErrorProctoredExamInstructions.jsx

@@ -1,14 +1,14 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 import { Hyperlink, MailtoLink } from '@edx/paragon';
-import ExamStateContext from '../../context';
 
 const ErrorProctoredExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const {
-    proctoring_escalation_email: proctoringEscalationEmail,
-  } = state.proctoringSettings || {};
+  const { proctoring_escalation_email: proctoringEscalationEmail } = useSelector(
+    state => state.specialExams?.proctoringSettings,
+  ) || {};
+
   const platformName = getConfig().SITE_NAME;
   const contactUsUrl = getConfig().CONTACT_URL;
 

src/instructions/proctored_exam/OnboardingErrorExamInstructions.jsx

@@ -1,13 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Container, MailtoLink, Hyperlink } from '@edx/paragon';
-import ExamStateContext from '../../context';
 import { ExamStatus } from '../../constants';
 import Footer from './Footer';
 
 const OnboardingErrorProctoredExamInstructions = () => {
-  const state = useContext(ExamStateContext);
-  const { exam, proctoringSettings } = state;
+  const { exam, proctoringSettings } = useSelector(state => state.specialExams);
   const { attempt, onboarding_link: onboardingLink } = exam;
   const {
     integration_specific_email: integrationSpecificEmail,