From a99badd01154ff758f532f581f1ecf09de9fc8e4 Mon Sep 17 00:00:00 2001 From: dannyrb Date: Sun, 17 May 2020 21:42:38 -0400 Subject: [PATCH] Centralize route generation to a single place --- platform/viewer/src/{App.js => App.jsx} | 25 ++++++++++++++----- platform/viewer/src/appInit.js | 15 ----------- .../ViewportGrid/ConnectedViewportGrid.js | 2 +- .../connectedComponents/ToolContextMenu.js | 2 +- .../src/connectedComponents/ToolbarRow.js | 2 +- .../viewer/src/connectedComponents/Viewer.js | 2 +- .../ViewerLocalFileData.js | 2 +- .../ViewerRetrieveStudyData.js | 2 +- .../src/googleCloud/DicomStorePickerModal.js | 2 +- platform/viewer/src/hooks/useAppConfig.js | 17 +++++++++++++ platform/viewer/src/index-umd.js | 2 +- platform/viewer/src/index.js | 2 +- .../viewer/src/routes/DataSourceWrapper.jsx | 2 +- platform/viewer/src/routes/ModeRoute.js | 2 +- platform/viewer/src/routes/index.js | 12 +++++++-- 15 files changed, 57 insertions(+), 34 deletions(-) rename platform/viewer/src/{App.js => App.jsx} (74%) create mode 100644 platform/viewer/src/hooks/useAppConfig.js diff --git a/platform/viewer/src/App.js b/platform/viewer/src/App.jsx similarity index 74% rename from platform/viewer/src/App.js rename to platform/viewer/src/App.jsx index ded9372ae..6b2007bf1 100644 --- a/platform/viewer/src/App.js +++ b/platform/viewer/src/App.jsx @@ -5,7 +5,8 @@ import { BrowserRouter, HashRouter } from 'react-router-dom'; import { ThemeWrapper } from '@ohif/ui'; // Viewer Project // TODO: Should this influence study list? -// import AppContextProvider from './contexts/AppContextProvider.js'; +import { appConfigContext } from './state/appConfig.context'; +import { useAppConfig } from './hooks/useAppConfig'; import createRoutes from './routes'; import appInit from './appInit.js'; @@ -23,7 +24,6 @@ let appConfig, commandsManager, extensionManager, servicesManager; function App({ config, defaultExtensions }) { const init = appInit(config, defaultExtensions); - const { appRoutes } = init; // Set above for named export appConfig = init.appConfig; @@ -33,11 +33,23 @@ function App({ config, defaultExtensions }) { // TODO: Expose configuration w/ context? // See: `setConfiguration` in master + const appConfigImp = useAppConfig(); + console.log('appConfigImp: ', appConfigImp); return ( - - {createRoutes(appRoutes)} - + + + + {createRoutes( + appConfig.modes, + appConfig.dataSources, + extensionManager, + appConfig, + appConfigImp + )} + + + ); } @@ -53,7 +65,8 @@ App.propTypes = { extensions: PropTypes.array, }), ]).isRequired, - /* Extensions that are "bundled" or "baked-in" to the application */ + /* Extensions that are "bundled" or "baked-in" to the application. + * These would be provided at build time as part of they entry point. */ defaultExtensions: PropTypes.array, }; diff --git a/platform/viewer/src/appInit.js b/platform/viewer/src/appInit.js index 508c34dc7..735e2b966 100644 --- a/platform/viewer/src/appInit.js +++ b/platform/viewer/src/appInit.js @@ -11,8 +11,6 @@ import { // redux as reduxOHIF, } from '@ohif/core'; -import buildModeRoutes from './routes/buildModeRoutes'; - /** * @param {object|func} appConfigOrFunc - application configuration, or a function that returns application configuration * @param {object[]} defaultExtensions - array of extension objects @@ -61,24 +59,11 @@ function appInit(appConfigOrFunc, defaultExtensions) { // TODO: We no longer init webWorkers at app level // TODO: We no longer init the user Manager - // TODO: After extensions are registered, add modes and datasources to buildModeRoutes.js - - const { modes } = appConfig; - - // Temporarily for testing - if (!modes.length) { - modes.push(window.exampleMode); - } - - const appRoutes = - buildModeRoutes(modes, appConfig.dataSources, extensionManager) || []; - return { appConfig, commandsManager, extensionManager, servicesManager, - appRoutes, }; } diff --git a/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js b/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js index e423f1dd3..80ff5fa81 100644 --- a/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js +++ b/platform/viewer/src/components/ViewportGrid/ConnectedViewportGrid.js @@ -1,7 +1,7 @@ import ViewportGrid from './ViewportGrid.js'; import { MODULE_TYPES } from '@ohif/core'; import { connect } from 'react-redux'; -import { extensionManager } from './../../App.js'; +import { extensionManager } from './../../App.jsx'; import memoize from 'lodash/memoize'; const getAvailableViewportModules = memoize(viewportModules => { diff --git a/platform/viewer/src/connectedComponents/ToolContextMenu.js b/platform/viewer/src/connectedComponents/ToolContextMenu.js index b45bf3b50..13dc3aeca 100644 --- a/platform/viewer/src/connectedComponents/ToolContextMenu.js +++ b/platform/viewer/src/connectedComponents/ToolContextMenu.js @@ -1,7 +1,7 @@ import { ContextMenu } from '@ohif/ui'; import PropTypes from 'prop-types'; import React from 'react'; -import { commandsManager } from './../App.js'; +import { commandsManager } from './../App.jsx'; const toolTypes = [ 'Angle', diff --git a/platform/viewer/src/connectedComponents/ToolbarRow.js b/platform/viewer/src/connectedComponents/ToolbarRow.js index b03f778bc..3a9d7ad9e 100644 --- a/platform/viewer/src/connectedComponents/ToolbarRow.js +++ b/platform/viewer/src/connectedComponents/ToolbarRow.js @@ -12,7 +12,7 @@ import { } from '@ohif/ui'; import './ToolbarRow.css'; -import { commandsManager, extensionManager } from './../App.js'; +import { commandsManager, extensionManager } from './../App.jsx'; import ConnectedCineDialog from './ConnectedCineDialog'; import ConnectedLayoutButton from './ConnectedLayoutButton'; diff --git a/platform/viewer/src/connectedComponents/Viewer.js b/platform/viewer/src/connectedComponents/Viewer.js index 1410dd8f9..ee85b8b9b 100644 --- a/platform/viewer/src/connectedComponents/Viewer.js +++ b/platform/viewer/src/connectedComponents/Viewer.js @@ -11,7 +11,7 @@ import ToolbarRow from './ToolbarRow.js'; import ConnectedStudyBrowser from './ConnectedStudyBrowser.js'; import ConnectedViewerMain from './ConnectedViewerMain.js'; import SidePanel from './../components/SidePanel.js'; -import { extensionManager } from './../App.js'; +import { extensionManager } from './../App.jsx'; // Contexts import WhiteLabelingContext from '../context/WhiteLabelingContext.js'; diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js index c0e93d979..f2b6b116d 100644 --- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js +++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js @@ -3,7 +3,7 @@ import { metadata, utils } from '@ohif/core'; import ConnectedViewer from './ConnectedViewer.js'; import PropTypes from 'prop-types'; -import { extensionManager } from './../App.js'; +import { extensionManager } from './../App.jsx'; import Dropzone from 'react-dropzone'; import filesToStudies from '../lib/filesToStudies'; import './ViewerLocalFileData.css'; diff --git a/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js b/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js index cc4d91bc5..63fc55093 100644 --- a/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js +++ b/platform/viewer/src/connectedComponents/ViewerRetrieveStudyData.js @@ -4,7 +4,7 @@ import usePrevious from '../customHooks/usePrevious'; import ConnectedViewer from './ConnectedViewer.js'; import PropTypes from 'prop-types'; -import { extensionManager } from './../App.js'; +import { extensionManager } from './../App.jsx'; import { useSnackbarContext } from '@ohif/ui'; const { OHIFStudyMetadata, OHIFSeriesMetadata } = metadata; diff --git a/platform/viewer/src/googleCloud/DicomStorePickerModal.js b/platform/viewer/src/googleCloud/DicomStorePickerModal.js index 5cba3874b..eaa3e7ae1 100644 --- a/platform/viewer/src/googleCloud/DicomStorePickerModal.js +++ b/platform/viewer/src/googleCloud/DicomStorePickerModal.js @@ -5,7 +5,7 @@ import './googleCloud.css'; import { withTranslation } from 'react-i18next'; import * as GoogleCloudUtilServers from './utils/getServers'; -import { servicesManager } from './../App.js'; +import { servicesManager } from './../App.jsx'; function DicomStorePickerModal({ isOpen = false, diff --git a/platform/viewer/src/hooks/useAppConfig.js b/platform/viewer/src/hooks/useAppConfig.js new file mode 100644 index 000000000..592dac732 --- /dev/null +++ b/platform/viewer/src/hooks/useAppConfig.js @@ -0,0 +1,17 @@ +import { useCallback, useState } from 'react'; + +/** + * Implements the state/methods defined in `appConfig.context`. + */ +export const useAppConfig = initialValue => { + const [config, setConfig] = useState(initialValue || {}); + + const setCurrentConfig = useCallback(updatedConfig => { + setConfig(updatedConfig); + }, []); + + return { + config, + setCurrentConfig, + }; +}; diff --git a/platform/viewer/src/index-umd.js b/platform/viewer/src/index-umd.js index 34a7a9590..dd57bb3de 100644 --- a/platform/viewer/src/index-umd.js +++ b/platform/viewer/src/index-umd.js @@ -5,7 +5,7 @@ import 'regenerator-runtime/runtime'; import React from 'react'; import ReactDOM from 'react-dom'; -import App from './App.js'; +import App from './App.jsx'; function installViewer(config, containerId = 'root', callback) { const container = document.getElementById(containerId); diff --git a/platform/viewer/src/index.js b/platform/viewer/src/index.js index b390f600e..b3ad3934c 100644 --- a/platform/viewer/src/index.js +++ b/platform/viewer/src/index.js @@ -3,7 +3,7 @@ * Packaged (NPM) builds go through `index-umd.js` */ import 'regenerator-runtime/runtime'; -import App from './App.js'; +import App from './App.jsx'; import React from 'react'; import ReactDOM from 'react-dom'; // test diff --git a/platform/viewer/src/routes/DataSourceWrapper.jsx b/platform/viewer/src/routes/DataSourceWrapper.jsx index 32dc8fafe..9214e69b6 100644 --- a/platform/viewer/src/routes/DataSourceWrapper.jsx +++ b/platform/viewer/src/routes/DataSourceWrapper.jsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { MODULE_TYPES } from '@ohif/core'; // -import { appConfig, extensionManager } from '../App.js'; +import { appConfig, extensionManager } from '../App.jsx'; /** * Uses route properties to determine the data source that should be passed diff --git a/platform/viewer/src/routes/ModeRoute.js b/platform/viewer/src/routes/ModeRoute.js index 372d31f4f..47faf6cf1 100644 --- a/platform/viewer/src/routes/ModeRoute.js +++ b/platform/viewer/src/routes/ModeRoute.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect, useCallback } from 'react'; +import React, { useEffect, useCallback } from 'react'; import { displaySetManager, ToolBarManager, diff --git a/platform/viewer/src/routes/index.js b/platform/viewer/src/routes/index.js index 381663bfc..9fe188fa4 100644 --- a/platform/viewer/src/routes/index.js +++ b/platform/viewer/src/routes/index.js @@ -1,23 +1,31 @@ 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'; +import buildModeRoutes from './buildModeRoutes'; +// TODO: Make these configurable const bakedInRoutes = [ + // WORK LIST { path: '/', exact: true, component: DataSourceWrapper, props: { children: StudyListContainer }, }, + // NOT FOUND (404) { component: NotFound }, ]; -const createRoutes = routes => { +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 routes = buildModeRoutes(modes, dataSources, extensionManager) || []; // TODO: Shouldn't need to guard input routes with an empty array? const allRoutes = [...(routes || []), ...bakedInRoutes];