From aa788a3ad18badfac8beaabdaffc88b9e52f9306 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 15:07:11 +0200 Subject: ui: Remove current ids state from Redux This change removes the current active identifiers from the Redux state. Instead, we use the router query to track the active project, portfolio and topology. --- .../containers/app/results/PortfolioResultsContainer.js | 13 ++++++++----- .../app/sidebars/project/PortfolioListContainer.js | 12 ++++++------ .../app/sidebars/project/ScenarioListContainer.js | 14 +++----------- .../app/sidebars/project/TopologyListContainer.js | 14 ++++++-------- 4 files changed, 23 insertions(+), 30 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/containers/app') diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js index e60abe18..ce7d5514 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js @@ -1,13 +1,16 @@ import React from 'react' import { useSelector } from 'react-redux' import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent' +import { useRouter } from 'next/router' const PortfolioResultsContainer = (props) => { + const router = useRouter() + const { portfolio: currentPortfolioId } = router.query const { scenarios, portfolio } = useSelector((state) => { if ( - state.currentPortfolioId === '-1' || - !state.objects.portfolio[state.currentPortfolioId] || - state.objects.portfolio[state.currentPortfolioId].scenarioIds + !currentPortfolioId || + !state.objects.portfolio[currentPortfolioId] || + state.objects.portfolio[currentPortfolioId].scenarioIds .map((scenarioId) => state.objects.scenario[scenarioId]) .some((s) => s === undefined) ) { @@ -18,8 +21,8 @@ const PortfolioResultsContainer = (props) => { } return { - portfolio: state.objects.portfolio[state.currentPortfolioId], - scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map( + portfolio: state.objects.portfolio[currentPortfolioId], + scenarios: state.objects.portfolio[currentPortfolioId].scenarioIds.map( (scenarioId) => state.objects.scenario[scenarioId] ), } 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 28d7f0d1..b5bade98 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 @@ -2,7 +2,7 @@ import React, { useState } from 'react' import { useDispatch } from 'react-redux' import { useRouter } from 'next/router' import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent' -import { addPortfolio, deletePortfolio, setCurrentPortfolio } from '../../../../redux/actions/portfolios' +import { addPortfolio, deletePortfolio } from '../../../../redux/actions/portfolios' import { getState } from '../../../../util/state-utils' import { setCurrentTopology } from '../../../../redux/actions/topology/building' import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent' @@ -17,22 +17,22 @@ const PortfolioListContainer = () => { const [isVisible, setVisible] = useState(false) const actions = { onNewPortfolio: () => setVisible(true), - onChoosePortfolio: (portfolioId) => { - dispatch(setCurrentPortfolio(portfolioId)) + onChoosePortfolio: async (portfolioId) => { + await router.push(`/projects/${currentProjectId}/portfolios/${portfolioId}`) }, onDeletePortfolio: async (id) => { if (id) { const state = await getState(dispatch) dispatch(deletePortfolio(id)) - dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - router.push(`/projects/${state.currentProjectId}`) + dispatch(setCurrentTopology(state.objects.project[currentProjectId].topologyIds[0])) + await router.push(`/projects/${currentProjectId}`) } }, } const callback = (name, targets) => { if (name) { dispatch( - addPortfolio({ + addPortfolio(currentProjectId, { name, targets, }) 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 10743401..0eb61026 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 @@ -2,18 +2,16 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' import { useDispatch } from 'react-redux' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' -import { addScenario, deleteScenario, setCurrentScenario } from '../../../../redux/actions/scenarios' -import { setCurrentPortfolio } from '../../../../redux/actions/portfolios' +import { addScenario, deleteScenario } from '../../../../redux/actions/scenarios' import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' import { useProjectTopologies } from '../../../../data/topology' -import { useActiveScenario, useScenarios } from '../../../../data/project' +import { useScenarios } from '../../../../data/project' import { useSchedulers, useTraces } from '../../../../data/experiments' import { useRouter } from 'next/router' const ScenarioListContainer = ({ portfolioId }) => { const router = useRouter() const { project: currentProjectId } = router.query - const currentScenarioId = useActiveScenario()?._id const scenarios = useScenarios(portfolioId) const topologies = useProjectTopologies() const traces = useTraces() @@ -23,12 +21,9 @@ const ScenarioListContainer = ({ portfolioId }) => { const [isVisible, setVisible] = useState(false) const onNewScenario = (currentPortfolioId) => { - dispatch(setCurrentPortfolio(currentPortfolioId)) setVisible(true) } - const onChooseScenario = (portfolioId, scenarioId) => { - dispatch(setCurrentScenario(portfolioId, scenarioId)) - } + const onChooseScenario = (portfolioId, scenarioId) => {} const onDeleteScenario = (id) => { if (id) { dispatch(deleteScenario(id)) @@ -54,11 +49,8 @@ const ScenarioListContainer = ({ portfolioId }) => { <> { const dispatch = useDispatch() const router = useRouter() + const { project: currentProjectId } = router.query const topologies = useProjectTopologies() const currentTopologyId = useActiveTopology()?._id const [isVisible, setVisible] = useState(false) const onChooseTopology = async (id) => { dispatch(setCurrentTopology(id)) - const state = await getState(dispatch) - await router.push(`/projects/${state.currentProjectId}/topologies/${id}`) + await router.push(`/projects/${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])) - await router.push(`/projects/${state.currentProjectId}`) + dispatch(setCurrentTopology(state.objects.project[currentProjectId].topologyIds[0])) + await router.push(`/projects/${currentProjectId}`) } } const onCreateTopology = (name) => { if (name) { - dispatch(addTopology(name, undefined)) + dispatch(addTopology(currentProjectId, name, undefined)) } setVisible(false) } const onDuplicateTopology = (name, id) => { if (name) { - dispatch(addTopology(name, id)) + dispatch(addTopology(currentProjectId, name, id)) } setVisible(false) } -- cgit v1.2.3