refactor(outline-sidebar): extract back navigation helper

Author: navinkarkera

src/course-outline/outline-sidebar/AddSidebar.test.tsx

@@ -433,24 +433,6 @@ describe('AddSidebar', () => {
     );
   });
 
-  it('back from subsection opens section', async () => {
-    const user = userEvent.setup();
-    const section = outlineChildren[0];
-    const subsection = section.childInfo.children[0];
-    selectedContainerState = {
-      currentId: subsection.id,
-      subsectionId: subsection.id,
-      sectionId: section.id,
-    };
-    renderComponent();
-
-    const back = await screen.findByRole('button', { name: 'Back' });
-    await user.click(back);
-
-    expect(openContainerSidebar).toHaveBeenCalledWith(section.id, undefined, section.id, 0);
-    expect(clearSelection).not.toHaveBeenCalled();
-  });
-
   it('back from subsection without section clears selection', async () => {
     const user = userEvent.setup();
     const section = outlineChildren[0];
@@ -467,20 +449,4 @@ describe('AddSidebar', () => {
     expect(clearSelection).toHaveBeenCalled();
     expect(openContainerSidebar).not.toHaveBeenCalled();
   });
-
-  it('back from section clears selection', async () => {
-    const user = userEvent.setup();
-    const section = outlineChildren[0];
-    selectedContainerState = {
-      currentId: section.id,
-      sectionId: section.id,
-    };
-    renderComponent();
-
-    const back = await screen.findByRole('button', { name: 'Back' });
-    await user.click(back);
-
-    expect(clearSelection).toHaveBeenCalled();
-    expect(openContainerSidebar).not.toHaveBeenCalled();
-  });
 });

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

@@ -29,6 +29,7 @@ import { COURSE_BLOCK_NAMES } from '@src/constants';
 import { BlockCardButton } from '@src/generic/sidebar/BlockCardButton';
 import AlertMessage from '@src/generic/alert-message';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
+import { navigateBackFromSelection } from './back-navigation';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 import messages from './messages';
 
@@ -390,42 +391,12 @@ export const AddSidebar = () => {
 
   const handleBack = () => {
     stopCurrentFlow();
-
-    if (!selectedContainerState) {
-      return;
-    }
-
-    const { currentId, subsectionId, sectionId } = selectedContainerState;
-    const sectionIndex = sections.findIndex((section) => section.id === sectionId);
-    const section = sectionIndex >= 0 ? sections[sectionIndex] : undefined;
-    const subsectionIndex = section
-      ?.childInfo.children.findIndex((subsection) => subsection.id === subsectionId) ?? -1;
-
-    if (currentId === subsectionId) {
-      if (sectionId) {
-        openContainerSidebar(sectionId, undefined, sectionId, sectionIndex >= 0 ? sectionIndex : undefined);
-        return;
-      }
-      clearSelection();
-      return;
-    }
-
-    if (currentId === sectionId) {
-      clearSelection();
-      return;
-    }
-
-    if (subsectionId) {
-      openContainerSidebar(
-        subsectionId,
-        subsectionId,
-        sectionId,
-        subsectionIndex >= 0 ? subsectionIndex : undefined,
-      );
-      return;
-    }
-
-    clearSelection();
+    navigateBackFromSelection({
+      selectedContainerState,
+      sections,
+      openContainer: openContainerSidebar,
+      clearSelection,
+    });
   };
 
   return (

src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx

@@ -131,55 +131,7 @@ describe('OutlineAlignSidebar', () => {
     });
   });
 
-  it('back button from subsection selects section', async () => {
-    jest
-      .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
-      .mockReturnValue({
-        selectedContainerState: {
-          currentId: 'subsection-1',
-          subsectionId: 'subsection-1',
-          sectionId: 'section-1',
-        },
-        clearSelection,
-        openContainerSidebar,
-      } as any);
-
-    render(<OutlineAlignSidebar />);
-
-    const backButton = await screen.findByRole('button', { name: /back/i });
-    backButton.click();
-
-    expect(openContainerSidebar).toHaveBeenCalledWith('section-1', undefined, 'section-1', 0);
-    expect(setCurrentSelection).toHaveBeenCalledWith({
-      currentId: 'section-1',
-      sectionId: 'section-1',
-      index: 0,
-    });
-  });
-
-  it('back button from subsection without section clears selection', async () => {
-    jest
-      .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
-      .mockReturnValue({
-        selectedContainerState: {
-          currentId: 'subsection-1',
-          subsectionId: 'subsection-1',
-        },
-        clearSelection,
-        openContainerSidebar,
-      } as any);
-
-    render(<OutlineAlignSidebar />);
-
-    const backButton = await screen.findByRole('button', { name: /back/i });
-    backButton.click();
-
-    expect(clearSelection).toHaveBeenCalled();
-    expect(setCurrentSelection).toHaveBeenCalledWith(undefined);
-    expect(openContainerSidebar).not.toHaveBeenCalled();
-  });
-
-  it('back button from section clears selection', async () => {
+  it('back button clears align selection when parent selection does not exist', async () => {
     jest
       .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
       .mockReturnValue({
@@ -198,32 +150,6 @@ describe('OutlineAlignSidebar', () => {
 
     expect(clearSelection).toHaveBeenCalled();
     expect(setCurrentSelection).toHaveBeenCalledWith(undefined);
-  });
-
-  it('back button handles missing section when selecting subsection parent', async () => {
-    jest
-      .spyOn(OutlineSidebarContext, 'useOutlineSidebarContext')
-      .mockReturnValue({
-        selectedContainerState: {
-          currentId: 'unit-1',
-          subsectionId: 'subsection-1',
-          sectionId: 'missing-section',
-        },
-        clearSelection,
-        openContainerSidebar,
-      } as any);
-
-    render(<OutlineAlignSidebar />);
-
-    const backButton = await screen.findByRole('button', { name: /back/i });
-    backButton.click();
-
-    expect(openContainerSidebar).toHaveBeenCalledWith('subsection-1', 'subsection-1', 'missing-section', undefined);
-    expect(setCurrentSelection).toHaveBeenCalledWith({
-      currentId: 'subsection-1',
-      subsectionId: 'subsection-1',
-      sectionId: 'missing-section',
-      index: undefined,
-    });
+    expect(openContainerSidebar).not.toHaveBeenCalled();
   });
 });

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

@@ -2,6 +2,7 @@ import { useContentData } from '@src/content-tags-drawer/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useCourseOutlineContext } from '@src/course-outline/CourseOutlineContext';
 import { AlignSidebar } from '@src/generic/sidebar/AlignSidebar';
+import { navigateBackFromSelection } from './back-navigation';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 /**
@@ -17,60 +18,13 @@ export const OutlineAlignSidebar = () => {
   const { data: contentData } = useContentData(sidebarContentId);
 
   const handleBack = () => {
-    const { currentId, subsectionId, sectionId } = selectedContainerState || {};
-    const sectionIndex = sections.findIndex((section) => section.id === sectionId);
-    const section = sectionIndex >= 0 ? sections[sectionIndex] : undefined;
-    const subsectionIndex = section
-      ?.childInfo.children.findIndex((subsection) => subsection.id === subsectionId) ?? -1;
-
-    // istanbul ignore next
-    if (!currentId) {
-      clearSelection();
-      setCurrentSelection(undefined);
-      return;
-    }
-
-    if (currentId === subsectionId) {
-      if (sectionId) {
-        openContainerSidebar(sectionId, undefined, sectionId, sectionIndex >= 0 ? sectionIndex : undefined);
-        setCurrentSelection({
-          currentId: sectionId,
-          sectionId,
-          index: sectionIndex >= 0 ? sectionIndex : undefined,
-        });
-        return;
-      }
-      clearSelection();
-      setCurrentSelection(undefined);
-      return;
-    }
-
-    if (currentId === sectionId) {
-      clearSelection();
-      setCurrentSelection(undefined);
-      return;
-    }
-
-    if (subsectionId) {
-      openContainerSidebar(
-        subsectionId,
-        subsectionId,
-        sectionId,
-        subsectionIndex >= 0 ? subsectionIndex : undefined,
-      );
-      setCurrentSelection({
-        currentId: subsectionId,
-        subsectionId,
-        sectionId,
-        index: subsectionIndex >= 0 ? subsectionIndex : undefined,
-      });
-      return;
-    }
-
-    // istanbul ignore next
-    clearSelection();
-    // istanbul ignore next
-    setCurrentSelection(undefined);
+    navigateBackFromSelection({
+      selectedContainerState,
+      sections,
+      openContainer: openContainerSidebar,
+      clearSelection,
+      onSelectionChange: setCurrentSelection,
+    });
   };
 
   return (