From fb9c34dcf3ffcfb3ccd72489a66af63f270c05ca Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Mon, 4 Mar 2024 15:57:15 +0200
Subject: [PATCH] fix: [AXIMST-558] Course unit - Fixed loading errors and
 PropTypes (#199)

* fix: [AXIMST-558] fixed Course unit loading

* refactor: changed selector name
---
 src/course-unit/CourseUnit.test.jsx                  | 12 ++++++++----
 .../clipboard/paste-notification/index.jsx           |  4 +---
 src/course-unit/data/selectors.js                    | 12 ++++++++++--
 src/course-unit/hooks.jsx                            |  7 +++----
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/course-unit/CourseUnit.test.jsx b/src/course-unit/CourseUnit.test.jsx
index d3dfd5ed94..5964aecc94 100644
--- 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
index 99ed64116f..1670ab78da 100644
--- 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
index 19d1a2c1b2..7cd24a1959 100644
--- 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
index 79b3038460..c001cd0a01 100644
--- 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,