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.

3 files changed, 12 insertions, 12 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index c1adbd6e..7b4dcb3e 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -28,15 +28,20 @@ import '../index.scss'
 import { AuthProvider, useAuth } from '../auth'
 import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { useMemo } from 'react'
 
 // This setup is necessary to forward the Auth0 context to the Redux context
 const Inner = ({ Component, pageProps }) => {
     const auth = useAuth()
-    const store = useStore(pageProps.initialReduxState, { auth })
+    const queryClient = useMemo(() => new QueryClient(), [])
+    const store = useStore(pageProps.initialReduxState, { auth, queryClient })
     return (
-        <Provider store={store}>
-            <Component {...pageProps} />
-        </Provider>
+        <QueryClientProvider client={queryClient}>
+            <Provider store={store}>
+                <Component {...pageProps} />
+            </Provider>
+        </QueryClientProvider>
     )
 }
 
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index 28db1531..a9dfdb19 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,6 @@ import { useRouter } from 'next/router'
 import { useProject } from '../../../../data/project'
 import { useDispatch, useSelector } from 'react-redux'
 import React, { useEffect } from 'react'
-import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { HotKeys } from 'react-hotkeys'
 import { KeymapConfiguration } from '../../../../hotkeys'
 import Head from 'next/head'
@@ -35,6 +34,7 @@ import ScaleIndicatorContainer from '../../../../containers/app/map/controls/Sca
 import ToolPanelComponent from '../../../../components/app/map/controls/ToolPanelComponent'
 import ProjectSidebarContainer from '../../../../containers/app/sidebars/project/ProjectSidebarContainer'
 import TopologySidebarContainer from '../../../../containers/app/sidebars/topology/TopologySidebarContainer'
+import { openProjectSucceeded } from '../../../../redux/actions/projects'
 
 /**
  * Page that displays a datacenter topology.
@@ -43,7 +43,7 @@ function Topology() {
     const router = useRouter()
     const { project: projectId, topology: topologyId } = router.query
 
-    const project = useProject(projectId)
+    const { data: project } = useProject(projectId)
     const title = project?.name ? project?.name + ' - OpenDC' : 'Simulation - OpenDC'
 
     const dispatch = useDispatch()
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 958ca622..2d8e6de7 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,22 +1,17 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import Head from 'next/head'
-import { useDispatch } from 'react-redux'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import ProjectListContainer from '../../containers/projects/ProjectListContainer'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
-import { fetchProjects } from '../../redux/actions/projects'
 
 function Projects() {
     useRequireAuth()
 
-    const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchProjects()), [dispatch])
-
     return (
         <>
             <Head>