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.

3 files changed, 7 insertions, 8 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 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}`)
         }
     }