diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-07 16:27:49 +0200 |
|---|---|---|
| committer | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-07 16:28:25 +0200 |
| commit | e5e5d2c65e583493870bc0b62fb185c5e757c13f (patch) | |
| tree | dc9bc25517ce36e155932212f598bf2375519d34 /opendc-web/opendc-web-ui/src/pages/projects | |
| parent | aa788a3ad18badfac8beaabdaffc88b9e52f9306 (diff) | |
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.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages/projects')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js | 4 | ||||
| -rw-r--r-- | opendc-web/opendc-web-ui/src/pages/projects/index.js | 7 |
2 files changed, 3 insertions, 8 deletions
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> |