refactor(course-outline): expose module interfaces and trim reorder API

Route local course-outline imports through public state/data index files.
Move reorder preview math to callers so commit handlers own mutation
and cache-sync work.

Also remove stale hook deps and an unsafe outline data cast.

Author: navinkarkera

src/course-outline/CourseOutline.test.tsx

@@ -33,7 +33,9 @@ import {
   getCourseItemApiUrl,
   getXBlockBaseApiUrl,
   exportTags,
-} from './data/api';
+  courseOutlineIndexQueryKey,
+  courseOutlineQueryKeys,
+} from './data';
 
 import {
   courseOutlineIndexMock as originalCourseOutlineIndexMock,
@@ -44,8 +46,6 @@ import {
   courseSubsectionMock,
 } from './__mocks__';
 import { COURSE_BLOCK_NAMES, VIDEO_SHARING_OPTIONS } from './constants';
-import { courseOutlineIndexQueryKey } from './data/outlineIndexQuery';
-import { courseOutlineQueryKeys } from './data/apiHooks';
 import CourseOutline from './CourseOutline';
 
 import messages from './messages';

src/course-outline/CourseOutline.tsx

@@ -32,20 +32,19 @@ import {
   useSetVideoSharingOption,
   useDismissNotification,
   useRestartIndexingOnCourse,
-} from '@src/course-outline/data/apiHooks';
+} from '@src/course-outline/data';
 import { useCourseOutlineContext } from './CourseOutlineContext';
 import { COURSE_BLOCK_NAMES } from './constants';
 
 import PageAlerts from './page-alerts/PageAlerts';
 
-import type { CourseOutline as CourseOutlineData } from './data/types';
 import OutlineTree from './OutlineTree';
-import { useOutlineModals } from './state/useOutlineModals';
+import { useOutlineModals } from './state';
 import OutlineModals from './OutlineModals';
 
 import messages from './messages';
 import headerMessages from './header-navigations/messages';
-import { getTagsExportFile } from './data/api';
+import { getTagsExportFile } from './data';
 import { StatusBar } from './status-bar/StatusBar';
 
 const CourseOutline = () => {
@@ -57,9 +56,6 @@ const CourseOutline = () => {
   const {
     courseUsageKey,
     sections,
-    updateSectionOrderByIndex,
-    updateSubsectionOrderByIndex,
-    updateUnitOrderByIndex,
     previewSections,
     cancelReorderPreview,
     commitSectionReorder,
@@ -79,17 +75,15 @@ const CourseOutline = () => {
     outlineIndexData,
   } = useCourseOutlineContext();
 
-  const {
-    reindexLink,
-    lmsLink,
-    notificationDismissUrl,
-    discussionsSettings,
-    discussionsIncontextLearnmoreUrl,
-    deprecatedBlocksInfo,
-    proctoringErrors,
-    mfeProctoredExamSettingsUrl,
-    advanceSettingsUrl,
-  } = (outlineIndexData || {}) as CourseOutlineData;
+  const reindexLink = outlineIndexData?.reindexLink;
+  const lmsLink = outlineIndexData?.lmsLink;
+  const notificationDismissUrl = outlineIndexData?.notificationDismissUrl;
+  const discussionsSettings = outlineIndexData?.discussionsSettings;
+  const discussionsIncontextLearnmoreUrl = outlineIndexData?.discussionsIncontextLearnmoreUrl;
+  const deprecatedBlocksInfo = outlineIndexData?.deprecatedBlocksInfo;
+  const proctoringErrors = outlineIndexData?.proctoringErrors;
+  const mfeProctoredExamSettingsUrl = outlineIndexData?.mfeProctoredExamSettingsUrl;
+  const advanceSettingsUrl = outlineIndexData?.advanceSettingsUrl;
 
   const { reIndexLoadingStatus } = loadingStatus || {};
 
@@ -151,7 +145,7 @@ const CourseOutline = () => {
     handleExpandAll: () => {
       setSectionsExpanded((prevState) => !prevState);
     },
-    lmsLink,
+    lmsLink: lmsLink ?? '',
   }), [handleAddBlock, courseUsageKey, reindexLink, reindexMutation, lmsLink]);
 
   // ─── Effects (previously in hooks.jsx) ───────────────────────────────────
@@ -313,9 +307,6 @@ const CourseOutline = () => {
                     commitSectionReorder={commitSectionReorder}
                     commitSubsectionReorder={commitSubsectionReorder}
                     commitUnitReorder={commitUnitReorder}
-                    updateSectionOrderByIndex={updateSectionOrderByIndex}
-                    updateSubsectionOrderByIndex={updateSubsectionOrderByIndex}
-                    updateUnitOrderByIndex={updateUnitOrderByIndex}
                     handleOpenHighlightsModal={handleOpenHighlightsModal}
                     openConfigureModal={handleOpenConfigureModal}
                     openDeleteModal={openDeleteModal}

src/course-outline/CourseOutlineContext.test.tsx

@@ -5,7 +5,7 @@ import {
   waitFor,
 } from '@src/testUtils';
 import { courseOutlineIndexMock } from './__mocks__';
-import { getCourseOutlineIndexApiUrl } from './data/api';
+import { getCourseOutlineIndexApiUrl } from './data';
 import {
   CourseOutlineProvider,
   useCourseOutlineContext,

src/course-outline/CourseOutlineContext.tsx

@@ -14,38 +14,33 @@ import type {
   XBlockActions,
 } from '@src/data/types';
 
-import { useCourseItemData, useCourseOutlineSavingStatus, useCourseOutlineReindexStatus } from './data/apiHooks';
+import { useCourseItemData, useCourseOutlineSavingStatus, useCourseOutlineReindexStatus } from './data';
 
 import { useToggleWithValue } from '@src/hooks';
-import { useOutlineReorderState } from './state/useOutlineReorderState';
-import { useOutlineStatusState } from './state/useOutlineStatusState';
 import {
+  useOutlineReorderState,
+  useOutlineStatusState,
   computeErrorSignature,
   filterDismissedErrors,
   pruneDismissedErrorSignatures,
-} from './state/outlineErrorDismissal';
-import {
   EditableSubsection,
   getLastEditableItem,
   getLastEditableSubsection,
-} from './state/editability';
+} from './state';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import type { ModalState } from '@src/CourseAuthoringContext';
 
 import {
   CourseOutline,
   CourseOutlineState as LegacyCourseOutlineState,
   CourseOutlineStatusBar,
-} from './data/types';
+} from './data';
 
 type CourseOutlineContextData = {
   outlineIndexData: CourseOutline | undefined;
   courseName?: string;
   courseUsageKey: string;
   sections: XBlock[];
-  updateSectionOrderByIndex: (currentIndex: number, newIndex: number) => Promise<void>;
-  updateSubsectionOrderByIndex: (section: XBlock, moveDetails: any) => Promise<void>;
-  updateUnitOrderByIndex: (section: XBlock, moveDetails: any) => Promise<void>;
   courseActions: XBlockActions;
   statusBarData: CourseOutlineStatusBar;
   savingStatus: string;
@@ -127,9 +122,6 @@ export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode
     commitSectionReorder,
     commitSubsectionReorder,
     commitUnitReorder,
-    updateSectionOrderByIndex,
-    updateSubsectionOrderByIndex,
-    updateUnitOrderByIndex,
   } = useOutlineReorderState({ courseId, sections });
 
   const [currentSelection, setCurrentSelection] = useState<SelectionState | undefined>();
@@ -245,9 +237,6 @@ export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode
     courseName: effectiveOutlineIndexData?.courseStructure?.displayName,
     courseUsageKey: effectiveOutlineIndexData?.courseStructure?.id || courseId,
     sections: visibleSections,
-    updateSectionOrderByIndex,
-    updateSubsectionOrderByIndex,
-    updateUnitOrderByIndex,
     courseActions,
     statusBarData,
     savingStatus,
@@ -284,9 +273,6 @@ export const CourseOutlineProvider = ({ children }: { children?: React.ReactNode
     effectiveOutlineIndexData,
     courseId,
     visibleSections,
-    updateSectionOrderByIndex,
-    updateSubsectionOrderByIndex,
-    updateUnitOrderByIndex,
     courseActions,
     statusBarData,
     savingStatus,

src/course-outline/CourseOutlineStateContext.test.tsx

@@ -13,8 +13,7 @@ import {
   CourseOutlineProvider,
   useCourseOutlineContext,
 } from './CourseOutlineContext';
-import { courseOutlineIndexQueryKey } from './data/outlineIndexQuery';
-import { getCourseOutlineIndexApiUrl } from './data/api';
+import { courseOutlineIndexQueryKey, getCourseOutlineIndexApiUrl } from './data';
 
 let currentItemData;
 const mockOutlineIndexData = {

src/course-outline/OutlineTree.tsx

@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+import { arrayMove } from '@dnd-kit/sortable';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { ContainerType } from '@src/generic/key-utils';
 import type { OutlineActionSelection, XBlock, XBlockActions } from '@src/data/types';
@@ -10,6 +12,8 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import DraggableList from './drag-helper/DraggableList';
 import {
   canMoveSection,
+  moveSubsection,
+  moveUnit,
   possibleUnitMoves,
   possibleSubsectionMoves,
 } from './drag-helper/utils';
@@ -37,9 +41,6 @@ export interface OutlineTreeProps {
     subsectionId: string,
     unitListIds: string[],
   ) => Promise<void>;
-  updateSectionOrderByIndex: (currentIndex: number, newIndex: number) => Promise<void>;
-  updateSubsectionOrderByIndex: (section: XBlock, moveDetails: any) => Promise<void>;
-  updateUnitOrderByIndex: (section: XBlock, moveDetails: any) => Promise<void>;
   handleOpenHighlightsModal: (section: XBlock) => void;
   openConfigureModal: (selection: OutlineActionSelection) => void;
   openDeleteModal: (selection: OutlineActionSelection) => void;
@@ -60,15 +61,50 @@ const OutlineTree = ({
   commitSectionReorder,
   commitSubsectionReorder,
   commitUnitReorder,
-  updateSectionOrderByIndex,
-  updateSubsectionOrderByIndex,
-  updateUnitOrderByIndex,
   handleOpenHighlightsModal,
   openConfigureModal,
   openDeleteModal,
   handlePasteClipboardClick,
-}: OutlineTreeProps) => (
-  <section>
+}: OutlineTreeProps) => {
+  // ─── Card order change handlers (preview + commit) ────────────────────
+  const handleSectionOrderChange = useCallback(async (oldIndex: number, newIndex: number) => {
+    if (oldIndex === newIndex) { return; }
+    const nextSections = arrayMove(sections, oldIndex, newIndex) as XBlock[];
+    const sectionListIds = nextSections.map((s) => s.id);
+    previewSections(nextSections);
+    await commitSectionReorder(sectionListIds);
+  }, [sections, previewSections, commitSectionReorder]);
+
+  const handleSubsectionOrderChange = useCallback(async (section: XBlock, moveDetails: any) => {
+    const { fn, args, sectionId } = moveDetails;
+    if (!args) { return; }
+    const [sectionsCopy, newSubsections] = fn(...args);
+    if (newSubsections && sectionId) {
+      previewSections(sectionsCopy);
+      await commitSubsectionReorder(
+        sectionId,
+        section.id,
+        newSubsections.map((s: XBlock) => s.id),
+      );
+    }
+  }, [previewSections, commitSubsectionReorder]);
+
+  const handleUnitOrderChange = useCallback(async (section: XBlock, moveDetails: any) => {
+    const { fn, args, sectionId, subsectionId } = moveDetails;
+    if (!args) { return; }
+    const [sectionsCopy, newUnits] = fn(...args);
+    if (newUnits && subsectionId) {
+      previewSections(sectionsCopy);
+      await commitUnitReorder(
+        sectionId,
+        section.id,
+        subsectionId,
+        newUnits.map((u: XBlock) => u.id),
+      );
+    }
+  }, [previewSections, commitUnitReorder]);
+
+  return (<section>
     {!hasOutlineIndexError && (
       <div className="pt-4">
         {sections.length ? (
@@ -98,7 +134,7 @@ const OutlineTree = ({
                     onOpenConfigureModal={openConfigureModal}
                     onOpenDeleteModal={openDeleteModal}
                     isSectionsExpanded={isSectionsExpanded}
-                    onOrderChange={updateSectionOrderByIndex}
+                    onOrderChange={handleSectionOrderChange}
                   >
                     <SortableContext
                       id={section.id}
@@ -122,7 +158,7 @@ const OutlineTree = ({
                           isCustomRelativeDatesActive={isCustomRelativeDatesActive}
                           onOpenDeleteModal={openDeleteModal}
                           onOpenConfigureModal={openConfigureModal}
-                          onOrderChange={updateSubsectionOrderByIndex}
+                          onOrderChange={handleSubsectionOrderChange}
                           onPasteClick={handlePasteClipboardClick}
                         >
                           <SortableContext
@@ -149,7 +185,7 @@ const OutlineTree = ({
                                 )}
                                 onOpenConfigureModal={openConfigureModal}
                                 onOpenDeleteModal={openDeleteModal}
-                                onOrderChange={updateUnitOrderByIndex}
+                                onOrderChange={handleUnitOrderChange}
                                 discussionsSettings={discussionsSettings}
                               />
                             ))}
@@ -185,6 +221,7 @@ const OutlineTree = ({
       </div>
     )}
   </section>
-);
+  );
+};
 
 export default OutlineTree;

src/course-outline/data/index.ts

@@ -0,0 +1,4 @@
+export * from './api';
+export * from './apiHooks';
+export * from './outlineIndexQuery';
+export * from './types';

src/course-outline/outline-sidebar/OutlineHelpSidebar.tsx

@@ -6,7 +6,7 @@ import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sideb
 import { useHelpUrls } from '@src/help-urls/hooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 
-import { useCourseDetails } from '../data/apiHooks';
+import { useCourseDetails } from '../data';
 import { getFormattedSidebarMessages } from './utils';
 
 const OutlineHelpSideBar = () => {

src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx

@@ -12,7 +12,6 @@ import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
 import { useGetBlockTypes } from '@src/search-manager';
 import { useQueryClient } from '@tanstack/react-query';
 import { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
 import { LibraryReferenceCard } from '@src/generic/library-reference-card/LibraryReferenceCard';
 import messages from '../messages';
 
@@ -22,7 +21,6 @@ interface Props {
 
 export const InfoSection = ({ itemId }: Props) => {
   const intl = useIntl();
-  const dispatch = useDispatch();
   const queryClient = useQueryClient();
   const { data: itemData } = useCourseItemData(itemId);
   const { data: componentData } = useGetBlockTypes(
@@ -52,7 +50,7 @@ export const InfoSection = ({ itemId }: Props) => {
     if (courseId) {
       invalidateLinksQuery(queryClient, courseId);
     }
-  }, [dispatch, selectedContainerState, queryClient, courseId]);
+  }, [selectedContainerState, queryClient, courseId]);
 
   /* istanbul ignore next */
   if (!itemData) {