refactor(web/ui): Fix compatibility with new API

This change updates the web interface in React to be compatible with the
new API written in Kotlin. Several changes have been made in the new API
to ensure consistency.

4 files changed, 52 insertions, 31 deletions

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
index c07a2c31..39fcb4f3 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -40,9 +40,9 @@ import BreadcrumbLink from '../../../components/util/BreadcrumbLink'
 
 function Project() {
     const router = useRouter()
-    const { project: projectId } = router.query
+    const projectId = +router.query['project']
 
-    const { data: project } = useProject(projectId)
+    const { data: project } = useProject(+projectId)
 
     const breadcrumb = (
         <Breadcrumb>
@@ -57,7 +57,7 @@ function Project() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector projectId={projectId} />
+            <ProjectSelector activeProject={project} />
         </ContextSelectionSection>
     )
 
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
index d1533d98..68345d0b 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -20,6 +20,7 @@
  * SOFTWARE.
  */
 
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import React, { useRef } from 'react'
@@ -42,18 +43,24 @@ import PortfolioSelector from '../../../../components/context/PortfolioSelector'
 import ProjectSelector from '../../../../components/context/ProjectSelector'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview'
-import PortfolioResults from '../../../../components/portfolios/PortfolioResults'
+import { usePortfolio } from '../../../../data/project'
+
+const PortfolioResults = dynamic(() => import('../../../../components/portfolios/PortfolioResults'))
 
 /**
  * Page that displays the results in a portfolio.
  */
 function Portfolio() {
     const router = useRouter()
-    const { project: projectId, portfolio: portfolioId } = router.query
+    const projectId = +router.query['project']
+    const portfolioNumber = +router.query['portfolio']
 
     const overviewRef = useRef(null)
     const resultsRef = useRef(null)
 
+    const { data: portfolio } = usePortfolio(projectId, portfolioNumber)
+    const project = portfolio?.project
+
     const breadcrumb = (
         <Breadcrumb>
             <BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -62,7 +69,11 @@ function Portfolio() {
             <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
                 Project details
             </BreadcrumbItem>
-            <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioId}`} component={BreadcrumbLink} isActive>
+            <BreadcrumbItem
+                to={`/projects/${projectId}/portfolios/${portfolioNumber}`}
+                component={BreadcrumbLink}
+                isActive
+            >
                 Portfolio
             </BreadcrumbItem>
         </Breadcrumb>
@@ -70,8 +81,8 @@ function Portfolio() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector projectId={projectId} />
-            <PortfolioSelector projectId={projectId} portfolioId={portfolioId} />
+            <ProjectSelector activeProject={project} />
+            <PortfolioSelector activePortfolio={portfolio} />
         </ContextSelectionSection>
     )
 
@@ -104,10 +115,10 @@ function Portfolio() {
             </PageSection>
             <PageSection isFilled>
                 <TabContent eventKey={0} id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <PortfolioOverview portfolioId={portfolioId} />
+                    <PortfolioOverview projectId={projectId} portfolioId={portfolioNumber} />
                 </TabContent>
                 <TabContent eventKey={1} id="results" ref={resultsRef} aria-label="Results tab" hidden>
-                    <PortfolioResults portfolioId={portfolioId} />
+                    <PortfolioResults projectId={projectId} portfolioId={portfolioNumber} />
                 </TabContent>
             </PageSection>
         </AppPage>
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 f7188d9f..6297b8c3 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
@@ -26,7 +26,6 @@ import ContextSelectionSection from '../../../../components/context/ContextSelec
 import ProjectSelector from '../../../../components/context/ProjectSelector'
 import TopologySelector from '../../../../components/context/TopologySelector'
 import TopologyOverview from '../../../../components/topologies/TopologyOverview'
-import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
@@ -45,6 +44,7 @@ import {
     TextContent,
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
+import { useTopology } from '../../../../data/topology'
 import { goToRoom } from '../../../../redux/actions/interaction-level'
 import { openTopology } from '../../../../redux/actions/topology'
 
@@ -55,16 +55,18 @@ const TopologyMap = dynamic(() => import('../../../../components/topologies/Topo
  */
 function Topology() {
     const router = useRouter()
-    const { project: projectId, topology: topologyId } = router.query
+    const projectId = +router.query['project']
+    const topologyNumber = +router.query['topology']
 
-    const { data: project } = useProject(projectId)
+    const { data: topology } = useTopology(projectId, topologyNumber)
+    const project = topology?.project
 
     const dispatch = useDispatch()
     useEffect(() => {
-        if (topologyId) {
-            dispatch(openTopology(topologyId))
+        if (topologyNumber) {
+            dispatch(openTopology(projectId, topologyNumber))
         }
-    }, [topologyId, dispatch])
+    }, [projectId, topologyNumber, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
 
@@ -76,7 +78,11 @@ function Topology() {
             <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}>
                 Project details
             </BreadcrumbItem>
-            <BreadcrumbItem to={`/projects/${projectId}/topologies/${topologyId}`} component={BreadcrumbLink} isActive>
+            <BreadcrumbItem
+                to={`/projects/${projectId}/topologies/${topologyNumber}`}
+                component={BreadcrumbLink}
+                isActive
+            >
                 Topology
             </BreadcrumbItem>
         </Breadcrumb>
@@ -84,8 +90,8 @@ function Topology() {
 
     const contextSelectors = (
         <ContextSelectionSection>
-            <ProjectSelector projectId={projectId} />
-            <TopologySelector projectId={projectId} topologyId={topologyId} />
+            <ProjectSelector activeProject={project} />
+            <TopologySelector activeTopology={topology} />
         </ContextSelectionSection>
     )
 
@@ -117,16 +123,22 @@ function Topology() {
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
                 <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}>
                     <TopologyOverview
-                        topologyId={topologyId}
+                        projectId={projectId}
+                        topologyNumber={topologyNumber}
                         onSelect={(type, obj) => {
                             if (type === 'room') {
-                                dispatch(goToRoom(obj._id))
+                                dispatch(goToRoom(obj.id))
                                 setActiveTab('floor-plan')
                             }
                         }}
                     />
                 </TabContent>
-                <TabContent id="floor-plan" aria-label="Floor Plan tab" className="pf-u-h-100" hidden={activeTab !== 'floor-plan'}>
+                <TabContent
+                    id="floor-plan"
+                    aria-label="Floor Plan tab"
+                    className="pf-u-h-100"
+                    hidden={activeTab !== 'floor-plan'}
+                >
                     <TopologyMap />
                 </TabContent>
             </PageSection>
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 eb77701e..bb1fbd69 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -26,9 +26,8 @@ import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import { useAuth } from '../../auth'
 import { AppPage } from '../../components/AppPage'
 import { PageSection, PageSectionVariants, Text, TextContent } from '@patternfly/react-core'
-import { useProjects } from '../../data/project'
+import { useProjects, useDeleteProject } from '../../data/project'
 import ProjectTable from '../../components/projects/ProjectTable'
-import { useMutation } from 'react-query'
 import NewProject from '../../components/projects/NewProject'
 
 const getVisibleProjects = (projects, filter, userId) => {
@@ -52,13 +51,12 @@ function Projects() {
     const { user } = useAuth()
     const { status, data: projects } = useProjects()
     const [filter, setFilter] = useState('SHOW_ALL')
-    const visibleProjects = useMemo(() => getVisibleProjects(projects ?? [], filter, user?.sub), [
-        projects,
-        filter,
-        user?.sub,
-    ])
+    const visibleProjects = useMemo(
+        () => getVisibleProjects(projects ?? [], filter, user?.sub),
+        [projects, filter, user?.sub]
+    )
 
-    const { mutate: deleteProject } = useMutation('deleteProject')
+    const { mutate: deleteProject } = useDeleteProject()
 
     return (
         <AppPage>
@@ -76,7 +74,7 @@ function Projects() {
                     status={status}
                     isFiltering={filter !== 'SHOW_ALL'}
                     projects={visibleProjects}
-                    onDelete={(project) => deleteProject(project._id)}
+                    onDelete={(project) => deleteProject(project.id)}
                 />
                 <NewProject />
             </PageSection>