From 713ca4b8ffec8a168ce21518fdfb96a5785671a9 Mon Sep 17 00:00:00 2001
From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com>
Date: Tue, 30 Jan 2024 17:12:37 +0200
Subject: [PATCH] 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    | 10 ++++++++++
 src/course-unit/data/selectors.js |  7 +++----
 src/course-unit/hooks.jsx         |  5 ++++-
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/course-unit/CourseUnit.jsx b/src/course-unit/CourseUnit.jsx
index 8a117abab3..b2cda53184 100644
--- a/src/course-unit/CourseUnit.jsx
+++ b/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">
diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
index 2d38b42695..16619548ff 100644
--- a/src/course-unit/data/selectors.js
+++ b/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;
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
index 7e86eed1f8..d1d1edc7bc 100644
--- a/src/course-unit/hooks.jsx
+++ b/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,