Create a DataSourceWrapper to determine correct data source and provide data to layout component

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -0,0 +1,32 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React from 'react';
+import PropTypes from 'prop-types';
+//
+import { extensionManager } from '../App.js';
+
+/**
+ * Uses route properties to determine the data source that should be passed
+ * to the child layout template. In some instances, initiates requests and
+ * passes data as props.
+ *
+ * @param {object} props
+ * @param {function} props.children - Layout Template React Component
+ */
+function DataSourceWrapper(props) {
+  const { children: LayoutTemplate, ...rest } = props;
+  console.log('data source wrapper', props);
+  console.log(extensionManager);
+
+  return (
+    <React.Fragment>
+      <LayoutTemplate {...rest} />
+    </React.Fragment>
+  );
+}
+
+DataSourceWrapper.propTypes = {
+  /** Layout Component to wrap with a Data Source */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired,
+};
+
+export default DataSourceWrapper;

platform/viewer/src/routes/index.js

@@ -2,16 +2,23 @@ import React from 'react';
 import { Switch, Route } from 'react-router-dom';
 
 // Route Components
+import DataSourceWrapper from './DataSourceWrapper';
 import StudyListContainer from './StudyListContainer';
 import NotFound from './NotFound';
 
 const bakedInRoutes = [
-  { path: '/', exact: true, component: StudyListContainer },
+  {
+    path: '/',
+    exact: true,
+    component: DataSourceWrapper,
+    props: { children: StudyListContainer },
+  },
   { component: NotFound },
 ];
 
 const createRoutes = routes => {
   console.log('Creating Routes: ', routes, bakedInRoutes);
+  // TODO: Shouldn't need to guard input routes with an empty array?
   const allRoutes = [...(routes || []), ...bakedInRoutes];
 
   return (
@@ -23,8 +30,10 @@ const createRoutes = routes => {
             path={route.path}
             exact={route.exact}
             strict={route.strict}
-            // eslint-disable-next-line react/jsx-props-no-spreading
+            render={props => (
-            render={props => <route.component {...props} route={route} />}
+              // eslint-disable-next-line react/jsx-props-no-spreading
+              <route.component {...props} {...route.props} route={route} />
+            )}
           />
         );
       })}