Use context to pass the windowId prop around

ProjectMirador · Dec 17, 2024 · 472c27b · 472c27b
1 parent 41e2a86
commit 472c27b
Show file tree

Hide file tree

Showing 87 changed files with 271 additions and 159 deletions.
diff --git a/__tests__/src/components/CompanionWindowFactory.test.js b/__tests__/src/components/CompanionWindowFactory.test.js
@@ -6,12 +6,11 @@ import { CompanionWindowFactory } from '../../../src/components/CompanionWindowF
 function createWrapper({ content = 'closed', ...props }) {
   return render(
     <CompanionWindowFactory
-      windowId="x"
       id="123"
       content={content}
       {...props}
     />,
-    { preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } } },
+    { preloadedState: { companionWindows: { 123: { content }, thumb: {} }, windows: { x: { thumbnailNavigationId: 'thumb' } } }, windowId: 'x' },
   );
 }
 

diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js
@@ -9,10 +9,10 @@ function createWrapper(props) {
   return render(
     <GalleryView
       canvases={Utils.parseManifest(manifestJson).getSequences()[0].getCanvases()}
-      windowId="1234"
       selectedCanvasIndex={0}
       {...props}
     />,
+    { windowId: '1234' },
   );
 }
 

diff --git a/__tests__/src/components/PrimaryWindow.test.js b/__tests__/src/components/PrimaryWindow.test.js
@@ -6,10 +6,9 @@ function createWrapper(props) {
   return render(
     <PrimaryWindow
       classes={{}}
-      windowId="xyz"
       {...props}
     />,
-    { preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } } },
+    { preloadedState: { windows: { xyz: { collectionPath: [{}], companionWindowIds: [] } } }, windowId: 'xyz' },
   );
 }
 
@@ -30,10 +29,7 @@ describe('PrimaryWindow', () => {
   });
   it('should render <GalleryView> if fetching is complete and view is gallery', async () => {
     createWrapper({ isFetching: false, view: 'gallery' });
-    await screen.findByTestId('test-window');
-    await waitFor(() => {
-      expect(document.querySelector('#xyz-gallery')).toBeInTheDocument(); // eslint-disable-line testing-library/no-node-access
-    });
+    expect(await screen.findByRole('region', { accessibleName: 'gallery section' })).toBeInTheDocument();
   });
   it('should render <CollectionDialog> and <SelectCollection> if manifest is collection and isCollectionDialogVisible', async () => {
     render(<div id="xyz" />);
@@ -42,9 +38,8 @@ describe('PrimaryWindow', () => {
         classes={{}}
         isCollection
         isCollectionDialogVisible
-        windowId="xyz"
       />,
-      { preloadedState: { windows: { xyz: { collectionPath: [{}] } } } },
+      { preloadedState: { windows: { xyz: { collectionPath: [{}] } } }, windowId: 'xyz' },
     );
     await screen.findByRole('button', { accessibleName: 'show collection' });
   });

diff --git a/__tests__/src/components/SearchResults.test.js b/__tests__/src/components/SearchResults.test.js
@@ -64,6 +64,7 @@ function createWrapper(props) {
           window: {},
         },
       },
+      windowId: 'window',
     },
   );
 }

diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js
@@ -5,7 +5,6 @@ import { WindowSideBar } from '../../../src/components/WindowSideBar';
 function createWrapper({ ...props }) {
   return render(
     <WindowSideBar
-      windowId="xyz"
       {...props}
     />,
     {
@@ -17,6 +16,7 @@ function createWrapper({ ...props }) {
           },
         },
       },
+      windowId: 'xyz',
     },
   );
 }

diff --git a/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js b/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js
@@ -9,10 +9,9 @@ function createWrapper(props, state) {
       annotationCount={4}
       classes={{}}
       id="xyz"
-      windowId="abc"
       {...props}
     />,
-    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state } },
+    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state }, windowId: 'abc' },
   );
 }
 

diff --git a/__tests__/utils/test-utils.js b/__tests__/utils/test-utils.js
@@ -8,6 +8,7 @@ import { I18nextProvider } from 'react-i18next';
 import createRootReducer from '../../src/state/reducers/rootReducer';
 import settings from '../../src/config/settings';
 import createI18nInstance from '../../src/i18n';
+import WindowContext from '../../src/contexts/WindowContext';
 
 /** Mirador viewer setup for Integration tests */
 import Mirador from '../../src/index';
@@ -29,19 +30,24 @@ function renderWithProviders(
     preloadedState = {},
     // Automatically create a store instance if no store was passed in
     store = createStore(rootReducer, preloadedState, applyMiddleware(thunk)),
+    windowId,
     ...renderOptions
   } = {},
 ) {
+  const windowContext = windowId ? { id: windowId } : {};
+
   /** :nodoc: */
   function Wrapper({ children }) {
     return (
-      <I18nextProvider i18n={i18n}>
-        <ThemeProvider theme={theme}>
-          <Provider store={store}>
-            {children}
-          </Provider>
-        </ThemeProvider>
-      </I18nextProvider>
+      <WindowContext.Provider value={windowContext}>
+        <I18nextProvider i18n={i18n}>
+          <ThemeProvider theme={theme}>
+            <Provider store={store}>
+              {children}
+            </Provider>
+          </ThemeProvider>
+        </I18nextProvider>
+      </WindowContext.Provider>
     );
   }
 

diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js
@@ -28,5 +28,4 @@ AnnotationSettings.propTypes = {
   displayAll: PropTypes.bool.isRequired,
   displayAllDisabled: PropTypes.bool.isRequired,
   toggleAnnotationDisplay: PropTypes.func.isRequired,
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };
diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js
@@ -26,7 +26,6 @@ export function AttributionPanel({
   manifestLogo = null,
   requiredStatement = null,
   rights = null,
-  windowId,
   id,
 }) {
   const { t } = useTranslation();
@@ -37,7 +36,6 @@ export function AttributionPanel({
     <CompanionWindow
       title={t('attributionTitle')}
       paperClassName={ns('attribution-panel')}
-      windowId={windowId}
       id={id}
     >
       <CompanionWindowSection>
@@ -86,5 +84,4 @@ AttributionPanel.propTypes = {
     value: PropTypes.string,
   })),
   rights: PropTypes.arrayOf(PropTypes.string),
-  windowId: PropTypes.string.isRequired,
 };
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
@@ -97,7 +97,7 @@ export function CompanionArea({
           className={`${ns('companion-windows')}`}
         >
           {companionWindowIds.map((id) => (
-            <CompanionWindowFactory id={id} key={id} windowId={windowId} />
+            <CompanionWindowFactory id={id} key={id} />
           ))}
         </Container>
       </Slide>

diff --git a/src/components/CompanionWindowFactory.js b/src/components/CompanionWindowFactory.js
@@ -10,32 +10,30 @@ import ErrorContent from '../containers/ErrorContent';
  * Render a companion window using the appropriate component for the content
  */
 export function CompanionWindowFactory({
-  content = null, id, windowId,
+  content = null, id,
 }) {
   const { t } = useTranslation();
   const ErroredCompanionWindow = useCallback(({ error }) => (
     <CompanionWindow
       title={t('error')}
-      windowId={windowId}
       id={id}
     >
-      <ErrorContent error={error} windowId={windowId} companionWindowId={id} />
+      <ErrorContent error={error} companionWindowId={id} />
     </CompanionWindow>
-  ), [windowId, t, id]);
+  ), [t, id]);
 
   const DynamicCompanionWindowType = CompanionWindowRegistry[content];
 
   if (!DynamicCompanionWindowType) return null;
 
   return (
     <ErrorBoundary fallbackComponent={ErroredCompanionWindow}>
-      <DynamicCompanionWindowType id={id} windowId={windowId} />
+      <DynamicCompanionWindowType id={id} />
     </ErrorBoundary>
   );
 }
 
 CompanionWindowFactory.propTypes = {
   content: PropTypes.string,
   id: PropTypes.string.isRequired,
-  windowId: PropTypes.string.isRequired,
 };
diff --git a/src/components/CustomPanel.js b/src/components/CustomPanel.js
@@ -6,14 +6,13 @@ import CompanionWindow from '../containers/CompanionWindow';
  * a custom panel that can be used for anything
  */
 export function CustomPanel({
-  id, children = null, title, windowId,
+  id, children = null, title,
 }) {
   const { t } = useTranslation();
   return (
     <CompanionWindow
       title={t(title)}
       id={id}
-      windowId={windowId}
     >
       {children}
     </CompanionWindow>
@@ -24,5 +23,4 @@ CustomPanel.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string.isRequired,
   title: PropTypes.string.isRequired,
-  windowId: PropTypes.string.isRequired,
 };
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
@@ -17,7 +17,7 @@ const Root = styled(Paper, { name: 'GalleryView', slot: 'root' })(({ theme }) =>
 /**
  * Renders a GalleryView overview of the manifest.
  */
-export function GalleryView({ canvases, viewingDirection = '', windowId }) {
+export function GalleryView({ canvases, viewingDirection = '' }) {
   const htmlDir = viewingDirection === 'right-to-left' ? 'rtl' : 'ltr';
   return (
     <Root
@@ -26,13 +26,11 @@ export function GalleryView({ canvases, viewingDirection = '', windowId }) {
       dir={htmlDir}
       square
       elevation={0}
-      id={`${windowId}-gallery`}
     >
       {
         canvases.map(canvas => (
           <GalleryViewThumbnail
             key={canvas.id}
-            windowId={windowId}
             canvas={canvas}
           />
         ))
@@ -44,5 +42,4 @@ export function GalleryView({ canvases, viewingDirection = '', windowId }) {
 GalleryView.propTypes = {
   canvases: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   viewingDirection: PropTypes.string,
-  windowId: PropTypes.string.isRequired,
 };
diff --git a/src/components/IIIFAuthentication.js b/src/components/IIIFAuthentication.js
@@ -26,7 +26,6 @@ export function IIIFAuthentication({
     authServiceId,
     hasLogoutService: !!logoutServiceId,
     status,
-    windowId,
   });
 
   /** handle the IIIF logout workflow */

diff --git a/src/components/LayersPanel.js b/src/components/LayersPanel.js
@@ -7,22 +7,20 @@ import CanvasLayers from '../containers/CanvasLayers';
  * a panel showing the canvases for a given manifest
  */
 export function LayersPanel({
-  canvasIds = [], id, windowId,
+  canvasIds = [], id,
 }) {
   const { t } = useTranslation();
   return (
     <CompanionWindow
       title={t('layers')}
       id={id}
-      windowId={windowId}
     >
       {canvasIds.map((canvasId, index) => (
         <CanvasLayers
           canvasId={canvasId}
           index={index}
           key={canvasId}
           totalSize={canvasIds.length}
-          windowId={windowId}
         />
       ))}
     </CompanionWindow>
@@ -32,5 +30,4 @@ export function LayersPanel({
 LayersPanel.propTypes = {
   canvasIds: PropTypes.arrayOf(PropTypes.string),
   id: PropTypes.string.isRequired,
-  windowId: PropTypes.string.isRequired,
 };
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
@@ -135,7 +135,7 @@ export function OpenSeadragonViewer({
         );
       })}
       { drawAnnotations
-          && <AnnotationsOverlay viewer={viewer} windowId={windowId} /> }
+          && <AnnotationsOverlay viewer={viewer} /> }
       { enhancedChildren }
       <PluginHook viewer={viewer} {...pluginProps} />
     </OpenSeadragonComponent>

diff --git a/src/components/PrimaryWindow.js b/src/components/PrimaryWindow.js
@@ -26,41 +26,31 @@ const Root = styled('div', { name: 'PrimaryWindow', slot: 'root' })(() => ({
 /**  */
 const TypeSpecificViewer = ({
   audioResources = [], isCollection = false,
-  isFetching = false, videoResources = [], view = undefined, windowId,
+  isFetching = false, videoResources = [], view = undefined,
 }) => {
   if (isCollection) {
     return (
-      <SelectCollection
-        windowId={windowId}
-      />
+      <SelectCollection />
     );
   }
   if (isFetching === false) {
     if (view === 'gallery') {
       return (
-        <GalleryView
-          windowId={windowId}
-        />
+        <GalleryView />
       );
     }
     if (videoResources.length > 0) {
       return (
-        <VideoViewer
-          windowId={windowId}
-        />
+        <VideoViewer />
       );
     }
     if (audioResources.length > 0) {
       return (
-        <AudioViewer
-          windowId={windowId}
-        />
+        <AudioViewer />
       );
     }
     return (
-      <WindowViewer
-        windowId={windowId}
-      />
+      <WindowViewer />
     );
   }
   return null;
@@ -72,7 +62,6 @@ TypeSpecificViewer.propTypes = {
   isFetching: PropTypes.bool,
   videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   view: PropTypes.string,
-  windowId: PropTypes.string.isRequired,
 };
 
 /**
@@ -81,22 +70,21 @@ TypeSpecificViewer.propTypes = {
  */
 export function PrimaryWindow({
   audioResources = undefined, isCollection = false, isFetching = false, videoResources = undefined,
-  view = undefined, windowId, isCollectionDialogVisible = false, children = null, className = undefined,
+  view = undefined, isCollectionDialogVisible = false, children = null, className = undefined,
 }) {
   const viewerProps = {
     audioResources,
     isCollection,
     isFetching,
     videoResources,
     view,
-    windowId,
   };
 
   return (
     <Root data-testid="test-window" className={classNames(ns('primary-window'), className)}>
-      <WindowSideBar windowId={windowId} />
-      <CompanionArea windowId={windowId} position="left" />
-      { isCollectionDialogVisible && <CollectionDialog windowId={windowId} /> }
+      <WindowSideBar />
+      <CompanionArea position="left" />
+      { isCollectionDialogVisible && <CollectionDialog /> }
       <Suspense fallback={<div />}>
         {children || <TypeSpecificViewer {...viewerProps} />}
       </Suspense>
@@ -113,5 +101,4 @@ PrimaryWindow.propTypes = {
   isFetching: PropTypes.bool,
   videoResources: PropTypes.arrayOf(PropTypes.object), // eslint-disable-line react/forbid-prop-types
   view: PropTypes.string,
-  windowId: PropTypes.string.isRequired,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,6 +64,7 @@ function createWrapper(props) { @@
               window: {},
             },
           },
+          windowId: 'window',
         },
       );
     }
@@ Expand Down @@