diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers/app')
3 files changed, 64 insertions, 51 deletions
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 ce7d5514..f9a380cb 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,32 +1,15 @@ import React from 'react' -import { useSelector } from 'react-redux' import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent' import { useRouter } from 'next/router' +import { usePortfolio, useScenarios } from '../../../data/project' const PortfolioResultsContainer = (props) => { const router = useRouter() const { portfolio: currentPortfolioId } = router.query - const { scenarios, portfolio } = useSelector((state) => { - if ( - !currentPortfolioId || - !state.objects.portfolio[currentPortfolioId] || - state.objects.portfolio[currentPortfolioId].scenarioIds - .map((scenarioId) => state.objects.scenario[scenarioId]) - .some((s) => s === undefined) - ) { - return { - portfolio: undefined, - scenarios: [], - } - } - - return { - portfolio: state.objects.portfolio[currentPortfolioId], - scenarios: state.objects.portfolio[currentPortfolioId].scenarioIds.map( - (scenarioId) => state.objects.scenario[scenarioId] - ), - } - }) + const { data: portfolio } = usePortfolio(currentPortfolioId) + const scenarios = useScenarios(portfolio?.scenarioIds ?? []) + .filter((res) => res.data) + .map((res) => res.data) return <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} /> } 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 1b539b8f..01183724 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,17 +2,36 @@ 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 } 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' -import { useActivePortfolioId, useActiveProjectId, usePortfolios, useProject } from '../../../../data/project' +import { usePortfolios, useProject } from '../../../../data/project' +import { useMutation, useQueryClient } from 'react-query' +import { addPortfolio, deletePortfolio } from '../../../../api/portfolios' +import { useAuth } from '../../../../auth' const PortfolioListContainer = () => { const router = useRouter() const { project: currentProjectId, portfolio: currentPortfolioId } = router.query const { data: currentProject } = useProject(currentProjectId) - const portfolios = usePortfolios(currentProjectId) + const portfolios = usePortfolios(currentProject?.portfolioIds ?? []) + .filter((res) => res.data) + .map((res) => res.data) + + const auth = useAuth() + const queryClient = useQueryClient() + const addMutation = useMutation((data) => addPortfolio(auth, data), { + onSuccess: async (result) => { + await queryClient.invalidateQueries(['projects', currentProjectId]) + }, + }) + const deleteMutation = useMutation((id) => deletePortfolio(auth, id), { + onSuccess: async (result) => { + queryClient.setQueryData(['projects', currentProjectId], (old) => ({ + ...old, + portfolioIds: old.portfolioIds.filter((id) => id !== result._id), + })) + queryClient.removeQueries(['portfolios', result._id]) + }, + }) const dispatch = useDispatch() const [isVisible, setVisible] = useState(false) @@ -23,21 +42,14 @@ const PortfolioListContainer = () => { }, onDeletePortfolio: async (id) => { if (id) { - const state = await getState(dispatch) - dispatch(deletePortfolio(id)) - dispatch(setCurrentTopology(currentProject.topologyIds[0])) + await deleteMutation.mutateAsync(id) await router.push(`/projects/${currentProjectId}`) } }, } const callback = (name, targets) => { if (name) { - dispatch( - addPortfolio(currentProjectId, { - name, - targets, - }) - ) + addMutation.mutate({ projectId: currentProjectId, name, targets }) } setVisible(false) } 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 7acc13ee..6bfc8599 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,20 +1,40 @@ 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 } from '../../../../redux/actions/scenarios' import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' import { useProjectTopologies } from '../../../../data/topology' -import { useScenarios } from '../../../../data/project' +import { usePortfolio, useScenarios } from '../../../../data/project' import { useSchedulers, useTraces } from '../../../../data/experiments' +import { useAuth } from '../../../../auth' +import { useMutation, useQueryClient } from 'react-query' +import { addScenario, deleteScenario } from '../../../../api/scenarios' const ScenarioListContainer = ({ portfolioId }) => { - const scenarios = useScenarios(portfolioId) + const { data: portfolio } = usePortfolio(portfolioId) + const scenarios = useScenarios(portfolio?.scenarioIds ?? []) + .filter((res) => res.data) + .map((res) => res.data) const topologies = useProjectTopologies() const traces = useTraces().data ?? [] const schedulers = useSchedulers().data ?? [] - const dispatch = useDispatch() + const auth = useAuth() + const queryClient = useQueryClient() + const addMutation = useMutation((data) => addScenario(auth, data), { + onSuccess: async (result) => { + await queryClient.invalidateQueries(['portfolios', portfolioId]) + }, + }) + const deleteMutation = useMutation((id) => deleteScenario(auth, id), { + onSuccess: async (result) => { + queryClient.setQueryData(['portfolios', portfolioId], (old) => ({ + ...old, + scenarioIds: old.scenarioIds.filter((id) => id !== result._id), + })) + queryClient.removeQueries(['scenarios', result._id]) + }, + }) + const [isVisible, setVisible] = useState(false) const onNewScenario = (currentPortfolioId) => { @@ -22,20 +42,18 @@ const ScenarioListContainer = ({ portfolioId }) => { } const onDeleteScenario = (id) => { if (id) { - dispatch(deleteScenario(id)) + deleteMutation.mutate(id) } } const callback = (name, portfolioId, trace, topology, operational) => { if (name) { - dispatch( - addScenario({ - portfolioId, - name, - trace, - topology, - operational, - }) - ) + addMutation.mutate({ + portfolioId, + name, + trace, + topology, + operational, + }) } setVisible(false) |