feat: Unit creation button logic and refactoring

src/course-unit/data/thunk.js

@@ -12,7 +12,6 @@ import {
 import {
   getCourseUnitData,
   editUnitDisplayName,
-  getSequenceMetadata,
   getCourseMetadata,
   getLearningSequencesOutline,
   getCourseHomeCourseMetadata,
@@ -51,23 +50,34 @@ 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 }));
+      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;
     }
   };
 }
 
-export function editCourseItemQuery(itemId, displayName) {
+export function editCourseItemQuery(itemId, displayName, sequenceId) {
   return async (dispatch) => {
     dispatch(updateSavingStatus({ status: RequestStatus.PENDING }));
     dispatch(showProcessingNotification(NOTIFICATION_MESSAGES.saving));
@@ -76,6 +86,18 @@ export function editCourseItemQuery(itemId, displayName) {
       await editUnitDisplayName(itemId, displayName).then(async (result) => {
         if (result) {
           const courseUnit = await getCourseUnitData(itemId);
+          const courseSectionVerticalData = await getCourseSectionVerticalData(itemId);
+          dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
+          dispatch(updateLoadingCourseSectionVerticalDataStatus({ status: RequestStatus.SUCCESSFUL }));
+          dispatch(updateModel({
+            modelType: 'sequences',
+            model: courseSectionVerticalData.sequence,
+          }));
+          dispatch(updateModels({
+            modelType: 'units',
+            models: courseSectionVerticalData.units,
+          }));
+          dispatch(fetchSequenceSuccess({ sequenceId }));
           dispatch(fetchCourseItemSuccess(courseUnit));
           dispatch(hideProcessingNotification());
           dispatch(updateSavingStatus({ status: RequestStatus.SUCCESSFUL }));
@@ -88,45 +110,6 @@ 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 fetchCourse(courseId) {
   return async (dispatch) => {
     dispatch(fetchCourseRequest({ courseId }));
@@ -156,9 +139,7 @@ export function fetchCourse(courseId) {
       }
 
       if (learningSequencesOutlineResult.status === 'fulfilled') {
-        const {
-          courses, sections, sequences,
-        } = learningSequencesOutlineResult.value;
+        const { courses, sections } = learningSequencesOutlineResult.value;
 
         // This updates the course with a sectionIds array from the Learning Sequence data.
         dispatch(updateModelsMap({
@@ -169,11 +150,6 @@ export function fetchCourse(courseId) {
           modelType: 'sections',
           modelsMap: sections,
         }));
-        // We update for sequences because the sequence metadata may have come back first.
-        dispatch(updateModelsMap({
-          modelType: 'sequences',
-          modelsMap: sequences,
-        }));
       }
 
       const fetchedMetadata = courseMetadataResult.status === 'fulfilled';
@@ -225,6 +201,10 @@ export function createNewCourseXblock(body, callback) {
     try {
       await createCourseXblock(body).then(async (result) => {
         if (result) {
+          if (body.category === 'vertical') {
+            const courseSectionVerticalData = await getCourseSectionVerticalData(result.locator);
+            dispatch(fetchCourseSectionVerticalDataSuccess(courseSectionVerticalData));
+          }
           // ToDo: implement fetching (update) xblocks after success creating
           dispatch(hideProcessingNotification());
           dispatch(updateLoadingCourseXblockStatus({ status: RequestStatus.SUCCESSFUL }));