refactor(course-outline): simplify sidebar modal state

Extract useModalState<T> generic hook — refactor useConfigureDialog
and useHighlightsModal to delegate toggle+data state to it.

Extract useItemFieldSync hook — replace three didMountRef+useEffect
blocks in SubsectionSettings.

Extract useDefaultTab hook — replace identical default-tab effects
in SectionInfoSidebar, SubsectionInfoSidebar, UnitInfoSidebar.

43/43 affected tests pass. No new lint/format/type issues.

Author: navinkarkera

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useDefaultTab } from '../../../hooks/useDefaultTab';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
 import { useNavigate } from 'react-router-dom';
@@ -45,12 +45,7 @@ export const SectionSidebar = () => {
     settings: 'settings',
   };
 
-  useEffect(() => {
-    if (!currentTabKey || !Object.values(availableTabs).includes(currentTabKey)) {
-      // Set default Tab key
-      setCurrentTabKey('info');
-    }
-  }, [currentTabKey, setCurrentTabKey]);
+  useDefaultTab('section');
   const { sectionId = '', index } = selectedContainerState ?? {};
   const { data: sectionData, isLoading } = useCourseItemData(sectionId);
 

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useDefaultTab } from '../../../hooks/useDefaultTab';
 import { isEmpty } from 'lodash';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -42,12 +42,7 @@ export const SubsectionSidebar = () => {
     settings: 'settings',
   };
 
-  useEffect(() => {
-    if (!currentTabKey || !Object.values(availableTabs).includes(currentTabKey)) {
-      // Set default Tab key
-      setCurrentTabKey('info');
-    }
-  }, [currentTabKey, setCurrentTabKey]);
+  useDefaultTab('subsection');
   const { data: section } = useCourseItemData<XBlock>(selectedContainerState?.sectionId);
   const { courseId, openUnlinkModal } = useCourseAuthoringContext();
   const duplicateMutation = useDuplicateItem(courseId);

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

@@ -14,10 +14,9 @@ import AdvancedTab from '@src/generic/configure-modal/AdvancedTab';
 import { DatepickerControl, DATEPICKER_TYPES } from '@src/generic/datepicker-control';
 import { SidebarContent, SidebarSection } from '@src/generic/sidebar';
 import { useStateWithCallback } from '@src/hooks';
+import { useItemFieldSync } from '../../../hooks/useItemFieldSync';
 import {
   useCallback,
-  useEffect,
-  useRef,
   useState,
 } from 'react';
 import { ReleaseSection } from './sharedSettings/ReleaseSection';
@@ -53,19 +52,11 @@ const GradingSection = ({ subsectionId, onChange }: SubProps) => {
     },
     (val) => onChange(val || {}),
   );
-  const didMountRef = useRef(false);
-
-  useEffect(() => {
+  useItemFieldSync(() => {
     const nextState = {
       graderType: itemData?.format,
       dueDate: itemData?.due || '',
     };
-
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
-    }
-
     if (localState?.graderType !== nextState.graderType || localState?.dueDate !== nextState.dueDate) {
       setLocalState(nextState);
     }
@@ -149,14 +140,7 @@ const AssessmentResultVisibilitySection = ({ subsectionId, onChange }: SubProps)
     },
     (val) => onChange(val || {}),
   );
-  const didMountRef = useRef(false);
-
-  useEffect(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
-    }
-
+  useItemFieldSync(() => {
     if (localState?.showCorrectness !== itemData?.showCorrectness) {
       setLocalState({ showCorrectness: itemData?.showCorrectness });
     }
@@ -222,17 +206,9 @@ const SpecialExamSection = ({ subsectionId, onChange }: SubProps) => {
     getLatestLocalState,
     (val) => onChange(val || {}),
   );
-  const didMountRef = useRef(false);
-
-  useEffect(() => {
-    if (!didMountRef.current) {
-      didMountRef.current = true;
-      return;
-    }
-
+  useItemFieldSync(() => {
     const nextState = getLatestLocalState();
     const hasChanges = Object.keys(nextState).some((key) => (localState as any)?.[key] !== (nextState as any)[key]);
-
     if (hasChanges) {
       setLocalState({ value: nextState, skipCallback: true });
     }

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

@@ -1,4 +1,5 @@
-import { useEffect, useContext } from 'react';
+import { useContext } from 'react';
+import { useDefaultTab } from '../../../hooks/useDefaultTab';
 import { isEmpty } from 'lodash';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -89,12 +90,7 @@ export const UnitSidebar = () => {
     settings: 'settings',
   };
 
-  useEffect(() => {
-    if (!currentTabKey || !Object.values(availableTabs).includes(currentTabKey)) {
-      // Set default Tab key
-      setCurrentTabKey('preview');
-    }
-  }, [currentTabKey, setCurrentTabKey]);
+  useDefaultTab('unit');
 
   const { data: section } = useCourseItemData<XBlock>(selectedContainerState?.sectionId);
   const { data: subsection } = useCourseItemData<XBlock>(selectedContainerState?.subsectionId);

src/course-outline/state/useConfigureModal.ts

@@ -1,6 +1,5 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 
-import { useToggle } from '@openedx/paragon';
 import type { OutlineActionSelection, XBlock } from '@src/data/types';
 import {
   useCourseItemData,
@@ -11,6 +10,7 @@ import {
 } from '../data';
 import { useOutlineConfigureAction } from './useOutlineActions';
 import { COURSE_BLOCK_NAMES } from '../constants';
+import { useModalState } from './useModalState';
 
 export interface UseConfigureDialogOutput {
   isConfigureModalOpen: boolean;
@@ -27,8 +27,12 @@ export interface UseConfigureDialogOutput {
 export function useConfigureDialog(courseId: string): UseConfigureDialogOutput {
   const { handleConfigureItemSubmit } = useOutlineConfigureAction(courseId);
 
-  const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
-  const [configureModalData, setConfigureModalData] = useState<OutlineActionSelection | undefined>();
+  const {
+    isOpen: isConfigureModalOpen,
+    open: openConfigureModal,
+    close: closeConfigureModal,
+    data: configureModalData,
+  } = useModalState<OutlineActionSelection>();
 
   const { data: configureItemData } = useCourseItemData(
     isConfigureModalOpen ? configureModalData?.currentId : undefined,
@@ -39,18 +43,26 @@ export function useConfigureDialog(courseId: string): UseConfigureDialogOutput {
 
   const handleConfigureModalClose = useCallback(() => {
     closeConfigureModal();
-    setConfigureModalData(undefined);
   }, [closeConfigureModal]);
 
   const handleOpenConfigureModal = useCallback((selection: OutlineActionSelection) => {
-    setConfigureModalData(selection);
-    openConfigureModal();
+    openConfigureModal(selection);
   }, [openConfigureModal]);
 
-  const payloadBuilders: Record<string, (data: typeof configureModalData, vars: Record<string, unknown>) => ConfigureItemPayload> = {
+  const payloadBuilders: Record<
+    string,
+    (data: typeof configureModalData, vars: Record<string, unknown>) => ConfigureItemPayload
+  > = {
     chapter: (data, vars) => ({ category: 'chapter', sectionId: data!.sectionId, ...vars }) as ChapterConfigurePayload,
-    sequential: (data, vars) => ({ category: 'sequential', itemId: data!.currentId, sectionId: data!.sectionId, ...vars }) as SequentialConfigurePayload,
-    vertical: (data, vars) => ({ category: 'vertical', unitId: data!.currentId, sectionId: data!.sectionId, ...vars }) as UnitConfigurePayload,
+    sequential: (data, vars) =>
+      ({
+        category: 'sequential',
+        itemId: data!.currentId,
+        sectionId: data!.sectionId,
+        ...vars,
+      }) as SequentialConfigurePayload,
+    vertical: (data, vars) =>
+      ({ category: 'vertical', unitId: data!.currentId, sectionId: data!.sectionId, ...vars }) as UnitConfigurePayload,
   };
 
   const handleConfigureItemSubmitWrapper = useCallback(async (variables: Record<string, unknown>) => {

src/course-outline/state/useHighlightsModal.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 
 import { useToggle } from '@openedx/paragon';
 import type { XBlock } from '@src/data/types';
@@ -7,6 +7,7 @@ import {
   useEnableCourseHighlightsEmails,
 } from '../data';
 import type { HighlightData } from '../highlights-modal/HighlightsModal';
+import { useModalState } from './useModalState';
 
 export interface UseHighlightsModalOutput {
   isEnableHighlightsModalOpen: boolean;
@@ -28,17 +29,20 @@ export function useHighlightsModal(courseId: string): UseHighlightsModalOutput {
   const enableHighlightsEmailsMutation = useEnableCourseHighlightsEmails(courseId);
 
   const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
-  const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
-  const [highlightsModalData, setHighlightsModalData] = useState<string | undefined>();
+  const {
+    isOpen: isHighlightsModalOpen,
+    open: openHighlightsModal,
+    close: closeHighlightsModal,
+    data: highlightsModalData,
+  } = useModalState<string>();
 
   const handleEnableHighlightsSubmit = useCallback(() => {
     enableHighlightsEmailsMutation.mutate();
     closeEnableHighlightsModal();
   }, [enableHighlightsEmailsMutation, closeEnableHighlightsModal]);
 
   const handleOpenHighlightsModal = useCallback((section: XBlock) => {
-    setHighlightsModalData(section.id);
-    openHighlightsModal();
+    openHighlightsModal(section.id);
   }, [openHighlightsModal]);
 
   const handleHighlightsFormSubmit = useCallback((highlights: HighlightData) => {
@@ -48,7 +52,6 @@ export function useHighlightsModal(courseId: string): UseHighlightsModalOutput {
     ) as string[];
     highlightsMutation.mutate({ sectionId: highlightsModalData, highlights: dataToSend });
     closeHighlightsModal();
-    setHighlightsModalData(undefined);
   }, [highlightsModalData, highlightsMutation, closeHighlightsModal]);
 
   return {

src/course-outline/state/useModalState.ts

@@ -0,0 +1,27 @@
+import { useState, useCallback } from 'react';
+
+/**
+ * Generic modal state hook — manages open/close + optional typed data.
+ *
+ * @example
+ *   const { isOpen, open, close, data } = useModalState<OutlineActionSelection>();
+ *   open(someSelection);     // sets data + isOpen = true
+ *   close();                 // clears data + isOpen = false
+ *   data                     // the selection (or undefined when closed)
+ */
+export function useModalState<T>() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [data, setData] = useState<T | undefined>();
+
+  const open = useCallback((d: T) => {
+    setData(d);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback(() => {
+    setData(undefined);
+    setIsOpen(false);
+  }, []);
+
+  return { isOpen, open, close, data };
+}

src/hooks/useDefaultTab.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+
+type SidebarLevel = 'section' | 'subsection' | 'unit';
+
+interface TabConfig {
+  defaultKey: string;
+  availableTabs: Record<string, string>;
+}
+
+const TAB_CONFIG: Record<SidebarLevel, TabConfig> = {
+  section: { defaultKey: 'info', availableTabs: { info: 'info', settings: 'settings' } },
+  subsection: { defaultKey: 'info', availableTabs: { info: 'info', settings: 'settings' } },
+  unit: { defaultKey: 'preview', availableTabs: { preview: 'preview', info: 'info', settings: 'settings' } },
+};
+
+/**
+ * Sets the default sidebar tab on mount if no valid tab is selected.
+ *
+ * @param level - Sidebar level identifying which block is being viewed.
+ *
+ *   - `'section'` / `'subsection'`: defaults to `'info'` tab.
+ *   - `'unit'`: defaults to `'preview'` tab.
+ */
+export function useDefaultTab(level: SidebarLevel): void {
+  const { currentTabKey, setCurrentTabKey } = useOutlineSidebarContext();
+  const { defaultKey, availableTabs } = TAB_CONFIG[level];
+
+  useEffect(() => {
+    if (!currentTabKey || !Object.values(availableTabs).includes(currentTabKey)) {
+      setCurrentTabKey(defaultKey);
+    }
+  }, [currentTabKey, setCurrentTabKey, defaultKey, availableTabs]);
+}

src/hooks/useItemFieldSync.ts

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * Runs `effect` on every render after the first mount.
+ *
+ * The original pattern this replaces uses `didMountRef` + `useEffect` to
+ * skip the initial mount. This hook preserves that first‑mount skip
+ * behavior.
+ *
+ * NOTE: intentionally does **not** return `effect()` — the original pattern
+ * discards cleanup by design. Returning it would cause React to call the
+ * return value as a cleanup function on unmount, risking exceptions.
+ */
+export function useItemFieldSync(effect: () => void, deps: any[]): void {
+  const didMountRef = useRef(false);
+
+  useEffect(() => {
+    if (!didMountRef.current) {
+      didMountRef.current = true;
+      return;
+    }
+    effect();
+  }, deps);
+}