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

---
 .../app/map/layers/HoverLayerComponent.js          | 104 +++++++++------------
 1 file changed, 46 insertions(+), 58 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js')

diff --git a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
index bead87de..08d31dac 100644
--- a/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
+++ b/opendc-web/opendc-web-ui/src/components/app/map/layers/HoverLayerComponent.js
@@ -1,75 +1,63 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Layer } from 'react-konva'
 import HoverTile from '../elements/HoverTile'
 import { TILE_SIZE_IN_PIXELS } from '../MapConstants'
 
-class HoverLayerComponent extends React.Component {
-    static propTypes = {
-        mouseX: PropTypes.number.isRequired,
-        mouseY: PropTypes.number.isRequired,
-        mapPosition: PropTypes.object.isRequired,
-        mapScale: PropTypes.number.isRequired,
-        isEnabled: PropTypes.func.isRequired,
-        onClick: PropTypes.func.isRequired,
-    }
-
-    state = {
-        positionX: -1,
-        positionY: -1,
-        validity: false,
-    }
+function HoverLayerComponent({ mouseX, mouseY, mapPosition, mapScale, isEnabled, isValid, onClick, children }) {
+    const [pos, setPos] = useState([-1, -1])
+    const [x, y] = pos
+    const [valid, setValid] = useState(false)
 
-    componentDidUpdate() {
-        if (!this.props.isEnabled()) {
+    useEffect(() => {
+        if (!isEnabled()) {
             return
         }
 
-        const positionX = Math.floor(
-            (this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
-        )
-        const positionY = Math.floor(
-            (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
-        )
+        const positionX = Math.floor((mouseX - mapPosition.x) / (mapScale * TILE_SIZE_IN_PIXELS))
+        const positionY = Math.floor((mouseY - mapPosition.y) / (mapScale * TILE_SIZE_IN_PIXELS))
 
-        if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
-            this.setState({
-                positionX,
-                positionY,
-                validity: this.props.isValid(positionX, positionY),
-            })
+        if (positionX !== x || positionY !== y) {
+            setPos([positionX, positionY])
+            setValid(isValid(positionX, positionY))
         }
-    }
+    }, [mouseX, mouseY, mapPosition, mapScale])
 
-    render() {
-        if (!this.props.isEnabled()) {
-            return <Layer />
-        }
+    if (!isEnabled()) {
+        return <Layer />
+    }
 
-        const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x
-        const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y
+    const pixelX = mapScale * x * TILE_SIZE_IN_PIXELS + mapPosition.x
+    const pixelY = mapScale * y * TILE_SIZE_IN_PIXELS + mapPosition.y
+
+    return (
+        <Layer opacity={0.6}>
+            <HoverTile
+                pixelX={pixelX}
+                pixelY={pixelY}
+                scale={mapScale}
+                isValid={valid}
+                onClick={() => (valid ? onClick(x, y) : undefined)}
+            />
+            {children
+                ? React.cloneElement(children, {
+                      pixelX,
+                      pixelY,
+                      scale: mapScale,
+                  })
+                : undefined}
+        </Layer>
+    )
+}
 
-        return (
-            <Layer opacity={0.6}>
-                <HoverTile
-                    pixelX={pixelX}
-                    pixelY={pixelY}
-                    scale={this.props.mapScale}
-                    isValid={this.state.validity}
-                    onClick={() =>
-                        this.state.validity ? this.props.onClick(this.state.positionX, this.state.positionY) : undefined
-                    }
-                />
-                {this.props.children
-                    ? React.cloneElement(this.props.children, {
-                          pixelX,
-                          pixelY,
-                          scale: this.props.mapScale,
-                      })
-                    : undefined}
-            </Layer>
-        )
-    }
+HoverLayerComponent.propTypes = {
+    mouseX: PropTypes.number.isRequired,
+    mouseY: PropTypes.number.isRequired,
+    mapPosition: PropTypes.object.isRequired,
+    mapScale: PropTypes.number.isRequired,
+    isEnabled: PropTypes.func.isRequired,
+    isValid: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
 }
 
 export default HoverLayerComponent
-- 
cgit v1.2.3