From 24147cba0f5723be3525e8f40d1954144841629b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 13:00:00 +0200
Subject: ui: Address technical dept in frontend

---
 opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js        | 7 ++++---
 .../opendc-web-ui/src/containers/app/map/TopologyContainer.js      | 5 ++---
 .../src/containers/app/map/controls/ScaleIndicatorContainer.js     | 4 ++--
 .../src/containers/app/map/controls/ZoomControlContainer.js        | 5 +++--
 opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js | 5 +++--
 5 files changed, 14 insertions(+), 12 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/app/map')

diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
index 9394238d..db9a2dd1 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/MapStage.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map'
 import MapStageComponent from '../../../components/app/map/MapStageComponent'
+import { useMapDimensions, useMapPosition } from '../../../store/hooks/map'
 
 const MapStage = () => {
-    const position = useSelector((state) => state.map.position)
-    const dimensions = useSelector((state) => state.map.dimensions)
+    const position = useMapPosition()
+    const dimensions = useMapDimensions()
     const dispatch = useDispatch()
     const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y))
     const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y))
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
index 612ca41c..30379490 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/TopologyContainer.js
@@ -1,11 +1,10 @@
 import React from 'react'
 import { useSelector } from 'react-redux'
 import TopologyGroup from '../../../components/app/map/groups/TopologyGroup'
+import { useTopology } from '../../../store/hooks/topology'
 
 const TopologyContainer = () => {
-    const topology = useSelector(
-        (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId]
-    )
+    const topology = useTopology()
     const interactionLevel = useSelector((state) => state.interactionLevel)
 
     return <TopologyGroup topology={topology} interactionLevel={interactionLevel} />
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
index e9d58b9f..03834188 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ScaleIndicatorContainer.js
@@ -1,9 +1,9 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent'
+import { useMapScale } from '../../../../store/hooks/map'
 
 const ScaleIndicatorContainer = (props) => {
-    const scale = useSelector((state) => state.map.scale)
+    const scale = useMapScale()
     return <ScaleIndicatorComponent {...props} scale={scale} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
index a18dfd5b..797bdf7f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/controls/ZoomControlContainer.js
@@ -1,11 +1,12 @@
 import React from 'react'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { zoomInOnCenter } from '../../../../actions/map'
 import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent'
+import { useMapScale } from '../../../../store/hooks/map'
 
 const ZoomControlContainer = () => {
     const dispatch = useDispatch()
-    const scale = useSelector((state) => state.map.scale)
+    const scale = useMapScale()
     return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} />
 }
 
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
index 5f701b4b..ccd0ea8f 100644
--- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
+++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/MapLayer.js
@@ -1,9 +1,10 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent'
+import { useMapPosition, useMapScale } from '../../../../store/hooks/map'
 
 const MapLayer = (props) => {
-    const { position, scale } = useSelector((state) => state.map)
+    const position = useMapPosition()
+    const scale = useMapScale()
     return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} />
 }
 
-- 
cgit v1.2.3