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-ui/src/redux/sagas/topology.js      | 30 ++++++++++------------
 1 file changed, 13 insertions(+), 17 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/redux/sagas/topology.js')

diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index 4f7bc8db..3f41e1d4 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -19,10 +19,15 @@ import {
 import { fetchAndStoreTopology, getTopologyAsObject, updateTopologyOnServer } from './objects'
 import { uuid } from 'uuidv4'
 import { addTopology, deleteTopology } from '../../api/topologies'
+import { fetchProject } from '../../api/projects'
 
 export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = false) {
     try {
-        const project = yield select((state) => state.objects.project[projectId])
+        const auth = yield getContext('auth')
+        const queryClient = yield getContext('queryClient')
+        const project = yield call(() =>
+            queryClient.fetchQuery(`projects/${projectId}`, () => fetchProject(auth, projectId))
+        )
 
         for (let i in project.topologyIds) {
             yield fetchAndStoreTopology(project.topologyIds[i])
@@ -51,13 +56,6 @@ export function* onAddTopology(action) {
         const auth = yield getContext('auth')
         const topology = yield call(addTopology, auth, { ...topologyToBeCreated, projectId })
         yield fetchAndStoreTopology(topology._id)
-
-        const topologyIds = yield select((state) => state.objects.project[projectId].topologyIds)
-        yield put(
-            addPropToStoreObject('project', projectId, {
-                topologyIds: topologyIds.concat([topology._id]),
-            })
-        )
         yield put(setCurrentTopology(topology._id))
     } catch (error) {
         console.error(error)
@@ -66,21 +64,19 @@ export function* onAddTopology(action) {
 
 export function* onDeleteTopology(action) {
     try {
-        const topology = yield select((state) => state.objects.topologies[action.id])
-        const topologyIds = yield select((state) => state.objects.project[topology.projectId].topologyIds)
+        const auth = yield getContext('auth')
+        const queryClient = yield getContext('queryClient')
+        const project = yield call(() =>
+            queryClient.fetchQuery(`projects/${action.projectId}`, () => fetchProject(auth, action.projectId))
+        )
+        const topologyIds = project?.topologyIds ?? []
+
         const currentTopologyId = yield select((state) => state.currentTopologyId)
         if (currentTopologyId === action.id) {
             yield put(setCurrentTopology(topologyIds.filter((t) => t !== action.id)[0]))
         }
 
-        const auth = yield getContext('auth')
         yield call(deleteTopology, auth, action.id)
-
-        yield put(
-            addPropToStoreObject('project', topology.projectId, {
-                topologyIds: topologyIds.filter((id) => id !== action.id),
-            })
-        )
     } catch (error) {
         console.error(error)
     }
-- 
cgit v1.2.3