fix: update header loading state from old proctored exam settings (#184)

src/proctored-exam-settings/ProctoredExamSettings.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import PropTypes from 'prop-types';
 import EmailValidator from 'email-validator';
 import moment from 'moment';
@@ -18,8 +19,14 @@ import StudioApiService from '../data/services/StudioApiService';
 import Loading from '../generic/Loading';
 import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
 import PermissionDeniedAlert from '../generic/PermissionDeniedAlert';
+import {
+  fetchExamSettingsFailure,
+  fetchExamSettingsPending,
+  fetchExamSettingsSuccess,
+} from './data/thunks';
 
 function ProctoredExamSettings({ courseId, intl }) {
+  const dispatch = useDispatch();
   const [loading, setLoading] = useState(true);
   const [loaded, setLoaded] = useState(false);
   const [loadingConnectionError, setLoadingConnectionError] = useState(false);
@@ -462,6 +469,7 @@ function ProctoredExamSettings({ courseId, intl }) {
 
   useEffect(
     () => {
+      dispatch(fetchExamSettingsPending(courseId));
       StudioApiService.getProctoredExamSettingsData(courseId)
         .then(
           response => {
@@ -484,6 +492,7 @@ function ProctoredExamSettings({ courseId, intl }) {
             setProctortrackEscalationEmail(proctoringEscalationEmail === null ? '' : proctoringEscalationEmail);
 
             setCreateZendeskTickets(proctoredExamSettings.create_zendesk_tickets);
+            dispatch(fetchExamSettingsSuccess(courseId));
           },
         ).catch(
           error => {
@@ -495,6 +504,7 @@ function ProctoredExamSettings({ courseId, intl }) {
             setLoading(false);
             setLoaded(false);
             setSubmissionInProgress(false);
+            dispatch(fetchExamSettingsFailure(courseId));
           },
         );
     }, [],

src/proctored-exam-settings/ProctoredExamSettings.test.jsx

@@ -7,8 +7,10 @@ import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import MockAdapter from 'axios-mock-adapter';
 import { initializeMockApp } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { AppProvider } from '@edx/frontend-platform/react';
 import ProctoredExamSettings from './ProctoredExamSettings';
 import StudioApiService from '../data/services/StudioApiService';
+import initializeStore from '../store';
 
 const defaultProps = {
   courseId: 'course-v1%3AedX%2BDemoX%2BDemo_Course',
@@ -16,12 +18,16 @@ const defaultProps = {
 
 const IntlProctoredExamSettings = injectIntl(ProctoredExamSettings);
 
-const intlWrapper = children => (
-  <IntlProvider locale="en">
-    {children}
-  </IntlProvider>
-);
 let axiosMock;
+let store;
+
+const intlWrapper = children => (
+  <AppProvider store={store}>
+    <IntlProvider locale="en">
+      {children}
+    </IntlProvider>
+  </AppProvider>
+);
 
 describe('ProctoredExamSettings', () => {
   afterEach(() => {
@@ -39,6 +45,7 @@ describe('ProctoredExamSettings', () => {
         },
       });
 
+      store = initializeStore();
       axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
       axiosMock.onGet(

src/proctored-exam-settings/data/thunks.js

@@ -0,0 +1,21 @@
+import { RequestStatus } from '../../data/constants';
+import { updateLoadingStatus } from '../../pages-and-resources/data/slice';
+
+/* eslint-disable import/prefer-default-export */
+export function fetchExamSettingsPending(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.IN_PROGRESS }));
+  };
+}
+
+export function fetchExamSettingsSuccess(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.SUCCESSFUL }));
+  };
+}
+
+export function fetchExamSettingsFailure(courseId) {
+  return async (dispatch) => {
+    dispatch(updateLoadingStatus({ courseId, status: RequestStatus.FAILED }));
+  };
+}