Use context to pass the windowId prop around

Author: cbeer

__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' },
   );
 }
 

__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' },
   );
 }
 

__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,8 +29,7 @@ describe('PrimaryWindow', () => {
   });
   it('should render <GalleryView> if fetching is complete and view is gallery', async () => {
     createWrapper({ isFetching: false, view: 'gallery' });
-    await screen.findByRole('region', { accessibleName: 'gallery section' });
-    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" />);
@@ -40,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' });
   });

__tests__/src/components/SearchResults.test.js

@@ -64,6 +64,7 @@ function createWrapper(props) {
           window: {},
         },
       },
+      windowId: 'window',
     },
   );
 }

__tests__/src/components/WindowSideBar.test.js

@@ -7,7 +7,6 @@ function createWrapper({ ...props }) {
     <WindowSideBar
       classes={{ drawer: 'test-drawer' }}
       t={k => k}
-      windowId="xyz"
       {...props}
     />,
     {
@@ -19,6 +18,7 @@ function createWrapper({ ...props }) {
           },
         },
       },
+      windowId: 'xyz',
     },
   );
 }

__tests__/src/components/WindowSideBarAnnotationsPanel.test.js

@@ -12,10 +12,9 @@ function createWrapper(props, state) {
       classes={{}}
       id="xyz"
       t={i18next.t}
-      windowId="abc"
       {...props}
     />,
-    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state } },
+    { preloadedState: { companionWindows: { xyz: { content: 'annotations' } }, windows: { abc: {} }, ...state }, windowId: 'abc' },
   );
 }
 

__tests__/utils/test-utils.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { createStore, applyMiddleware } from 'redux';
 import thunkMiddleware from 'redux-thunk';
 import createRootReducer from '../../src/state/reducers/rootReducer';
+import WindowContext from '../../src/contexts/WindowContext';
 
 const rootReducer = createRootReducer();
 
@@ -16,12 +17,19 @@ function renderWithProviders(
     preloadedState = {},
     // Automatically create a store instance if no store was passed in
     store = createStore(rootReducer, preloadedState, applyMiddleware(thunkMiddleware)),
+    windowId,
     ...renderOptions
   } = {},
 ) {
+  const windowContext = windowId ? { id: windowId } : {};
+
   /** :nodoc: */
   function Wrapper({ children }) {
-    return <Provider store={store}>{children}</Provider>;
+    return (
+      <WindowContext.Provider value={windowContext}>
+        <Provider store={store}>{children}</Provider>
+      </WindowContext.Provider>
+    );
   }
 
   Wrapper.propTypes = {

src/components/AnnotationSettings.js

@@ -35,5 +35,4 @@ AnnotationSettings.propTypes = {
   displayAllDisabled: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
   toggleAnnotationDisplay: PropTypes.func.isRequired,
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
 };

src/components/AttributionPanel.js

@@ -22,7 +22,6 @@ export class AttributionPanel extends Component {
       manifestLogo,
       requiredStatement,
       rights,
-      windowId,
       id,
       classes,
       t,
@@ -32,7 +31,6 @@ export class AttributionPanel extends Component {
       <CompanionWindow
         title={t('attributionTitle')}
         paperClassName={ns('attribution-panel')}
-        windowId={windowId}
         id={id}
       >
         <div className={classes.section}>
@@ -85,7 +83,6 @@ AttributionPanel.propTypes = {
   })),
   rights: PropTypes.arrayOf(PropTypes.string),
   t: PropTypes.func,
-  windowId: PropTypes.string.isRequired,
 };
 
 AttributionPanel.defaultProps = {

src/components/CompanionArea.js

@@ -61,7 +61,7 @@ export class CompanionArea extends Component {
           <div className={[ns('companion-windows'), companionWindowIds.length > 0 && classes[position], this.areaLayoutClass()].join(' ')} style={{ display: companionAreaOpen ? 'flex' : 'none' }}>
             {
               companionWindowIds.map(id => (
-                <CompanionWindowFactory id={id} key={id} windowId={windowId} />
+                <CompanionWindowFactory id={id} key={id} />
               ))
             }
           </div>