From 3eae62dada0cad9bd1f2d9acf82217ded2b6bc16 Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Tue, 9 Jan 2024 01:04:44 +0200
Subject: [PATCH] fix: replacing LMS endpoints with CMS endpoints

---
 src/course-unit/course-sequence/Sequence.jsx  |   4 +
 src/course-unit/course-sequence/hooks.js      |  18 ++--
 .../SequenceNavigation.jsx                    |   8 +-
 .../SequenceNavigationTabs.jsx                |   5 +-
 .../sequence-navigation/UnitButton.jsx        |   4 +-
 src/course-unit/data/api.js                   |   8 +-
 src/course-unit/data/selectors.js             |   1 +
 src/course-unit/data/thunk.js                 | 100 ++++++++++--------
 src/course-unit/data/utils.js                 |  23 ++++
 src/course-unit/hooks.jsx                     |   6 +-
 10 files changed, 115 insertions(+), 62 deletions(-)

diff --git a/src/course-unit/course-sequence/Sequence.jsx b/src/course-unit/course-sequence/Sequence.jsx
index 1f90096f1c..f94ff8639f 100644
--- a/src/course-unit/course-sequence/Sequence.jsx
+++ b/src/course-unit/course-sequence/Sequence.jsx
@@ -17,6 +17,8 @@ const Sequence = ({
   const intl = useIntl();
   const { IN_PROGRESS, FAILED, SUCCESSFUL } = RequestStatus;
   const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  const STORE = useSelector(state => state);
+  console.log('STORE', STORE);
   const { sequenceStatus, sequenceMightBeUnit } = useSelector(state => state.courseUnit);
 
   const defaultContent = (
@@ -31,6 +33,8 @@ const Sequence = ({
     </div>
   );
 
+  console.log('sequenceStatus =============', sequenceStatus);
+
   // If sequence might be a unit, we want to keep showing a spinner - the courseware container will redirect us when
   // it knows which sequence to actually go to.
   const loading = sequenceStatus === IN_PROGRESS || (sequenceStatus === FAILED && sequenceMightBeUnit);
diff --git a/src/course-unit/course-sequence/hooks.js b/src/course-unit/course-sequence/hooks.js
index 0dc3c303e2..5e48c18b93 100644
--- a/src/course-unit/course-sequence/hooks.js
+++ b/src/course-unit/course-sequence/hooks.js
@@ -4,18 +4,24 @@ import { useWindowSize } from '@edx/paragon';
 
 import { useModel } from '../../generic/model-store';
 import { RequestStatus } from '../../data/constants';
-import { getCourseSectionVertical, getSequenceStatus, sequenceIdsSelector } from '../data/selectors';
+import {
+  getCourseSectionVertical,
+  getCourseSectionVerticalLoadingStatus,
+  getSequenceStatus,
+  sequenceIdsSelector
+} from '../data/selectors';
 
 export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId) {
   const { SUCCESSFUL } = RequestStatus;
   const sequenceIds = useSelector(sequenceIdsSelector);
-  const sequenceStatus = useSelector(getSequenceStatus);
+  const { courseSectionVerticalLoadingStatus } = useSelector(getCourseSectionVerticalLoadingStatus);
+  const sequenceStatus = courseSectionVerticalLoadingStatus;
   const { nextUrl, prevUrl } = useSelector(getCourseSectionVertical);
   const sequence = useModel('sequences', currentSequenceId);
   const { courseId, status } = useSelector(state => state.courseDetail);
-
+  // console.log('sequence >>>', sequence);
   const isCourseOrSequenceNotSuccessful = status !== SUCCESSFUL || sequenceStatus !== SUCCESSFUL;
-  const areIdsNotValid = !currentSequenceId || !currentUnitId || !sequence.unitIds;
+  const areIdsNotValid = !currentSequenceId || !currentUnitId || !sequence?.unitIds;
   const isNotSuccessfulCompletion = isCourseOrSequenceNotSuccessful || areIdsNotValid;
 
   // If we don't know the sequence and unit yet, then assume no.
@@ -24,13 +30,13 @@ export function useSequenceNavigationMetadata(currentSequenceId, currentUnitId)
   }
 
   const sequenceIndex = sequenceIds.indexOf(currentSequenceId);
-  const unitIndex = sequence.unitIds.indexOf(currentUnitId);
+  const unitIndex = sequence?.unitIds.indexOf(currentUnitId);
 
   const isFirstSequence = sequenceIndex === 0;
   const isFirstUnitInSequence = unitIndex === 0;
   const isFirstUnit = isFirstSequence && isFirstUnitInSequence;
   const isLastSequence = sequenceIndex === sequenceIds.length - 1;
-  const isLastUnitInSequence = unitIndex === sequence.unitIds.length - 1;
+  const isLastUnitInSequence = unitIndex === sequence?.unitIds.length - 1;
   const isLastUnit = isLastSequence && isLastUnitInSequence;
 
   const nextSequenceId = sequenceIndex < sequenceIds.length - 1 ? sequenceIds[sequenceIndex + 1] : null;
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
index 189d7786d4..5f92dd916e 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigation.jsx
@@ -16,6 +16,7 @@ import { RequestStatus } from '../../../data/constants';
 import messages from '../messages';
 import { useSequenceNavigationMetadata } from '../hooks';
 import SequenceNavigationTabs from './SequenceNavigationTabs';
+import { getCourseSectionVertical } from '../../data/selectors';
 
 const SequenceNavigation = ({
   intl,
@@ -24,14 +25,15 @@ const SequenceNavigation = ({
   className,
 }) => {
   const { sequenceStatus } = useSelector(state => state.courseUnit);
+  const MODELS = useSelector(state => state.models);
   const {
     isFirstUnit, isLastUnit, nextLink, previousLink,
   } = useSequenceNavigationMetadata(sequenceId, unitId);
   const sequence = useModel('sequences', sequenceId);
-
   const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  console.log('MODELS >>>', MODELS);
   const renderUnitButtons = () => {
-    if (sequence.unitIds?.length === 0 || unitId === null) {
+    if (sequence?.unitIds?.length === 0 || unitId === null) {
       return (
         <div style={{ flexBasis: '100%', minWidth: 0, borderBottom: 'solid 1px #EAEAEA' }} />
       );
@@ -39,7 +41,7 @@ const SequenceNavigation = ({
 
     return (
       <SequenceNavigationTabs
-        unitIds={sequence.unitIds || []}
+        unitIds={sequence?.unitIds || []}
         unitId={unitId}
       />
     );
diff --git a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
index 822474f6bf..1c72c4facc 100644
--- a/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/SequenceNavigationTabs.jsx
@@ -8,16 +8,19 @@ import { useIndexOfLastVisibleChild } from '../hooks';
 import messages from '../messages';
 import SequenceNavigationDropdown from './SequenceNavigationDropdown';
 import UnitButton from './UnitButton';
+import { useSelector } from 'react-redux';
 
 const SequenceNavigationTabs = ({ unitIds, unitId }) => {
   const intl = useIntl();
+
+  // const { courseId } = useSelector(state => state.courseDetails);
   const [
     indexOfLastVisibleChild,
     containerRef,
     invisibleStyle,
   ] = useIndexOfLastVisibleChild();
   const shouldDisplayDropdown = indexOfLastVisibleChild === -1;
-
+  // console.log('courseId', courseId);
   return (
     <div className="sequence-navigation-tabs-wrapper">
       <div className="sequence-navigation-tabs-container d-flex" ref={containerRef}>
diff --git a/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx b/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx
index 1e86fcc5b3..038abc971e 100644
--- a/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx
+++ b/src/course-unit/course-sequence/sequence-navigation/UnitButton.jsx
@@ -8,8 +8,8 @@ import UnitIcon from './UnitIcon';
 const UnitButton = ({
   title, contentType, isActive, unitId, className, showTitle,
 }) => {
-  const { courseId, sequenceId } = useSelector(state => state.courseUnit);
-
+  const { sequenceId } = useSelector(state => state.courseUnit);
+  const { courseId } = useSelector(state => state.courseDetail);
   return (
     <Button
       className={className}
diff --git a/src/course-unit/data/api.js b/src/course-unit/data/api.js
index ce9ac1c484..d0b65a7b17 100644
--- a/src/course-unit/data/api.js
+++ b/src/course-unit/data/api.js
@@ -8,6 +8,7 @@ import {
   normalizeMetadata,
   normalizeCourseHomeCourseMetadata,
   appendBrowserTimezoneToUrl,
+  normalizeCourseSectionVerticalData,
 } from './utils';
 
 const getStudioBaseUrl = () => getConfig().STUDIO_BASE_URL;
@@ -29,7 +30,7 @@ export const getCourseHomeCourseMetadataApiUrl = (courseId) => `${getLmsBaseUrl(
 export async function getCourseUnitData(unitId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getCourseUnitApiUrl(unitId));
-
+  console.log('GHGHGFHGHG', data);
   return camelCaseObject(data);
 }
 
@@ -58,7 +59,7 @@ export async function editUnitDisplayName(unitId, displayName) {
 export async function getSequenceMetadata(sequenceId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getSequenceMetadataApiUrl(sequenceId), {});
-
+  // console.log('normalizeSequenceMetadata(data)', normalizeSequenceMetadata(data));
   return normalizeSequenceMetadata(data);
 }
 
@@ -70,8 +71,9 @@ export async function getSequenceMetadata(sequenceId) {
 export async function getCourseSectionVerticalData(unitId) {
   const { data } = await getAuthenticatedHttpClient()
     .get(getCourseSectionVerticalApiUrl(unitId));
+  console.log('getCourseSectionVerticalData', normalizeCourseSectionVerticalData(data));
 
-  return camelCaseObject(data);
+  return normalizeCourseSectionVerticalData(data);
 }
 
 /**
diff --git a/src/course-unit/data/selectors.js b/src/course-unit/data/selectors.js
index fa208bbee7..7e4d9a938b 100644
--- a/src/course-unit/data/selectors.js
+++ b/src/course-unit/data/selectors.js
@@ -9,6 +9,7 @@ export const getLoadingStatus = (state) => state.courseUnit.loadingStatus;
 export const getSequenceStatus = (state) => state.courseUnit.sequenceStatus;
 
 export const getCourseSectionVertical = (state) => state.courseUnit.courseSectionVertical;
+export const getCourseSectionVerticalLoadingStatus = (state) => state.courseUnit.loadingStatus;
 
 export function sequenceIdsSelector(state) {
   if (state.courseUnit.courseStatus !== RequestStatus.SUCCESSFUL) {
diff --git a/src/course-unit/data/thunk.js b/src/course-unit/data/thunk.js
index 883c53b99e..5f2b886e1c 100644
--- a/src/course-unit/data/thunk.js
+++ b/src/course-unit/data/thunk.js
@@ -47,17 +47,28 @@ export function fetchCourseUnitQuery(courseId) {
   };
 }
 
-export function fetchCourseSectionVerticalData(courseId) {
+export function fetchCourseSectionVerticalData(courseId, sequenceId) {
   return async (dispatch) => {
     dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.IN_PROGRESS }));
-
+    dispatch(fetchSequenceRequest({ sequenceId }));
     try {
       const courseSectionVerticalData = await getCourseSectionVerticalData(courseId);
       dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
       dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.SUCCESSFUL }));
+      // console.log('courseSectionVerticalData SICK', courseSectionVerticalData.sequence);
+      dispatch(updateModel({
+        modelType: 'sequences',
+        model: courseSectionVerticalData.sequence,
+      }));
+      dispatch(updateModels({
+        modelType: 'units',
+        models: courseSectionVerticalData.units,
+      }));
+      dispatch(fetchSequenceSuccess({ sequenceId }));
       return true;
     } catch (error) {
       dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.FAILED }));
+      dispatch(fetchSequenceFailure({ sequenceId }));
       return false;
     }
   };
@@ -84,44 +95,45 @@ export function editCourseItemQuery(itemId, displayName) {
   };
 }
 
-export function fetchSequence(sequenceId) {
-  return async (dispatch) => {
-    dispatch(fetchSequenceRequest({ sequenceId }));
-    try {
-      const { sequence, units } = await getSequenceMetadata(sequenceId);
-
-      if (sequence.blockType !== 'sequential') {
-        // Some other block types (particularly 'chapter') can be returned
-        // by this API. We want to error in that case, since downstream
-        // courseware code is written to render Sequences of Units.
-        logError(
-          `Requested sequence '${sequenceId}' `
-            + `has block type '${sequence.blockType}'; expected block type 'sequential'.`,
-        );
-        dispatch(fetchSequenceFailure({ sequenceId }));
-      } else {
-        dispatch(updateModel({
-          modelType: 'sequences',
-          model: sequence,
-        }));
-        dispatch(updateModels({
-          modelType: 'units',
-          models: units,
-        }));
-        dispatch(fetchSequenceSuccess({ sequenceId }));
-      }
-    } catch (error) {
-      // Some errors are expected - for example, CoursewareContainer may request sequence metadata for a unit and rely
-      // on the request failing to notice that it actually does have a unit (mostly so it doesn't have to know anything
-      // about the opaque key structure). In such cases, the backend gives us a 422.
-      const sequenceMightBeUnit = error?.response?.status === 422;
-      if (!sequenceMightBeUnit) {
-        logError(error);
-      }
-      dispatch(fetchSequenceFailure({ sequenceId, sequenceMightBeUnit }));
-    }
-  };
-}
+// export function fetchSequence(sequenceId) {
+//   return async (dispatch) => {
+//     dispatch(fetchSequenceRequest({ sequenceId }));
+//     try {
+//       const { sequence, units } = await getSequenceMetadata(sequenceId);
+//
+//       if (sequence.blockType !== 'sequential') {
+//         // Some other block types (particularly 'chapter') can be returned
+//         // by this API. We want to error in that case, since downstream
+//         // courseware code is written to render Sequences of Units.
+//         logError(
+//           `Requested sequence '${sequenceId}' `
+//             + `has block type '${sequence.blockType}'; expected block type 'sequential'.`,
+//         );
+//         dispatch(fetchSequenceFailure({ sequenceId }));
+//       } else {
+//         console.log('sequence', sequence);
+//         dispatch(updateModel({
+//           modelType: 'sequences',
+//           model: sequence,
+//         }));
+//         dispatch(updateModels({
+//           modelType: 'units',
+//           models: units,
+//         }));
+//         dispatch(fetchSequenceSuccess({ sequenceId }));
+//       }
+//     } catch (error) {
+//       // Some errors are expected - for example, CoursewareContainer may request sequence metadata for a unit and rely
+//       // on the request failing to notice that it actually does have a unit (mostly so it doesn't have to know anything
+//       // about the opaque key structure). In such cases, the backend gives us a 422.
+//       const sequenceMightBeUnit = error?.response?.status === 422;
+//       if (!sequenceMightBeUnit) {
+//         logError(error);
+//       }
+//       dispatch(fetchSequenceFailure({ sequenceId, sequenceMightBeUnit }));
+//     }
+//   };
+// }
 
 export function fetchCourse(courseId) {
   return async (dispatch) => {
@@ -166,10 +178,10 @@ export function fetchCourse(courseId) {
           modelsMap: sections,
         }));
         // We update for sequences because the sequence metadata may have come back first.
-        dispatch(updateModelsMap({
-          modelType: 'sequences',
-          modelsMap: sequences,
-        }));
+        // dispatch(updateModelsMap({
+        //   modelType: 'sequences',
+        //   modelsMap: sequences,
+        // }));
       }
 
       const fetchedMetadata = courseMetadataResult.status === 'fulfilled';
diff --git a/src/course-unit/data/utils.js b/src/course-unit/data/utils.js
index 939702b897..3a68604190 100644
--- a/src/course-unit/data/utils.js
+++ b/src/course-unit/data/utils.js
@@ -189,3 +189,26 @@ export function normalizeCourseHomeCourseMetadata(metadata, rootSlug) {
     isMasquerading: data.originalUserIsStaff && !data.isStaff,
   };
 }
+
+export function normalizeCourseSectionVerticalData(metadata) {
+  const data = camelCaseObject(metadata);
+  return {
+    ...data,
+    sequence: {
+      id: data.subsectionLocation,
+      title: data.xblock.displayName,
+      unitIds: data.xblockInfo.ancestorInfo.ancestors[0].childInfo.children.map((item) => item.id),
+    },
+    units: data.xblockInfo.ancestorInfo.ancestors[0].childInfo.children.map((unit) => ({
+      id: unit.id,
+      sequenceId: data.subsectionLocation,
+      bookmarked: unit.bookmarked,
+      complete: unit.complete,
+      title: unit.displayName,
+      contentType: unit.type,
+      graded: unit.graded,
+      containsContentTypeGatedContent: unit.contains_content_type_gated_content,
+    })),
+
+  };
+}
diff --git a/src/course-unit/hooks.jsx b/src/course-unit/hooks.jsx
index 57ae0b0eb8..de68aa5bec 100644
--- a/src/course-unit/hooks.jsx
+++ b/src/course-unit/hooks.jsx
@@ -28,7 +28,7 @@ const useCourseUnit = ({ courseId, blockId }) => {
 
   const unitTitle = courseUnit.metadata?.displayName || '';
   const sequenceId = courseUnit.ancestorInfo?.ancestors[0].id;
-
+  console.log('sequenceId', sequenceId);
   const headerNavigationsActions = {
     handleViewLive: () => {
       window.open(config.LMS_BASE_URL + getUnitViewLivePath(courseId, blockId), '_blank');
@@ -63,8 +63,8 @@ const useCourseUnit = ({ courseId, blockId }) => {
 
   useEffect(() => {
     dispatch(fetchCourseUnitQuery(blockId));
-    dispatch(fetchCourseSectionVerticalData(blockId));
-    dispatch(fetchSequence(sequenceId));
+    dispatch(fetchCourseSectionVerticalData(blockId, sequenceId));
+    // dispatch(fetchSequence(sequenceId));
     dispatch(fetchCourse(courseId));
     handleNavigate(sequenceId);
   }, [courseId, blockId, sequenceId]);