Hydrate our first data source

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MODULE_TYPES } from '@ohif/core';
 //
-import { extensionManager } from '../App.js';
+import { appConfig, extensionManager } from '../App.js';
 
 /**
  * Uses route properties to determine the data source that should be passed
@@ -14,8 +15,39 @@ import { extensionManager } from '../App.js';
  */
 function DataSourceWrapper(props) {
   const { children: LayoutTemplate, ...rest } = props;
-  console.log('data source wrapper', props);
-  console.log(extensionManager);
+  // TODO: Fetch by type, name, etc?
+  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE];
+  // TODO: Good usecase for flatmap?
+  const webApiDataSources = dataSourceModules.reduce((acc, curr) => {
+    const mods = [];
+    curr.module.forEach(mod => {
+      if (mod.type === 'webApi') {
+        mods.push(mod);
+      }
+    });
+    return acc.concat(mods);
+  }, []);
+
+  // Grabbing first for now. This isn't hydrated yet, but we should
+  // hydrate it somewhere based on config...
+  // ~ default.js
+  const firstAppConfigDataSource = appConfig.dataSources[0];
+  const dataSourceConfig = firstAppConfigDataSource.configuration;
+  const firstWebApiDataSource = webApiDataSources[0];
+  const dataSource = firstWebApiDataSource.createDataSource(dataSourceConfig);
+
+  console.log(dataSource, 'dsm');
+
+  // Route props --> studies.mapParams
+  // mapParams --> studies.search
+  // studies.search --> studies.processResults
+  // studies.processResults --> <LayoutTemplate studies={} />
+  // But only for LayoutTemplate type of 'list'?
+  // Or no data fetching here, and just hand down my source
+
+  // const studies = dataSource.query.studies.search();
+
+  // console.log(studies);
 
   return (
     <React.Fragment>