From 1ce8bf170cda2afab334cd330325cd4fbb97dab4 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 11:46:57 +0200 Subject: ui: Split App container into separate components This change splits the App container into separate pages, as a starting point for removing much of the unnecessary state from Redux. --- .../opendc-web-ui/src/components/app/map/MapStageComponent.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/app/map') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js index 07b2d8f0..a8e156ec 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js @@ -1,3 +1,4 @@ +/* eslint-disable react-hooks/exhaustive-deps */ import PropTypes from 'prop-types' import React, { useEffect, useRef, useState } from 'react' import { HotKeys } from 'react-hotkeys' @@ -37,10 +38,12 @@ function MapStageComponent({ setPos([mousePos.x, mousePos.y]) } - useEffect(() => { - const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT) - const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) + const updateDimensions = () => setMapDimensions(window.innerWidth, window.innerHeight - NAVBAR_HEIGHT) + const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) + // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands + // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => { updateDimensions() window.addEventListener('resize', updateDimensions) @@ -57,7 +60,7 @@ function MapStageComponent({ window.removeEventListener('resize', updateDimensions) window.removeEventListener('wheel', updateScale) } - }, [x, y, setMapDimensions, zoomInOnPosition]) + }, []) const store = useStore() -- cgit v1.2.3 From 02a2f0f89cb1f39a5f8856bca1971a4e1b12374f Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Wed, 7 Jul 2021 20:13:30 +0200 Subject: ui: Use React Query defaults to reduce duplication --- opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/app/map') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js index a8e156ec..c3177fe1 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/MapStageComponent.js @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import PropTypes from 'prop-types' import React, { useEffect, useRef, useState } from 'react' import { HotKeys } from 'react-hotkeys' @@ -42,7 +41,6 @@ function MapStageComponent({ const updateScale = (e) => zoomInOnPosition(e.deltaY < 0, x, y) // We explicitly do not specify any dependencies to prevent infinitely dispatching updateDimensions commands - // eslint-disable-next-line react-hooks/exhaustive-deps useEffect(() => { updateDimensions() @@ -60,7 +58,7 @@ function MapStageComponent({ window.removeEventListener('resize', updateDimensions) window.removeEventListener('wheel', updateScale) } - }, []) + }, []) // eslint-disable-line react-hooks/exhaustive-deps const store = useStore() -- cgit v1.2.3 From 29196842447d841d2e21462adcfc8c2ed1d851ad Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 8 Jul 2021 13:15:28 +0200 Subject: ui: Simplify normalization of topology This change updates the OpenDC frontend to use the normalizr library for normalizing the user topology. --- .../opendc-web-ui/src/components/app/map/groups/RoomGroup.js | 8 ++++---- .../opendc-web-ui/src/components/app/map/groups/TileGroup.js | 2 +- .../opendc-web-ui/src/components/app/map/groups/TopologyGroup.js | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/components/app/map') diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js index e67d54fc..42d20ff1 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/RoomGroup.js @@ -10,7 +10,7 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick if (currentRoomInConstruction === room._id) { return ( - {room.tileIds.map((tileId) => ( + {room.tiles.map((tileId) => ( ))} @@ -25,16 +25,16 @@ const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick interactionLevel.roomId === room._id ) { return [ - room.tileIds + room.tiles .filter((tileId) => tileId !== interactionLevel.tileId) .map((tileId) => ), , - room.tileIds + room.tiles .filter((tileId) => tileId === interactionLevel.tileId) .map((tileId) => ), ] } else { - return room.tileIds.map((tileId) => ) + return room.tiles.map((tileId) => ) } })()} diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js index 2a108b93..ce5e4a6b 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TileGroup.js @@ -8,7 +8,7 @@ import RoomTile from '../elements/RoomTile' const TileGroup = ({ tile, newTile, onClick }) => { let tileObject - if (tile.rackId) { + if (tile.rack) { tileObject = } else { tileObject = null diff --git a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js index 57107768..d4c6db7d 100644 --- a/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js +++ b/opendc-web/opendc-web-ui/src/components/app/map/groups/TopologyGroup.js @@ -12,7 +12,7 @@ const TopologyGroup = ({ topology, interactionLevel }) => { if (interactionLevel.mode === 'BUILDING') { return ( - {topology.roomIds.map((roomId) => ( + {topology.rooms.map((roomId) => ( ))} @@ -21,13 +21,13 @@ const TopologyGroup = ({ topology, interactionLevel }) => { return ( - {topology.roomIds + {topology.rooms .filter((roomId) => roomId !== interactionLevel.roomId) .map((roomId) => ( ))} {interactionLevel.mode === 'ROOM' ? : null} - {topology.roomIds + {topology.rooms .filter((roomId) => roomId === interactionLevel.roomId) .map((roomId) => ( -- cgit v1.2.3