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, 6 insertions, 37 deletions

diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
index 0689090a..96a4323c 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
@@ -1,16 +1,16 @@
-import { call, put, getContext } from 'redux-saga/effects'
-import { addToStore } from '../actions/objects'
-import { addProjectSucceeded, deleteProjectSucceeded, fetchProjectsSucceeded } from '../actions/projects'
-import { addProject, deleteProject, getProject, getProjects } from '../../api/projects'
+import { call, getContext } from 'redux-saga/effects'
 import { fetchAndStoreAllTopologiesOfProject } from './topology'
 import { fetchAndStoreAllSchedulers, fetchAndStoreAllTraces } from './objects'
 import { fetchPortfoliosOfProject } from './portfolios'
+import { fetchProject } from '../../api/projects'
 
 export function* onOpenProjectSucceeded(action) {
     try {
         const auth = yield getContext('auth')
-        const project = yield call(getProject, auth, action.id)
-        yield put(addToStore('project', project))
+        const queryClient = yield getContext('queryClient')
+        const project = yield call(() =>
+            queryClient.fetchQuery(`projects/${action.id}`, () => fetchProject(auth, action.id))
+        )
 
         yield fetchAndStoreAllTopologiesOfProject(action.id, true)
         yield fetchPortfoliosOfProject(project)
@@ -20,34 +20,3 @@ export function* onOpenProjectSucceeded(action) {
         console.error(error)
     }
 }
-
-export function* onProjectAdd(action) {
-    try {
-        const auth = yield getContext('auth')
-        const project = yield call(addProject, auth, { name: action.name })
-        yield put(addToStore('project', project))
-        yield put(addProjectSucceeded(project))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onProjectDelete(action) {
-    try {
-        const auth = yield getContext('auth')
-        yield call(deleteProject, auth, action.id)
-        yield put(deleteProjectSucceeded(action.id))
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-export function* onFetchProjects(action) {
-    try {
-        const auth = yield getContext('auth')
-        const projects = yield call(getProjects, auth)
-        yield put(fetchProjectsSucceeded(projects))
-    } catch (error) {
-        console.error(error)
-    }
-}