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.

1 files changed, 5 insertions, 5 deletions

diff --git a/opendc-web/opendc-web-ui/src/data/topology.js b/opendc-web/opendc-web-ui/src/data/topology.js
index f6ce1672..4c746a7e 100644
--- a/opendc-web/opendc-web-ui/src/data/topology.js
+++ b/opendc-web/opendc-web-ui/src/data/topology.js
@@ -21,7 +21,7 @@
  */
 
 import { useSelector } from 'react-redux'
-import { useRouter } from 'next/router'
+import { useActiveProjectId, useProject } from './project'
 
 /**
  * Return the current active topology.
@@ -34,14 +34,14 @@ export function useActiveTopology() {
  * Return the topologies for the active project.
  */
 export function useProjectTopologies() {
-    const router = useRouter()
-    const { project: currentProjectId } = router.query
+    const projectId = useActiveProjectId()
+    const { data: project } = useProject(projectId)
     return useSelector(({ objects }) => {
-        if (!currentProjectId || !objects.project[currentProjectId]) {
+        if (!project) {
             return []
         }
 
-        const topologies = objects.project[currentProjectId].topologyIds.map((t) => objects.topology[t])
+        const topologies = project.topologyIds.map((t) => objects.topology[t])
 
         if (topologies.filter((t) => !t).length > 0) {
             return []