diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers')
6 files changed, 32 insertions, 78 deletions
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 01183724..1fb88253 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 @@ -1,12 +1,9 @@ import React, { useState } from 'react' -import { useDispatch } from 'react-redux' import { useRouter } from 'next/router' import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent' import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent' import { usePortfolios, useProject } from '../../../../data/project' -import { useMutation, useQueryClient } from 'react-query' -import { addPortfolio, deletePortfolio } from '../../../../api/portfolios' -import { useAuth } from '../../../../auth' +import { useMutation } from 'react-query' const PortfolioListContainer = () => { const router = useRouter() @@ -16,24 +13,9 @@ const PortfolioListContainer = () => { .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 { mutate: addPortfolio } = useMutation('addPortfolio') + const { mutateAsync: deletePortfolio } = useMutation('deletePortfolio') - const dispatch = useDispatch() const [isVisible, setVisible] = useState(false) const actions = { onNewPortfolio: () => setVisible(true), @@ -42,14 +24,14 @@ const PortfolioListContainer = () => { }, onDeletePortfolio: async (id) => { if (id) { - await deleteMutation.mutateAsync(id) + await deletePortfolio(id) await router.push(`/projects/${currentProjectId}`) } }, } const callback = (name, targets) => { if (name) { - addMutation.mutate({ projectId: currentProjectId, name, targets }) + addPortfolio({ 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 6bfc8599..62761583 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,52 +2,33 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' import NewScenarioModalComponent from '../../../../components/modals/custom-components/NewScenarioModalComponent' -import { useProjectTopologies } from '../../../../data/topology' -import { usePortfolio, useScenarios } from '../../../../data/project' +import { useTopologies } from '../../../../data/topology' +import { usePortfolio, useProject, 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' +import { useMutation } from 'react-query' const ScenarioListContainer = ({ portfolioId }) => { const { data: portfolio } = usePortfolio(portfolioId) + const { data: project } = useProject(portfolio?.projectId) const scenarios = useScenarios(portfolio?.scenarioIds ?? []) .filter((res) => res.data) .map((res) => res.data) - const topologies = useProjectTopologies() + const topologies = useTopologies(project?.topologyIds ?? []) + .filter((res) => res.data) + .map((res) => res.data) const traces = useTraces().data ?? [] const schedulers = useSchedulers().data ?? [] - 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 { mutate: addScenario } = useMutation('addScenario') + const { mutate: deleteScenario } = useMutation('deleteScenario') const [isVisible, setVisible] = useState(false) - const onNewScenario = (currentPortfolioId) => { - setVisible(true) - } - const onDeleteScenario = (id) => { - if (id) { - deleteMutation.mutate(id) - } - } + const onNewScenario = () => setVisible(true) + const onDeleteScenario = (id) => id && deleteScenario(id) const callback = (name, portfolioId, trace, topology, operational) => { if (name) { - addMutation.mutate({ + addScenario({ portfolioId, name, trace, 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 55f8bd00..78db166c 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 @@ -3,28 +3,32 @@ import { useDispatch } from 'react-redux' import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent' import { setCurrentTopology } from '../../../../redux/actions/topology/building' import { useRouter } from 'next/router' -import { addTopology, deleteTopology } from '../../../../redux/actions/topologies' +import { addTopology } from '../../../../redux/actions/topologies' import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent' -import { useActiveTopology, useProjectTopologies } from '../../../../data/topology' +import { useActiveTopology, useTopologies } from '../../../../data/topology' import { useProject } from '../../../../data/project' +import { useMutation } from 'react-query' const TopologyListContainer = () => { const dispatch = useDispatch() const router = useRouter() const { project: currentProjectId } = router.query const { data: currentProject } = useProject(currentProjectId) - const topologies = useProjectTopologies() + const topologies = useTopologies(currentProject?.topologyIds ?? []) + .filter((res) => res.data) + .map((res) => res.data) const currentTopologyId = useActiveTopology()?._id const [isVisible, setVisible] = useState(false) + const { mutate: deleteTopology } = useMutation('deleteTopology') + const onChooseTopology = async (id) => { dispatch(setCurrentTopology(id)) await router.push(`/projects/${currentProjectId}/topologies/${id}`) } const onDeleteTopology = async (id) => { if (id) { - dispatch(deleteTopology(id)) - dispatch(setCurrentTopology(currentProject.topologyIds[0])) + deleteTopology(id) await router.push(`/projects/${currentProjectId}`) } } diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js index c844fe2d..ac0edae4 100644 --- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js @@ -3,23 +3,17 @@ import TextInputModal from '../../components/modals/TextInputModal' import { Button } from 'reactstrap' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPlus } from '@fortawesome/free-solid-svg-icons' -import { useMutation, useQueryClient } from 'react-query' -import { addProject } from '../../api/projects' -import { useAuth } from '../../auth' +import { useMutation } from 'react-query' /** * A container for creating a new project. */ const NewProjectContainer = () => { const [isVisible, setVisible] = useState(false) - const auth = useAuth() - const queryClient = useQueryClient() - const mutation = useMutation((data) => addProject(auth, data), { - onSuccess: (result) => queryClient.setQueryData('projects', (old) => [...(old || []), result]), - }) + const { mutate: addProject } = useMutation('addProject') const callback = (text) => { if (text) { - mutation.mutate({ name: text }) + addProject({ name: text }) } setVisible(false) } diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js index eba388d6..62985742 100644 --- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js +++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectActions.js @@ -1,18 +1,12 @@ import React from 'react' import ProjectActionButtons from '../../components/projects/ProjectActionButtons' -import { useMutation, useQueryClient } from 'react-query' -import { useAuth } from '../../auth' -import { deleteProject } from '../../api/projects' +import { useMutation } from 'react-query' const ProjectActions = (props) => { - const auth = useAuth() - const queryClient = useQueryClient() - const mutation = useMutation((projectId) => deleteProject(auth, projectId), { - onSuccess: () => queryClient.invalidateQueries('projects'), - }) + const { mutate: deleteProject } = useMutation('deleteProject') const actions = { onViewUsers: (id) => {}, // TODO implement user viewing - onDelete: (id) => mutation.mutate(id), + onDelete: (id) => deleteProject(id), } return <ProjectActionButtons {...props} {...actions} /> } diff --git a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js index 91e8ac5a..b5c5dd68 100644 --- a/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/projects/ProjectListContainer.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types' import ProjectList from '../../components/projects/ProjectList' import { useAuth } from '../../auth' import { useProjects } from '../../data/project' -import { useQueryClient } from 'react-query' const getVisibleProjects = (projects, filter, userId) => { switch (filter) { |