From 70ad940941500bc8f4e3807bf45125affca4f6e3 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Sun, 17 May 2020 22:18:25 -0400 Subject: [PATCH] Using appContext in DataSourceWrapper and createRoutes --- platform/viewer/src/App.jsx | 30 +++++++------------ platform/viewer/src/appInit.js | 5 ++++ platform/viewer/src/hooks/useAppConfig.js | 10 +++---- .../viewer/src/routes/DataSourceWrapper.jsx | 6 ++-- platform/viewer/src/routes/index.js | 10 +++---- .../viewer/src/state/appConfig.context.jsx | 4 +-- 6 files changed, 31 insertions(+), 34 deletions(-) diff --git a/platform/viewer/src/App.jsx b/platform/viewer/src/App.jsx index 6b2007bf1..722c6c035 100644 --- a/platform/viewer/src/App.jsx +++ b/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? - // See: `setConfiguration` in master - const appConfigImp = useAppConfig(); - console.log('appConfigImp: ', appConfigImp); + // Set appConfig + const appConfigContextApi = useAppConfig(init.appConfig); + const { routerBasename, modes, dataSources } = appConfigContextApi.appConfig; + // Use config to create routes + const appRoutes = createAppRoutes(modes, dataSources, extensionManager); return ( - - - - {createRoutes( - appConfig.modes, - appConfig.dataSources, - extensionManager, - appConfig, - appConfigImp - )} - + + + {appRoutes} ); @@ -92,4 +84,4 @@ App.defaultProps = { export default App; -export { appConfig, commandsManager, extensionManager, servicesManager }; +export { commandsManager, extensionManager, servicesManager }; diff --git a/platform/viewer/src/appInit.js b/platform/viewer/src/appInit.js index 735e2b966..6ccf8feac 100644 --- a/platform/viewer/src/appInit.js +++ b/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, diff --git a/platform/viewer/src/hooks/useAppConfig.js b/platform/viewer/src/hooks/useAppConfig.js index 592dac732..bf50e040e 100644 --- a/platform/viewer/src/hooks/useAppConfig.js +++ b/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 => { - setConfig(updatedConfig); + const setCurrentAppConfig = useCallback(updatedConfig => { + setAppConfig(updatedConfig); }, []); return { - config, - setCurrentConfig, + appConfig, + setCurrentAppConfig, }; }; diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx index 9214e69b6..b9eb57844 100644 --- a/platform/viewer/src/routes/DataSourceWrapper.jsx +++ b/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); diff --git a/platform/viewer/src/routes/index.js b/platform/viewer/src/routes/index.js index 9fe188fa4..9df177fa5 100644 --- a/platform/viewer/src/routes/index.js +++ b/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) => { - console.log('Creating Routes: ', routes, bakedInRoutes); - console.log(modes, dataSources, extensionManager, t, t2); - if (!modes.length) { - modes.push(window.exampleMode); - } +const createRoutes = (modes, dataSources, extensionManager) => { 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 ( {allRoutes.map((route, i) => { diff --git a/platform/viewer/src/state/appConfig.context.jsx b/platform/viewer/src/state/appConfig.context.jsx index 067af72e7..da4b18ece 100644 --- a/platform/viewer/src/state/appConfig.context.jsx +++ b/platform/viewer/src/state/appConfig.context.jsx @@ -1,8 +1,8 @@ import { createContext } from 'react'; export const APP_CONFIG_DEFAULT_VALUE = { - config: {}, - setCurrentConfig: () => {}, + appConfig: {}, + setCurrentAppConfig: () => {}, }; export const appConfigContext = createContext(APP_CONFIG_DEFAULT_VALUE);