fix(ui): Load correct topology view

This change fixes an issue where the only the default topology view
would be shown to the user.

6 files changed, 27 insertions, 47 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 f95b18ed..c2753144 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 { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
 import React, { useEffect, useRef, useState } from 'react'
 import Head from 'next/head'
-import { openProjectSucceeded } from '../../../../redux/actions/projects'
 import { AppPage } from '../../../../components/AppPage'
 import {
     Breadcrumb,
@@ -43,6 +42,7 @@ import {
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import TopologyMap from '../../../../components/topologies/TopologyMap'
+import { openTopology } from '../../../../redux/actions/topologies'
 
 /**
  * Page that displays a datacenter topology.
@@ -55,10 +55,10 @@ function Topology() {
 
     const dispatch = useDispatch()
     useEffect(() => {
-        if (projectId) {
-            dispatch(openProjectSucceeded(projectId))
+        if (topologyId) {
+            dispatch(openTopology(topologyId))
         }
-    }, [projectId, topologyId, dispatch])
+    }, [topologyId, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
     const overviewRef = useRef(null)
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/projects.js b/opendc-web/opendc-web-ui/src/redux/actions/projects.js
deleted file mode 100644
index 4fe6f6a8..00000000
--- a/opendc-web/opendc-web-ui/src/redux/actions/projects.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export const OPEN_PROJECT_SUCCEEDED = 'OPEN_PROJECT_SUCCEEDED'
-
-export function openProjectSucceeded(id) {
-    return {
-        type: OPEN_PROJECT_SUCCEEDED,
-        id,
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
index 529e8663..4888c4da 100644
--- a/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
+++ b/opendc-web/opendc-web-ui/src/redux/actions/topologies.js
@@ -1,6 +1,14 @@
+export const OPEN_TOPOLOGY = 'OPEN_TOPOLOGY'
 export const ADD_TOPOLOGY = 'ADD_TOPOLOGY'
 export const STORE_TOPOLOGY = 'STORE_TOPOLOGY'
 
+export function openTopology(id) {
+    return {
+        type: OPEN_TOPOLOGY,
+        id,
+    }
+}
+
 export function addTopology(projectId, name, duplicateId) {
     return {
         type: ADD_TOPOLOGY,
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/index.js b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
index 318f0afb..9ddc564d 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/index.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/index.js
@@ -1,5 +1,4 @@
 import { takeEvery } from 'redux-saga/effects'
-import { OPEN_PROJECT_SUCCEEDED } from '../actions/projects'
 import {
     ADD_TILE,
     CANCEL_NEW_ROOM_CONSTRUCTION,
@@ -9,7 +8,6 @@ import {
 import { ADD_UNIT, DELETE_MACHINE, DELETE_UNIT } from '../actions/topology/machine'
 import { ADD_MACHINE, DELETE_RACK, EDIT_RACK_NAME } from '../actions/topology/rack'
 import { ADD_RACK_TO_TILE, DELETE_ROOM, EDIT_ROOM_NAME } from '../actions/topology/room'
-import { onOpenProjectSucceeded } from './projects'
 import {
     onAddMachine,
     onAddRackToTile,
@@ -25,13 +23,14 @@ import {
     onEditRackName,
     onEditRoomName,
     onStartNewRoomConstruction,
+    onOpenTopology,
 } from './topology'
-import { ADD_TOPOLOGY } from '../actions/topologies'
+import { ADD_TOPOLOGY, OPEN_TOPOLOGY } from '../actions/topologies'
 import { onAddPrefab } from './prefabs'
 import { ADD_PREFAB } from '../actions/prefabs'
 
 export default function* rootSaga() {
-    yield takeEvery(OPEN_PROJECT_SUCCEEDED, onOpenProjectSucceeded)
+    yield takeEvery(OPEN_TOPOLOGY, onOpenTopology)
 
     yield takeEvery(ADD_TOPOLOGY, onAddTopology)
     yield takeEvery(START_NEW_ROOM_CONSTRUCTION, onStartNewRoomConstruction)
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js b/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
deleted file mode 100644
index 5809d4d2..00000000
--- a/opendc-web/opendc-web-ui/src/redux/sagas/projects.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { fetchAndStoreAllTopologiesOfProject } from './topology'
-
-export function* onOpenProjectSucceeded(action) {
-    try {
-        yield fetchAndStoreAllTopologiesOfProject(action.id, true)
-    } catch (error) {
-        console.error(error)
-    }
-}
diff --git a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
index 2d61643b..fb6f7f0d 100644
--- a/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
+++ b/opendc-web/opendc-web-ui/src/redux/sagas/topology.js
@@ -23,28 +23,9 @@ import { uuid } from 'uuidv4'
 import { fetchQuery, mutate } from './query'
 
 /**
- * Fetches all topologies of the project with the specified identifier.
- */
-export function* fetchAndStoreAllTopologiesOfProject(projectId, setTopology = false) {
-    try {
-        const project = yield fetchQuery(['projects', projectId])
-
-        for (const id of project.topologyIds) {
-            yield fetchAndStoreTopology(id)
-        }
-
-        if (setTopology) {
-            yield put(setCurrentTopology(project.topologyIds[0]))
-        }
-    } catch (error) {
-        console.error(error)
-    }
-}
-
-/**
  * Fetches and normalizes the topology with the specified identifier.
  */
-export function* fetchAndStoreTopology(id) {
+function* fetchAndStoreTopology(id) {
     let topology = yield select((state) => state.objects.topology[id])
     if (!topology) {
         const newTopology = yield fetchQuery(['topologies', id])
@@ -58,7 +39,7 @@ export function* fetchAndStoreTopology(id) {
 /**
  * Synchronize the topology with the specified identifier with the server.
  */
-export function* updateTopologyOnServer(id) {
+function* updateTopologyOnServer(id) {
     const topology = yield denormalizeTopology(id)
     yield mutate('updateTopology', topology)
 }
@@ -66,12 +47,21 @@ export function* updateTopologyOnServer(id) {
 /**
  * Denormalizes the topology representation in order to be stored on the server.
  */
-export function* denormalizeTopology(id) {
+function* denormalizeTopology(id) {
     const objects = yield select((state) => state.objects)
     const topology = objects.topology[id]
     return denormalize(topology, Topology, objects)
 }
 
+export function* onOpenTopology({ id }) {
+    try {
+        yield fetchAndStoreTopology(id)
+        yield put(setCurrentTopology(id))
+    } catch (error) {
+        console.error(error)
+    }
+}
+
 export function* onAddTopology({ projectId, duplicateId, name }) {
     try {
         let topologyToBeCreated