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.
---
 opendc-web/opendc-web-ui/src/data/project.js  | 22 +++++++++++++---------
 opendc-web/opendc-web-ui/src/data/topology.js | 10 +++++-----
 2 files changed, 18 insertions(+), 14 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/data')

diff --git a/opendc-web/opendc-web-ui/src/data/project.js b/opendc-web/opendc-web-ui/src/data/project.js
index 30b36efa..308930e5 100644
--- a/opendc-web/opendc-web-ui/src/data/project.js
+++ b/opendc-web/opendc-web-ui/src/data/project.js
@@ -21,39 +21,43 @@
  */
 
 import { useSelector } from 'react-redux'
+import { useQuery } from 'react-query'
+import { fetchProject, fetchProjects } from '../api/projects'
+import { useAuth } from '../auth'
 import { useRouter } from 'next/router'
 
 /**
  * Return the available projects.
  */
 export function useProjects() {
-    return useSelector((state) => state.projects)
+    const auth = useAuth()
+    return useQuery('projects', () => fetchProjects(auth))
 }
 
 /**
  * Return the project with the specified identifier.
  */
 export function useProject(projectId) {
-    return useSelector((state) => state.projects[projectId])
+    const auth = useAuth()
+    return useQuery(`projects/${projectId}`, () => fetchProject(auth, projectId), { enabled: !!projectId })
 }
 
 /**
- * Return the current active project.
+ * Return the current active project identifier.
  */
-export function useActiveProject() {
+export function useActiveProjectId() {
     const router = useRouter()
-    const { project: projectId } = router.query
-    return useSelector((state) => state.objects.project[projectId])
+    const { project } = router.query
+    return project
 }
 
 /**
  * Return the portfolios for the specified project id.
  */
 export function usePortfolios(projectId) {
+    const { data: project } = useProject(projectId)
     return useSelector((state) => {
-        let portfolios = state.objects.project[projectId]
-            ? state.objects.project[projectId].portfolioIds.map((t) => state.objects.portfolio[t])
-            : []
+        let portfolios = project?.portfolioIds?.map((t) => state.objects.portfolio[t]) ?? []
         if (portfolios.filter((t) => !t).length > 0) {
             portfolios = []
         }
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 []
-- 
cgit v1.2.3