Refactor references to examStore to use the useDispatch and useSelect…

…or hooks API. (#131)

* feat: rename examStore to specialExams in preparation for use in frontend-app-learning

This commit renames the examStore to specialExams. This is in preparation for the use of the exam reducer in the frontend-app-learning React application.

* refactor: replace use of context with thunks and Redux store in instructions 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.

* test: remove references to ExamStateProvider from tests for instructions components

This commit removes references to the ExamStateProvider from tests for instructions components. Because these components have been refactored to no longe rely on the ExamStateProvider, they are not required in the component tree.

src/api.js

@@ -1,20 +1,20 @@
 import { examRequiresAccessToken, store } from './data';
 
 export function isExam() {
-  const { exam } = store.getState().examState;
+  const { exam } = store.getState().specialExams;
   return !!exam?.id;
 }
 
 export function getExamAccess() {
-  const { exam, examAccessToken } = store.getState().examState;
+  const { exam, examAccessToken } = store.getState().specialExams;
   if (!exam) {
     return '';
   }
   return examAccessToken.exam_access_token;
 }
 
 export async function fetchExamAccess() {
-  const { exam } = store.getState().examState;
+  const { exam } = store.getState().specialExams;
   const { dispatch } = store;
   if (!exam) {
     return Promise.resolve();

src/api.test.jsx

@@ -9,7 +9,7 @@ describe('External API integration tests', () => {
       jest.mock('./data');
       const mockExam = Factory.build('exam', { attempt: Factory.build('attempt') });
       const mockToken = Factory.build('examAccessToken');
-      const mockState = { examState: { exam: mockExam, examAccessToken: mockToken } };
+      const mockState = { specialExams: { exam: mockExam, examAccessToken: mockToken } };
       store.getState = jest.fn().mockReturnValue(mockState);
     });
 
@@ -35,7 +35,7 @@ describe('External API integration tests', () => {
   describe('Test isExam without exam', () => {
     beforeAll(() => {
       jest.mock('./data');
-      const mockState = { examState: { exam: null, examAccessToken: null } };
+      const mockState = { specialExams: { exam: null, examAccessToken: null } };
       store.getState = jest.fn().mockReturnValue(mockState);
     });
 

src/core/ExamStateProvider.jsx

@@ -24,7 +24,7 @@ const StateProvider = ({ children, ...state }) => {
   );
 };
 
-const mapStateToProps = (state) => ({ ...state.examState });
+const mapStateToProps = (state) => ({ ...state.specialExams });
 
 const ExamStateProvider = withExamStore(
   StateProvider,

src/core/OuterExamTimer.test.jsx

@@ -28,7 +28,7 @@ describe('OuterExamTimer', () => {
       attempt_status: ExamStatus.STARTED,
     });
     store.getState = () => ({
-      examState: {
+      specialExams: {
         activeAttempt: attempt,
         exam: {
           time_limit_mins: 60,
@@ -45,7 +45,7 @@ describe('OuterExamTimer', () => {
 
   it('does not render timer if there is no exam in progress', () => {
     store.getState = () => ({
-      examState: {
+      specialExams: {
         activeAttempt: {},
         exam: {},
       },

src/data/__factories__/examState.factory.js

@@ -4,7 +4,7 @@ import './exam.factory';
 import './proctoringSettings.factory';
 import './examAccessToken.factory';
 
-Factory.define('examState')
+Factory.define('specialExams')
   .attr('proctoringSettings', Factory.build('proctoringSettings'))
   .attr('exam', Factory.build('exam'))
   .attr('examAccessToken', Factory.build('examAccessToken'))

src/data/__snapshots__/redux.test.jsx.snap

@@ -9,7 +9,7 @@ Object {
 
 exports[`Data layer integration tests Test getExamAttemptsData Should get, and save exam and attempt 1`] = `
 Object {
-  "examState": Object {
+  "specialExams": Object {
     "activeAttempt": Object {
       "attempt_code": "",
       "attempt_id": 1,
@@ -93,7 +93,7 @@ Object {
 
 exports[`Data layer integration tests Test getLatestAttemptData with edx-proctoring as a backend (no EXAMS_BASE_URL) Should get, and save latest attempt 1`] = `
 Object {
-  "examState": Object {
+  "specialExams": Object {
     "activeAttempt": Object {
       "attempt_code": "",
       "attempt_id": 1,
@@ -245,7 +245,7 @@ Object {
 
 exports[`Data layer integration tests Test resetExam Should reset exam attempt 1`] = `
 Object {
-  "examState": Object {
+  "specialExams": Object {
     "activeAttempt": null,
     "allowProctoringOptOut": false,
     "apiErrorMsg": "",
@@ -314,7 +314,7 @@ Object {
 
 exports[`Data layer integration tests Test resetExam with edx-proctoring as backend (no EXAMS_BASE_URL) Should reset exam attempt 1`] = `
 Object {
-  "examState": Object {
+  "specialExams": Object {
     "activeAttempt": null,
     "allowProctoringOptOut": false,
     "apiErrorMsg": "",

src/data/index.js

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