fix: [AXIMST-424] Course unit - Fixed network connection behavior (#138)

* fix: [AXIMST-424] fixed network connetcion behavior

* fix: added placeholder for unsuccessful loading for the page

* refactor: code refactoring

src/course-unit/CourseUnit.jsx

@@ -13,6 +13,7 @@ import getPageHeadTitle from '../generic/utils';
 import AlertMessage from '../generic/alert-message';
 import ProcessingNotification from '../generic/processing-notification';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
+import ConnectionErrorAlert from '../generic/ConnectionErrorAlert';
 import Loading from '../generic/Loading';
 import AddComponent from './add-component/AddComponent';
 import CourseXBlock from './course-xblock/CourseXBlock';
@@ -32,6 +33,7 @@ const CourseUnit = ({ courseId }) => {
     sequenceId,
     unitTitle,
     isQueryPending,
+    sequenceStatus,
     savingStatus,
     isTitleEditFormOpen,
     isErrorAlert,
@@ -57,6 +59,14 @@ const CourseUnit = ({ courseId }) => {
     return <Loading />;
   }
 
+  if (sequenceStatus === RequestStatus.FAILED) {
+    return (
+      <Container size="xl" className="course-unit px-4 mt-4">
+        <ConnectionErrorAlert />
+      </Container>
+    );
+  }
+
   return (
     <>
       <Container size="xl" className="course-unit px-4">

src/course-unit/data/selectors.js

@@ -1,10 +1,9 @@
 export const getCourseUnitData = (state) => state.courseUnit.unit;
-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 getCourseId = (state) => state.courseDetail.courseId;
+export const getSequenceId = (state) => state.courseUnit.sequenceId;
+export const getCourseVerticalChildren = (state) => state.courseUnit.courseVerticalChildren;

src/course-unit/hooks.jsx

@@ -18,6 +18,7 @@ import {
   getCourseUnitData,
   getLoadingStatus,
   getSavingStatus,
+  getSequenceStatus,
 } from './data/selectors';
 import { changeEditTitleFormOpen, updateQueryPendingStatus } from './data/slice';
 
@@ -30,6 +31,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
   const courseUnit = useSelector(getCourseUnitData);
   const savingStatus = useSelector(getSavingStatus);
   const loadingStatus = useSelector(getLoadingStatus);
+  const sequenceStatus = useSelector(getSequenceStatus);
   const { draftPreviewLink, publishedPreviewLink } = useSelector(getCourseSectionVertical);
   const courseVerticalChildren = useSelector(getCourseVerticalChildren);
   const navigate = useNavigate();
@@ -86,7 +88,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
 
   useEffect(() => {
     if (savingStatus === RequestStatus.SUCCESSFUL) {
-      dispatch(updateQueryPendingStatus(false));
+      dispatch(updateQueryPendingStatus(true));
     } else if (savingStatus === RequestStatus.FAILED && !hasInternetConnectionError) {
       toggleErrorAlert(true);
     }
@@ -104,6 +106,7 @@ export const useCourseUnit = ({ courseId, blockId }) => {
     sequenceId,
     courseUnit,
     unitTitle,
+    sequenceStatus,
     savingStatus,
     isQueryPending,
     isErrorAlert,