From 54f424a18cc21a52ea518d40893218a07ab55989 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 15:04:22 +0200
Subject: feat(ui): Extract topology construction out of Sagas

This change updates the OpenDC frontend to perform the construction of
the topology directly in the reducers instead of performing the
mutations in Redux Sagas as side effects. This allows us to nicely map
actions to mutations in the reducers.
---
 .../src/components/topologies/sidebar/rack/DeleteRackContainer.js    | 5 +++--
 .../src/components/topologies/sidebar/rack/MachineListContainer.js   | 4 ++--
 .../src/components/topologies/sidebar/rack/RackNameContainer.js      | 2 +-
 .../src/components/topologies/sidebar/rack/RackSidebar.js            | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
index 80c6349a..0583a7a4 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/DeleteRackContainer.js
@@ -22,7 +22,7 @@
 
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
-import { useDispatch } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import TrashIcon from '@patternfly/react-icons/dist/js/icons/trash-icon'
 import { Button } from '@patternfly/react-core'
 import ConfirmationModal from '../../../util/modals/ConfirmationModal'
@@ -31,9 +31,10 @@ import { deleteRack } from '../../../../redux/actions/topology/rack'
 function DeleteRackContainer({ tileId }) {
     const dispatch = useDispatch()
     const [isVisible, setVisible] = useState(false)
+    const rackId = useSelector((state) => state.topology.tiles[tileId].rack)
     const callback = (isConfirmed) => {
         if (isConfirmed) {
-            dispatch(deleteRack(tileId))
+            dispatch(deleteRack(tileId, rackId))
         }
         setVisible(false)
     }
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
index 6fbff949..619bb4e2 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/MachineListContainer.js
@@ -28,8 +28,8 @@ import { goFromRackToMachine } from '../../../../redux/actions/interaction-level
 import { addMachine } from '../../../../redux/actions/topology/rack'
 
 function MachineListContainer({ tileId, ...props }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
-    const machines = useSelector((state) => rack.machines.map((id) => state.objects.machine[id]))
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
+    const machines = useSelector((state) => rack.machines.map((id) => state.topology.machines[id]))
     const machinesNull = useMemo(() => {
         const res = Array(rack.capacity).fill(null)
         for (const machine of machines) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
index 09d73af7..30f38cce 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackNameContainer.js
@@ -5,7 +5,7 @@ import NameComponent from '../NameComponent'
 import { editRackName } from '../../../../redux/actions/topology/rack'
 
 const RackNameContainer = ({ tileId }) => {
-    const { name: rackName, _id } = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const { name: rackName, _id } = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
     const dispatch = useDispatch()
     const callback = (name) => {
         if (name) {
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
index 3c9f152a..8f6ff135 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/sidebar/rack/RackSidebar.js
@@ -17,7 +17,7 @@ import {
 import { useSelector } from 'react-redux'
 
 function RackSidebar({ tileId }) {
-    const rack = useSelector((state) => state.objects.rack[state.objects.tile[tileId].rack])
+    const rack = useSelector((state) => state.topology.racks[state.topology.tiles[tileId].rack])
 
     return (
         <div className={sidebarContainer}>
-- 
cgit v1.2.3