ui: Split App container into separate components

This change splits the App container into separate pages, as a starting
point for removing much of the unnecessary state from Redux.

4 files changed, 14 insertions, 119 deletions

diff --git a/opendc-web/opendc-web-ui/src/containers/app/App.js b/opendc-web/opendc-web-ui/src/containers/app/App.js
deleted file mode 100644
index ec9714ce..00000000
--- a/opendc-web/opendc-web-ui/src/containers/app/App.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
-import Head from 'next/head'
-import { HotKeys } from 'react-hotkeys'
-import { useDispatch, useSelector } from 'react-redux'
-import { openPortfolioSucceeded } from '../../redux/actions/portfolios'
-import { openProjectSucceeded } from '../../redux/actions/projects'
-import ToolPanelComponent from '../../components/app/map/controls/ToolPanelComponent'
-import LoadingScreen from '../../components/app/map/LoadingScreen'
-import ScaleIndicatorContainer from '../../containers/app/map/controls/ScaleIndicatorContainer'
-import MapStage from '../../containers/app/map/MapStage'
-import TopologySidebarContainer from '../../containers/app/sidebars/topology/TopologySidebarContainer'
-import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
-import ProjectSidebarContainer from '../../containers/app/sidebars/project/ProjectSidebarContainer'
-import { openScenarioSucceeded } from '../../redux/actions/scenarios'
-import PortfolioResultsContainer from '../../containers/app/results/PortfolioResultsContainer'
-import { KeymapConfiguration } from '../../hotkeys'
-import { useRequireAuth } from '../../auth'
-import { useActiveProject } from '../../data/project'
-
-const App = ({ projectId, portfolioId, scenarioId }) => {
-    useRequireAuth()
-
-    const projectName = useActiveProject()?.name
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-
-    const dispatch = useDispatch()
-    useEffect(() => {
-        if (scenarioId) {
-            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId))
-        } else if (portfolioId) {
-            dispatch(openPortfolioSucceeded(projectId, portfolioId))
-        } else {
-            dispatch(openProjectSucceeded(projectId))
-        }
-    }, [projectId, portfolioId, scenarioId, dispatch])
-
-    const constructionElements = topologyIsLoading ? (
-        <div className="full-height d-flex align-items-center justify-content-center">
-            <LoadingScreen />
-        </div>
-    ) : (
-        <div className="full-height">
-            <MapStage />
-            <ScaleIndicatorContainer />
-            <ToolPanelComponent />
-            <ProjectSidebarContainer />
-            <TopologySidebarContainer />
-        </div>
-    )
-
-    const portfolioElements = (
-        <div className="full-height app-page-container">
-            <ProjectSidebarContainer />
-            <div className="container-fluid full-height">
-                <PortfolioResultsContainer />
-            </div>
-        </div>
-    )
-
-    const scenarioElements = (
-        <div className="full-height app-page-container">
-            <ProjectSidebarContainer />
-            <div className="container-fluid full-height">
-                <h2>Scenario loading</h2>
-            </div>
-        </div>
-    )
-
-    const title = projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC'
-
-    return (
-        <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="page-container full-height">
-            <Head>
-                <title>{title}</title>
-            </Head>
-            <AppNavbarContainer fullWidth={true} />
-            {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements}
-        </HotKeys>
-    )
-}
-
-App.propTypes = {
-    projectId: PropTypes.string.isRequired,
-    portfolioId: PropTypes.string,
-    scenarioId: PropTypes.string,
-}
-
-export default App
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
index a36997ff..28d7f0d1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js
@@ -6,16 +6,15 @@ import { addPortfolio, deletePortfolio, setCurrentPortfolio } from '../../../../
 import { getState } from '../../../../util/state-utils'
 import { setCurrentTopology } from '../../../../redux/actions/topology/building'
 import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent'
-import { useActivePortfolio, useActiveProject, usePortfolios } from '../../../../data/project'
+import { usePortfolios } from '../../../../data/project'
 
 const PortfolioListContainer = () => {
-    const currentProjectId = useActiveProject()?._id
-    const currentPortfolioId = useActivePortfolio()?._id
+    const router = useRouter()
+    const { project: currentProjectId, portfolio: currentPortfolioId } = router.query
     const portfolios = usePortfolios(currentProjectId)
 
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
-    const router = useRouter()
     const actions = {
         onNewPortfolio: () => setVisible(true),
         onChoosePortfolio: (portfolioId) => {
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
index e1be51dc..10743401 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
 import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent'
@@ -5,11 +6,13 @@ import { addScenario, deleteScenario, setCurrentScenario } from '../../../../red
 import { setCurrentPortfolio } from '../../../../redux/actions/portfolios'
 import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent'
 import { useProjectTopologies } from '../../../../data/topology'
-import { useActiveScenario, useActiveProject, useScenarios } from '../../../../data/project'
+import { useActiveScenario, useScenarios } from '../../../../data/project'
 import { useSchedulers, useTraces } from '../../../../data/experiments'
+import { useRouter } from 'next/router'
 
 const ScenarioListContainer = ({ portfolioId }) => {
-    const currentProjectId = useActiveProject()?._id
+    const router = useRouter()
+    const { project: currentProjectId } = router.query
     const currentScenarioId = useActiveScenario()?._id
     const scenarios = useScenarios(portfolioId)
     const topologies = useProjectTopologies()
@@ -71,4 +74,8 @@ const ScenarioListContainer = ({ portfolioId }) => {
     )
 }
 
+ScenarioListContainer.propTypes = {
+    portfolioId: PropTypes.string.isRequired,
+}
+
 export default ScenarioListContainer
diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
index 266ca495..648c4500 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js
@@ -18,14 +18,14 @@ const TopologyListContainer = () => {
     const onChooseTopology = async (id) => {
         dispatch(setCurrentTopology(id))
         const state = await getState(dispatch)
-        router.push(`/projects/${state.currentProjectId}`)
+        await router.push(`/projects/${state.currentProjectId}/topologies/${id}`)
     }
     const onDeleteTopology = async (id) => {
         if (id) {
             const state = await getState(dispatch)
             dispatch(deleteTopology(id))
             dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0]))
-            router.push(`/projects/${state.currentProjectId}`)
+            await router.push(`/projects/${state.currentProjectId}`)
         }
     }
     const onCreateTopology = (name) => {