From 2c8d675c2cf140eac05988065a9d20fd2773399a Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 8 Jul 2021 13:36:39 +0200
Subject: ui: Combine fetching of project relations

This change updates the OpenDC frontend to combine the fetching of
project relations. This means that for a single project, we make only
one additional request to retrieve all its topologies.
---
 opendc-web/opendc-web-ui/src/data/project.js  | 27 ++++++++++++++++++---------
 opendc-web/opendc-web-ui/src/data/topology.js | 13 ++++++++-----
 2 files changed, 26 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 256203a3..9bdcfb93 100644
--- a/opendc-web/opendc-web-ui/src/data/project.js
+++ b/opendc-web/opendc-web-ui/src/data/project.js
@@ -23,8 +23,8 @@
 import { useQueries, useQuery } from 'react-query'
 import { addProject, deleteProject, fetchProject, fetchProjects } from '../api/projects'
 import { useRouter } from 'next/router'
-import { addPortfolio, deletePortfolio, fetchPortfolio } from '../api/portfolios'
-import { addScenario, deleteScenario, fetchScenario } from '../api/scenarios'
+import { addPortfolio, deletePortfolio, fetchPortfolio, fetchPortfoliosOfProject } from '../api/portfolios'
+import { addScenario, deleteScenario, fetchScenario, fetchScenariosOfPortfolio } from '../api/scenarios'
 
 /**
  * Configure the query defaults for the project endpoints.
@@ -51,6 +51,9 @@ export function configureProjectClient(queryClient, auth) {
     queryClient.setQueryDefaults('portfolios', {
         queryFn: ({ queryKey }) => fetchPortfolio(auth, queryKey[1]),
     })
+    queryClient.setQueryDefaults('project-portfolios', {
+        queryFn: ({ queryKey }) => fetchPortfoliosOfProject(auth, queryKey[1]),
+    })
     queryClient.setMutationDefaults('addPortfolio', {
         mutationFn: (data) => addPortfolio(auth, data),
         onSuccess: async (result) => {
@@ -75,6 +78,9 @@ export function configureProjectClient(queryClient, auth) {
     queryClient.setQueryDefaults('scenarios', {
         queryFn: ({ queryKey }) => fetchScenario(auth, queryKey[1]),
     })
+    queryClient.setQueryDefaults('portfolio-scenarios', {
+        queryFn: ({ queryKey }) => fetchScenariosOfPortfolio(auth, queryKey[1]),
+    })
     queryClient.setMutationDefaults('addScenario', {
         mutationFn: (data) => addScenario(auth, data),
         onSuccess: async (result) => {
@@ -122,14 +128,10 @@ export function usePortfolio(portfolioId) {
 }
 
 /**
- * Return the portfolios for the specified project id.
+ * Return the portfolios of the specified project.
  */
-export function usePortfolios(portfolioIds) {
-    return useQueries(
-        portfolioIds.map((portfolioId) => ({
-            queryKey: ['portfolios', portfolioId],
-        }))
-    )
+export function useProjectPortfolios(projectId) {
+    return useQuery(['project-portfolios', projectId], { enabled: !!projectId })
 }
 
 /**
@@ -143,6 +145,13 @@ export function useScenarios(scenarioIds) {
     )
 }
 
+/**
+ * Return the scenarios of the specified portfolio.
+ */
+export function usePortfolioScenarios(portfolioId) {
+    return useQuery(['portfolio-scenarios', portfolioId], { enabled: !!portfolioId })
+}
+
 /**
  * Return the current active project identifier.
  */
diff --git a/opendc-web/opendc-web-ui/src/data/topology.js b/opendc-web/opendc-web-ui/src/data/topology.js
index 92911a70..8db75877 100644
--- a/opendc-web/opendc-web-ui/src/data/topology.js
+++ b/opendc-web/opendc-web-ui/src/data/topology.js
@@ -21,14 +21,17 @@
  */
 
 import { useSelector } from 'react-redux'
-import { useQueries } from 'react-query'
-import { addTopology, deleteTopology, fetchTopology, updateTopology } from '../api/topologies'
+import { useQueries, useQuery } from 'react-query'
+import { addTopology, deleteTopology, fetchTopologiesOfProject, fetchTopology, updateTopology } from '../api/topologies'
 
 /**
  * Configure the query defaults for the topology endpoints.
  */
 export function configureTopologyClient(queryClient, auth) {
     queryClient.setQueryDefaults('topologies', { queryFn: ({ queryKey }) => fetchTopology(auth, queryKey[1]) })
+    queryClient.setQueryDefaults('project-topologies', {
+        queryFn: ({ queryKey }) => fetchTopologiesOfProject(auth, queryKey[1]),
+    })
 
     queryClient.setMutationDefaults('addTopology', {
         mutationFn: (data) => addTopology(auth, data),
@@ -64,8 +67,8 @@ export function useActiveTopology() {
 }
 
 /**
- * Return the scenarios with the specified identifiers.
+ * Return the topologies of the specified project.
  */
-export function useTopologies(topologyIds) {
-    return useQueries(topologyIds.map((topologyId) => ({ queryKey: ['topologies', topologyId] })))
+export function useProjectTopologies(projectId) {
+    return useQuery(['project-topologies', projectId], { enabled: !!projectId })
 }
-- 
cgit v1.2.3