Using appContext in DataSourceWrapper and createRoutes

platform/viewer/src/App.jsx

@@ -7,7 +7,7 @@ import { ThemeWrapper } from '@ohif/ui';
 // TODO: Should this influence study list?
 import { appConfigContext } from './state/appConfig.context';
 import { useAppConfig } from './hooks/useAppConfig';
-import createRoutes from './routes';
+import createAppRoutes from './routes';
 import appInit from './appInit.js';
 
 // Temporarily for testing
@@ -20,34 +20,26 @@ const Router = JSON.parse(process.env.USE_HASH_ROUTER)
   ? HashRouter
   : BrowserRouter;
 
-let appConfig, commandsManager, extensionManager, servicesManager;
+let commandsManager, extensionManager, servicesManager;
 
 function App({ config, defaultExtensions }) {
   const init = appInit(config, defaultExtensions);
 
   // Set above for named export
-  appConfig = init.appConfig;
   commandsManager = init.commandsManager;
   extensionManager = init.extensionManager;
   servicesManager = init.servicesManager;
 
-  // TODO: Expose configuration w/ context?
+  // Set appConfig
-  // See: `setConfiguration` in master
+  const appConfigContextApi = useAppConfig(init.appConfig);
-  const appConfigImp = useAppConfig();
+  const { routerBasename, modes, dataSources } = appConfigContextApi.appConfig;
-  console.log('appConfigImp: ', appConfigImp);
+  // Use config to create routes
+  const appRoutes = createAppRoutes(modes, dataSources, extensionManager);
 
   return (
-    <appConfigContext.Provider value={appConfigImp}>
+    <appConfigContext.Provider value={appConfigContextApi}>
-      <Router basename={appConfig.routerBasename}>
+      <Router basename={routerBasename}>
-        <ThemeWrapper>
+        <ThemeWrapper>{appRoutes}</ThemeWrapper>
-          {createRoutes(
-            appConfig.modes,
-            appConfig.dataSources,
-            extensionManager,
-            appConfig,
-            appConfigImp
-          )}
-        </ThemeWrapper>
       </Router>
     </appConfigContext.Provider>
   );
@@ -92,4 +84,4 @@ App.defaultProps = {
 
 export default App;
 
-export { appConfig, commandsManager, extensionManager, servicesManager };
+export { commandsManager, extensionManager, servicesManager };

platform/viewer/src/appInit.js

@@ -59,6 +59,11 @@ function appInit(appConfigOrFunc, defaultExtensions) {
   // TODO: We no longer init webWorkers at app level
   // TODO: We no longer init the user Manager
 
+  // TODO: Remove this
+  if (!appConfig.modes.length) {
+    appConfig.modes.push(window.exampleMode);
+  }
+
   return {
     appConfig,
     commandsManager,

platform/viewer/src/hooks/useAppConfig.js

@@ -4,14 +4,14 @@ import { useCallback, useState } from 'react';
  * Implements the state/methods defined in `appConfig.context`.
  */
 export const useAppConfig = initialValue => {
-  const [config, setConfig] = useState(initialValue || {});
+  const [appConfig, setAppConfig] = useState(initialValue || {});
 
-  const setCurrentConfig = useCallback(updatedConfig => {
+  const setCurrentAppConfig = useCallback(updatedConfig => {
-    setConfig(updatedConfig);
+    setAppConfig(updatedConfig);
   }, []);
 
   return {
-    config,
+    appConfig,
-    setCurrentConfig,
+    setCurrentAppConfig,
   };
 };

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -1,9 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { MODULE_TYPES } from '@ohif/core';
 //
-import { appConfig, extensionManager } from '../App.jsx';
+import { appConfigContext } from '../state/appConfig.context';
+import { extensionManager } from '../App.jsx';
 
 /**
  * Uses route properties to determine the data source that should be passed
@@ -14,6 +15,7 @@ import { appConfig, extensionManager } from '../App.jsx';
  * @param {function} props.children - Layout Template React Component
  */
 function DataSourceWrapper(props) {
+  const { appConfig } = useContext(appConfigContext);
   const { children: LayoutTemplate, history, ...rest } = props;
   const queryFilterValues = _getQueryFilterValues(history.location.search);
 

platform/viewer/src/routes/index.js

@@ -7,6 +7,7 @@ import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 
 // TODO: Make these configurable
+// TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
   // WORK LIST
   {
@@ -19,16 +20,13 @@ const bakedInRoutes = [
   { component: NotFound },
 ];
 
-const createRoutes = (modes, dataSources, extensionManager, t, t2) => {
+const createRoutes = (modes, dataSources, extensionManager) => {
-  console.log('Creating Routes: ', routes, bakedInRoutes);
-  console.log(modes, dataSources, extensionManager, t, t2);
-  if (!modes.length) {
-    modes.push(window.exampleMode);
-  }
   const routes = buildModeRoutes(modes, dataSources, extensionManager) || [];
   // TODO: Shouldn't need to guard input routes with an empty array?
   const allRoutes = [...(routes || []), ...bakedInRoutes];
 
+  console.log('Creating Routes: ', modes, dataSources, routes, bakedInRoutes, allRoutes);
+
   return (
     <Switch>
       {allRoutes.map((route, i) => {

platform/viewer/src/state/appConfig.context.jsx

@@ -1,8 +1,8 @@
 import { createContext } from 'react';
 
 export const APP_CONFIG_DEFAULT_VALUE = {
-  config: {},
+  appConfig: {},
-  setCurrentConfig: () => {},
+  setCurrentAppConfig: () => {},
 };
 
 export const appConfigContext = createContext(APP_CONFIG_DEFAULT_VALUE);