fix: [AXIMST-558] Course unit - Fixed loading errors and PropTypes (#199

) * fix: [AXIMST-558] fixed Course unit loading * refactor: changed selector name
openedx · Mar 18, 2024 · fb9c34d · fb9c34d
1 parent 07819b8
commit fb9c34d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
@@ -1020,7 +1020,9 @@ describe('<CourseUnit />', () => {
 
       userEvent.click(getByRole('button', { name: pasteComponentMessages.pasteComponentButtonText.defaultMessage }));
 
-      expect(getAllByTestId('course-xblock')).toHaveLength(2);
+      await waitFor(() => {
+        expect(getAllByTestId('course-xblock')).toHaveLength(2);
+      });
 
       axiosMock
         .onGet(getCourseVerticalChildrenApiUrl(blockId))
@@ -1097,9 +1099,11 @@ describe('<CourseUnit />', () => {
         courseUnitMock,
       ]);
 
-      units = getAllByTestId('course-unit-btn');
-      const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
-      expect(units).toHaveLength(courseUnits.length);
+      await waitFor(() => {
+        units = getAllByTestId('course-unit-btn');
+        const courseUnits = courseSectionVerticalMock.xblock_info.ancestor_info.ancestors[0].child_info.children;
+        expect(units).toHaveLength(courseUnits.length);
+      });
 
       axiosMock
         .onPost(postXBlockBaseApiUrl(), postXBlockBody)

diff --git a/src/course-unit/clipboard/paste-notification/index.jsx b/src/course-unit/clipboard/paste-notification/index.jsx
@@ -97,14 +97,12 @@ const PastNotificationAlert = ({ staticFileNotices, courseId }) => {
 
 PastNotificationAlert.propTypes = {
   courseId: PropTypes.string.isRequired,
-  staticFileNotices: PropTypes.oneOfType([
+  staticFileNotices:
     PropTypes.objectOf({
       conflictingFiles: PropTypes.arrayOf(PropTypes.string),
       errorFiles: PropTypes.arrayOf(PropTypes.string),
       newFiles: PropTypes.arrayOf(PropTypes.string),
     }),
-    PropTypes.arrayOf(PropTypes.string),
-  ]),
 };
 
 PastNotificationAlert.defaultProps = {

diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
@@ -1,13 +1,21 @@
+import { createSelector } from '@reduxjs/toolkit';
+import { RequestStatus } from 'CourseAuthoring/data/constants';
+
 export const getCourseUnitData = (state) => state.courseUnit.unit;
 export const getCanEdit = (state) => state.courseUnit.canEdit;
 export const getStaticFileNotices = (state) => state.courseUnit.staticFileNotices;
 export const getCourseUnit = (state) => state.courseUnit;
 export const getSavingStatus = (state) => state.courseUnit.savingStatus;
-export const getLoadingStatus = (state) => state.courseUnit.loadingStatus;
 export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;
 export const getSequenceIds = (state) => state.courseUnit.courseSectionVertical.courseSequenceIds;
 export const getCourseSectionVertical = (state) => state.courseUnit.courseSectionVertical;
 export const getCourseId = (state) => state.courseDetail.courseId;
 export const getSequenceId = (state) => state.courseUnit.sequenceId;
 export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;
-export const getClipboardData = state => state.courseUnit.clipboardData;
+export const getClipboardData = (state) => state.courseUnit.clipboardData;
+const getLoadingStatuses = (state) => state.courseUnit.loadingStatus;
+export const getIsLoading = createSelector(
+  [getLoadingStatuses],
+  loadingStatus => Object.values(loadingStatus)
+    .some((status) => status === RequestStatus.IN_PROGRESS),
+);
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
@@ -17,7 +17,7 @@ import {
   getCourseSectionVertical,
   getCourseVerticalChildren,
   getCourseUnitData,
-  getLoadingStatus,
+  getIsLoading,
   getSavingStatus,
   getSequenceStatus,
   getStaticFileNotices,
@@ -35,7 +35,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const [hasInternetConnectionError, setInternetConnectionError] = useState(false);
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
-  const loadingStatus = useSelector(getLoadingStatus);
+  const isLoading = useSelector(getIsLoading);
   const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const courseVerticalChildren = useSelector(getCourseVerticalChildren);
@@ -125,8 +125,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     isErrorAlert,
     staticFileNotices,
     currentlyVisibleToStudents,
-    isLoading: loadingStatus.fetchUnitLoadingStatus === RequestStatus.IN_PROGRESS
-      || loadingStatus.courseSectionVerticalLoadingStatus === RequestStatus.IN_PROGRESS,
+    isLoading,
     isTitleEditFormOpen,
     isInternetConnectionAlertFailed: savingStatus === RequestStatus.FAILED,
     sharedClipboardData,