From e5e5d2c65e583493870bc0b62fb185c5e757c13f Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 7 Jul 2021 16:27:49 +0200
Subject: ui: Migrate project APIs to React Query

This change updates the OpenDC frontend to use React Query for fetching
and mutating project data. Previously, this state was tracked and
synchronized via Redux. Migrating to React Query greatly simplifies the
state synchronization logic necessary in the frontend.
---
 .../src/containers/app/sidebars/project/PortfolioListContainer.js   | 5 +++--
 .../src/containers/app/sidebars/project/ScenarioListContainer.js    | 6 +-----
 .../src/containers/app/sidebars/project/TopologyListContainer.js    | 4 +++-
 3 files changed, 7 insertions(+), 8 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/sidebars')

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 b5bade98..1b539b8f 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,11 +6,12 @@ import { addPortfolio, deletePortfolio } from '../../../../redux/actions/portfol
 import { getState } from '../../../../util/state-utils'
 import { setCurrentTopology } from '../../../../redux/actions/topology/building'
 import NewPortfolioModalComponent from '../../../../components/modals/custom-components/NewPortfolioModalComponent'
-import { usePortfolios } from '../../../../data/project'
+import { useActivePortfolioId, useActiveProjectId, usePortfolios, useProject } from '../../../../data/project'
 
 const PortfolioListContainer = () => {
     const router = useRouter()
     const { project: currentProjectId, portfolio: currentPortfolioId } = router.query
+    const { data: currentProject } = useProject(currentProjectId)
     const portfolios = usePortfolios(currentProjectId)
 
     const dispatch = useDispatch()
@@ -24,7 +25,7 @@ const PortfolioListContainer = () => {
             if (id) {
                 const state = await getState(dispatch)
                 dispatch(deletePortfolio(id))
-                dispatch(setCurrentTopology(state.objects.project[currentProjectId].topologyIds[0]))
+                dispatch(setCurrentTopology(currentProject.topologyIds[0]))
                 await router.push(`/projects/${currentProjectId}`)
             }
         },
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 0eb61026..c474c56e 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
@@ -7,11 +7,8 @@ import NewScenarioModalComponent from '../../../../components/modals/custom-comp
 import { useProjectTopologies } from '../../../../data/topology'
 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 scenarios = useScenarios(portfolioId)
     const topologies = useProjectTopologies()
     const traces = useTraces()
@@ -23,7 +20,6 @@ const ScenarioListContainer = ({ portfolioId }) => {
     const onNewScenario = (currentPortfolioId) => {
         setVisible(true)
     }
-    const onChooseScenario = (portfolioId, scenarioId) => {}
     const onDeleteScenario = (id) => {
         if (id) {
             dispatch(deleteScenario(id))
@@ -67,7 +63,7 @@ const ScenarioListContainer = ({ portfolioId }) => {
 }
 
 ScenarioListContainer.propTypes = {
-    portfolioId: PropTypes.string.isRequired,
+    portfolioId: PropTypes.string,
 }
 
 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 69367b5f..55f8bd00 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
@@ -6,11 +6,13 @@ import { useRouter } from 'next/router'
 import { addTopology, deleteTopology } from '../../../../redux/actions/topologies'
 import NewTopologyModalComponent from '../../../../components/modals/custom-components/NewTopologyModalComponent'
 import { useActiveTopology, useProjectTopologies } from '../../../../data/topology'
+import { useProject } from '../../../../data/project'
 
 const TopologyListContainer = () => {
     const dispatch = useDispatch()
     const router = useRouter()
     const { project: currentProjectId } = router.query
+    const { data: currentProject } = useProject(currentProjectId)
     const topologies = useProjectTopologies()
     const currentTopologyId = useActiveTopology()?._id
     const [isVisible, setVisible] = useState(false)
@@ -22,7 +24,7 @@ const TopologyListContainer = () => {
     const onDeleteTopology = async (id) => {
         if (id) {
             dispatch(deleteTopology(id))
-            dispatch(setCurrentTopology(state.objects.project[currentProjectId].topologyIds[0]))
+            dispatch(setCurrentTopology(currentProject.topologyIds[0]))
             await router.push(`/projects/${currentProjectId}`)
         }
     }
-- 
cgit v1.2.3