From 0b3d0ba3193ebcdeadc6a4b0a192eeb06e9add29 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Sep 2022 11:04:34 +0200
Subject: fix(web/ui): Do not fail on stale Redux state

This change fixes an issue where switching between different topologies
would fail due to stale Redux state. We have updated the components to
take into account that ids may not exist in the Redux store.
---
 .../src/components/topologies/map/RoomContainer.js      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 65189891..191318ee 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -27,15 +27,16 @@ import { goFromBuildingToRoom } from '../../../redux/actions/interaction-level'
 import RoomGroup from './groups/RoomGroup'
 
 function RoomContainer({ roomId, ...props }) {
-    const state = useSelector((state) => {
-        return {
-            interactionLevel: state.interactionLevel,
-            currentRoomInConstruction: state.construction.currentRoomInConstruction,
-            room: state.topology.rooms[roomId],
-        }
-    })
+    const interactionLevel = useSelector((state) => state.interactionLevel)
+    const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction)
+    const room = useSelector((state) => state.topology.rooms[roomId])
     const dispatch = useDispatch()
-    return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+
+    if (!room) {
+        return null
+    }
+
+    return <RoomGroup {...props} interactionLevel={interactionLevel} currentRoomInConstruction={currentRoomInConstruction} room={room} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
 }
 
 RoomContainer.propTypes = {
-- 
cgit v1.2.3


From 78255fc6a1ef18759670682c1d90cee685315493 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 20 Sep 2022 12:17:34 +0200
Subject: fix(web/ui): Fix overflow of topology sidebar

This change fixes an issue with the web interface where the sidebar
would overflow due to the large number of rack slots that are displayed
in the sidebar.
---
 .../src/components/topologies/map/RoomContainer.js             | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
index 191318ee..76785bea 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/RoomContainer.js
@@ -36,7 +36,15 @@ function RoomContainer({ roomId, ...props }) {
         return null
     }
 
-    return <RoomGroup {...props} interactionLevel={interactionLevel} currentRoomInConstruction={currentRoomInConstruction} room={room} onClick={() => dispatch(goFromBuildingToRoom(roomId))} />
+    return (
+        <RoomGroup
+            {...props}
+            interactionLevel={interactionLevel}
+            currentRoomInConstruction={currentRoomInConstruction}
+            room={room}
+            onClick={() => dispatch(goFromBuildingToRoom(roomId))}
+        />
+    )
 }
 
 RoomContainer.propTypes = {
-- 
cgit v1.2.3