refactor: split up library context (#1539)

Split the library context into smaller contexts:

* LibraryContext
* ComponentPickerContext
* SidebarContext

Author: rpenido

src/library-authoring/EmptyStates.tsx

@@ -6,7 +6,7 @@ import {
 import { Add } from '@openedx/paragon/icons';
 import { ClearFiltersButton } from '../search-manager';
 import messages from './messages';
-import { useLibraryContext } from './common/context';
+import { useLibraryContext } from './common/context/LibraryContext';
 
 export const NoComponents = ({
   infoText = messages.noComponents,

src/library-authoring/LibraryAuthoringPage.tsx

@@ -37,19 +37,25 @@ import {
 } from '../search-manager';
 import LibraryContent, { ContentType } from './LibraryContent';
 import { LibrarySidebar } from './library-sidebar';
-import { SidebarBodyComponentId, useLibraryContext } from './common/context';
+import { useComponentPickerContext } from './common/context/ComponentPickerContext';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { SidebarBodyComponentId, useSidebarContext } from './common/context/SidebarContext';
+
 import messages from './messages';
 
 const HeaderActions = () => {
   const intl = useIntl();
+
+  const { readOnly } = useLibraryContext();
+
   const {
-    componentPickerMode,
     openAddContentSidebar,
     openInfoSidebar,
     closeLibrarySidebar,
     sidebarComponentInfo,
-    readOnly,
-  } = useLibraryContext();
+  } = useSidebarContext();
+
+  const { componentPickerMode } = useComponentPickerContext();
 
   const infoSidebarIsOpen = () => (
     sidebarComponentInfo?.type === SidebarBodyComponentId.Info
@@ -94,7 +100,8 @@ const HeaderActions = () => {
 const SubHeaderTitle = ({ title }: { title: string }) => {
   const intl = useIntl();
 
-  const { readOnly, componentPickerMode } = useLibraryContext();
+  const { readOnly } = useLibraryContext();
+  const { componentPickerMode } = useComponentPickerContext();
 
   const showReadOnlyBadge = readOnly && !componentPickerMode;
 
@@ -127,16 +134,14 @@ const LibraryAuthoringPage = ({ returnToLibrarySelection }: LibraryAuthoringPage
     librariesV2Enabled,
   } = useStudioHome();
 
+  const { componentPickerMode, restrictToLibrary } = useComponentPickerContext();
   const {
     libraryId,
     libraryData,
     isLoadingLibraryData,
-    componentPickerMode,
-    restrictToLibrary,
     showOnlyPublished,
-    sidebarComponentInfo,
-    openInfoSidebar,
   } = useLibraryContext();
+  const { openInfoSidebar, sidebarComponentInfo } = useSidebarContext();
 
   const [activeKey, setActiveKey] = useState<ContentType | undefined>(ContentType.home);
 

src/library-authoring/LibraryContent.test.tsx

@@ -9,7 +9,7 @@ import {
 import { getContentSearchConfigUrl } from '../search-manager/data/api';
 import { mockContentLibrary } from './data/api.mocks';
 import mockEmptyResult from '../search-modal/__mocks__/empty-search-result.json';
-import { LibraryProvider } from './common/context';
+import { LibraryProvider } from './common/context/LibraryContext';
 import LibraryContent from './LibraryContent';
 import { libraryComponentsMock } from './__mocks__';
 
@@ -56,7 +56,9 @@ const clipboardBroadcastChannelMock = {
 
 const withLibraryId = (libraryId: string) => ({
   extraWrapper: ({ children }: { children: React.ReactNode }) => (
-    <LibraryProvider libraryId={libraryId}>{children}</LibraryProvider>
+    <LibraryProvider libraryId={libraryId}>
+      {children}
+    </LibraryProvider>
   ),
 });
 

src/library-authoring/LibraryContent.tsx

@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 import { LoadingSpinner } from '../generic/Loading';
 import { useSearchContext } from '../search-manager';
 import { NoComponents, NoSearchResults } from './EmptyStates';
-import { useLibraryContext } from './common/context';
+import { useLibraryContext } from './common/context/LibraryContext';
+import { useSidebarContext } from './common/context/SidebarContext';
 import CollectionCard from './components/CollectionCard';
 import ComponentCard from './components/ComponentCard';
 import { useLoadOnScroll } from '../hooks';
@@ -37,7 +38,8 @@ const LibraryContent = ({ contentType = ContentType.home }: LibraryContentProps)
     isFiltered,
     usageKey,
   } = useSearchContext();
-  const { openAddContentSidebar, openComponentInfoSidebar, openCreateCollectionModal } = useLibraryContext();
+  const { openCreateCollectionModal } = useLibraryContext();
+  const { openAddContentSidebar, openComponentInfoSidebar } = useSidebarContext();
 
   useEffect(() => {
     if (usageKey) {

src/library-authoring/LibraryLayout.tsx

@@ -6,9 +6,9 @@ import {
 } from 'react-router-dom';
 
 import LibraryAuthoringPage from './LibraryAuthoringPage';
-import { LibraryProvider } from './common/context';
+import { LibraryProvider } from './common/context/LibraryContext';
+import { SidebarProvider } from './common/context/SidebarContext';
 import { CreateCollectionModal } from './create-collection';
-import { LibraryTeamModal } from './library-team';
 import LibraryCollectionPage from './collections/LibraryCollectionPage';
 import { ComponentPicker } from './component-picker';
 import { ComponentEditorModal } from './components/ComponentEditorModal';
@@ -27,6 +27,8 @@ const LibraryLayout = () => {
 
   return (
     <LibraryProvider
+      /** We need to pass the collectionId as key to the LibraryProvider to force a re-render
+      * when we navigate to a collection page. */
       key={collectionId}
       libraryId={libraryId}
       collectionId={collectionId}
@@ -36,19 +38,20 @@ const LibraryLayout = () => {
        * Sidebar > AddContentContainer > ComponentPicker */
       componentPicker={ComponentPicker}
     >
-      <Routes>
-        <Route
-          path="collection/:collectionId"
-          element={<LibraryCollectionPage />}
-        />
-        <Route
-          path="*"
-          element={<LibraryAuthoringPage />}
-        />
-      </Routes>
-      <CreateCollectionModal />
-      <ComponentEditorModal />
-      <LibraryTeamModal />
+      <SidebarProvider>
+        <Routes>
+          <Route
+            path="collection/:collectionId"
+            element={<LibraryCollectionPage />}
+          />
+          <Route
+            path="*"
+            element={<LibraryAuthoringPage />}
+          />
+        </Routes>
+        <CreateCollectionModal />
+        <ComponentEditorModal />
+      </SidebarProvider>
     </LibraryProvider>
   );
 };

src/library-authoring/add-content/AddContentContainer.test.tsx

@@ -12,7 +12,7 @@ import {
   getContentLibraryApiUrl, getCreateLibraryBlockUrl, getLibraryCollectionComponentApiUrl, getLibraryPasteClipboardUrl,
 } from '../data/api';
 import { mockBroadcastChannel, mockClipboardEmpty, mockClipboardHtml } from '../../generic/data/api.mock';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
 import AddContentContainer from './AddContentContainer';
 import { ComponentEditorModal } from '../components/ComponentEditorModal';
 import editorCmsApi from '../../editors/data/services/cms/api';

src/library-authoring/add-content/AddContentContainer.tsx

@@ -25,7 +25,7 @@ import { ToastContext } from '../../generic/toast-context';
 import { useCopyToClipboard } from '../../generic/clipboard';
 import { getCanEdit } from '../../course-unit/data/selectors';
 import { useCreateLibraryBlock, useLibraryPasteClipboard, useAddComponentsToCollection } from '../data/apiHooks';
-import { useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
 import { canEditComponent } from '../components/ComponentEditorModal';
 import { PickLibraryContentModal } from './PickLibraryContentModal';
 

src/library-authoring/add-content/PickLibraryContentModal.test.tsx

@@ -9,7 +9,7 @@ import {
 import { studioHomeMock } from '../../studio-home/__mocks__';
 import { getStudioHomeApiUrl } from '../../studio-home/data/api';
 import mockResult from '../__mocks__/library-search.json';
-import { LibraryProvider } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
 import { ComponentPicker } from '../component-picker';
 import * as api from '../data/api';
 import {

src/library-authoring/add-content/PickLibraryContentModal.tsx

@@ -3,7 +3,8 @@ import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { ActionRow, Button, StandardModal } from '@openedx/paragon';
 
 import { ToastContext } from '../../generic/toast-context';
-import { type SelectedComponent, useLibraryContext } from '../common/context';
+import { useLibraryContext } from '../common/context/LibraryContext';
+import type { SelectedComponent } from '../common/context/ComponentPickerContext';
 import { useAddComponentsToCollection } from '../data/apiHooks';
 import messages from './messages';
 

src/library-authoring/collections/CollectionDetails.test.tsx

@@ -10,7 +10,8 @@ import {
   waitFor,
   within,
 } from '../../testUtils';
-import { LibraryProvider, SidebarBodyComponentId } from '../common/context';
+import { LibraryProvider } from '../common/context/LibraryContext';
+import { SidebarBodyComponentId, SidebarProvider } from '../common/context/SidebarContext';
 import * as api from '../data/api';
 import { mockContentLibrary, mockGetCollectionMetadata } from '../data/api.mocks';
 import CollectionDetails from './CollectionDetails';
@@ -30,14 +31,15 @@ const library = mockContentLibrary.libraryData;
 
 const render = () => baseRender(<CollectionDetails />, {
   extraWrapper: ({ children }) => (
-    <LibraryProvider
-      libraryId={library.id}
-      initialSidebarComponentInfo={{
-        id: collectionId,
-        type: SidebarBodyComponentId.CollectionInfo,
-      }}
-    >
-      { children }
+    <LibraryProvider libraryId={library.id}>
+      <SidebarProvider
+        initialSidebarComponentInfo={{
+          id: collectionId,
+          type: SidebarBodyComponentId.CollectionInfo,
+        }}
+      >
+        { children }
+      </SidebarProvider>
     </LibraryProvider>
   ),
 });