fix: [AXIMST-769] Course unit - Added display of error alert (#233)

* fix: [AXIMST-769] added display of error alert * refactor: fixed tests
raccoongang · May 3, 2024 · 6263c24 · 6263c24
1 parent f524a0e
commit 6263c24
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 15 deletions.
diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
@@ -37,6 +37,7 @@ const CourseUnit = ({ courseId }) => {
   const intl = useIntl();
   const {
     isLoading,
+    isLoadingFailed,
     sequenceId,
     unitTitle,
     errorMessage,
@@ -83,7 +84,7 @@ const CourseUnit = ({ courseId }) => {
     return <Loading />;
   }
 
-  if (sequenceStatus === RequestStatus.FAILED) {
+  if (isLoadingFailed || sequenceStatus === RequestStatus.FAILED) {
     return (
       <Container size="xl" className="course-unit px-4 mt-4">
         <ConnectionErrorAlert />

diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -133,9 +133,9 @@ describe('<CourseUnit />', () => {
     store = initializeStore();
     axiosMock = new MockAdapter(getAuthenticatedHttpClient());
     axiosMock
-      .onGet(getCourseUnitApiUrl(courseId))
+      .onGet(getCourseUnitApiUrl(blockId))
       .reply(200, courseUnitIndexMock);
-    await executeThunk(fetchCourseUnitQuery(courseId), store.dispatch);
+    await executeThunk(fetchCourseUnitQuery(blockId), store.dispatch);
     axiosMock
       .onGet(getCourseSectionVerticalApiUrl(blockId))
       .reply(200, courseSectionVerticalMock);
@@ -1167,7 +1167,7 @@ describe('<CourseUnit />', () => {
       .reply(200, { dummy: 'value' });
     axiosMock
       .onGet(getCourseUnitApiUrl(blockId))
-      .replyOnce(200, {
+      .reply(200, {
         ...courseUnitIndexMock,
         visibility_state: UNIT_VISIBILITY_STATES.staffOnly,
         has_explicit_staff_lock: true,

diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
@@ -20,3 +20,8 @@ export const getIsLoading = createSelector(
   loadingStatus => Object.values(loadingStatus)
     .some((status) => status === RequestStatus.IN_PROGRESS),
 );
+export const getIsLoadingFailed = createSelector(
+  [getLoadingStatuses],
+  loadingStatus => Object.values(loadingStatus)
+    .some((status) => status === RequestStatus.FAILED),
+);
diff --git a/src/course-unit/data/slice.js b/src/course-unit/data/slice.js
@@ -67,12 +67,6 @@ const slice = createSlice({
         courseSectionVerticalLoadingStatus: payload.status,
       };
     },
-    updateLoadingCourseXblockStatus: (state, { payload }) => {
-      state.loadingStatus = {
-        ...state.loadingStatus,
-        createUnitXblockLoadingStatus: payload.status,
-      };
-    },
     addNewUnitStatus: (state, { payload }) => {
       state.loadingStatus = {
         ...state.loadingStatus,
@@ -138,7 +132,6 @@ export const {
   updateLoadingCourseSectionVerticalDataStatus,
   changeEditTitleFormOpen,
   updateQueryPendingStatus,
-  updateLoadingCourseXblockStatus,
   updateCourseVerticalChildren,
   updateCourseVerticalChildrenLoadingStatus,
   deleteXBlock,

diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
@@ -32,7 +32,6 @@ import {
   fetchSequenceSuccess,
   fetchCourseSectionVerticalDataSuccess,
   updateLoadingCourseSectionVerticalDataStatus,
-  updateLoadingCourseXblockStatus,
   updateCourseVerticalChildren,
   updateCourseVerticalChildrenLoadingStatus,
   updateQueryPendingStatus,
@@ -154,7 +153,6 @@ export function editCourseUnitVisibilityAndData(itemId, type, isVisible, groupAc
 
 export function createNewCourseXBlock(body, callback, blockId) {
   return async (dispatch) => {
-    dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.IN_PROGRESS }));
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
 
     if (body.stagedContent) {
@@ -182,7 +180,6 @@ export function createNewCourseXBlock(body, callback, blockId) {
           const courseVerticalChildrenData = await getCourseVerticalChildren(blockId);
           dispatch(updateCourseVerticalChildren(courseVerticalChildrenData));
           dispatch(hideProcessingNotification());
-          dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.SUCCESSFUL }));
           dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
           if (callback) {
             callback(result);
@@ -194,7 +191,6 @@ export function createNewCourseXBlock(body, callback, blockId) {
       });
     } catch (error) {
       dispatch(hideProcessingNotification());
-      dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.FAILED }));
       handleResponseErrors(error, dispatch, updateSavingStatus);
     }
   };

diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
@@ -24,6 +24,7 @@ import {
   getErrorMessage,
   getSequenceStatus,
   getStaticFileNotices,
+  getIsLoadingFailed,
 } from './data/selectors';
 import { changeEditTitleFormOpen, updateQueryPendingStatus } from './data/slice';
 import { PUBLISH_TYPES } from './constants';
@@ -38,6 +39,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
   const isLoading = useSelector(getIsLoading);
+  const isLoadingFailed = useSelector(getIsLoadingFailed);
   const errorMessage = useSelector(getErrorMessage);
   const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
@@ -134,6 +136,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     staticFileNotices,
     currentlyVisibleToStudents,
     isLoading,
+    isLoadingFailed,
     isTitleEditFormOpen,
     sharedClipboardData,
     showPasteXBlock,