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.

1 files changed, 10 insertions, 5 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index 213a4868..f8ee4990 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -38,8 +38,8 @@ import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import RoomTable from './RoomTable'
 
-function TopologyOverview({ topologyId, onSelect }) {
-    const { data: topology } = useTopology(topologyId)
+function TopologyOverview({ projectId, topologyNumber, onSelect }) {
+    const { data: topology } = useTopology(projectId, topologyNumber)
     return (
         <Grid hasGutter>
             <GridItem md={2}>
@@ -57,7 +57,7 @@ function TopologyOverview({ topologyId, onSelect }) {
                                 <DescriptionListTerm>Last edited</DescriptionListTerm>
                                 <DescriptionListDescription>
                                     {topology ? (
-                                        parseAndFormatDateTime(topology.datetimeLastEdited)
+                                        parseAndFormatDateTime(topology.updatedAt)
                                     ) : (
                                         <Skeleton screenreaderText="Loading topology" />
                                     )}
@@ -71,7 +71,11 @@ function TopologyOverview({ topologyId, onSelect }) {
                 <Card>
                     <CardTitle>Rooms</CardTitle>
                     <CardBody>
-                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
+                        <RoomTable
+                            projectId={projectId}
+                            topologyId={topologyNumber}
+                            onSelect={(room) => onSelect('room', room)}
+                        />
                     </CardBody>
                 </Card>
             </GridItem>
@@ -80,7 +84,8 @@ function TopologyOverview({ topologyId, onSelect }) {
 }
 
 TopologyOverview.propTypes = {
-    topologyId: PropTypes.string,
+    projectId: PropTypes.number,
+    topologyNumber: PropTypes.number,
     onSelect: PropTypes.func,
 }