diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/containers/app')
42 files changed, 472 insertions, 508 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js index 9e4a6969..651b3459 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/GrayContainer.js @@ -1,13 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { goDownOneInteractionLevel } from '../../../actions/interaction-level' import GrayLayer from '../../../components/app/map/elements/GrayLayer' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()), - } +const GrayContainer = () => { + const dispatch = useDispatch() + const onClick = () => dispatch(goDownOneInteractionLevel()) + return <GrayLayer onClick={onClick} /> } -const GrayContainer = connect(undefined, mapDispatchToProps)(GrayLayer) - export default GrayContainer 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 23c920b6..61d123e8 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,22 +1,23 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { setMapDimensions, setMapPositionWithBoundsCheck, zoomInOnPosition } from '../../../actions/map' import MapStageComponent from '../../../components/app/map/MapStageComponent' -const mapStateToProps = (state) => { - return { - mapPosition: state.map.position, - mapDimensions: state.map.dimensions, - } +const MapStage = () => { + const { position, dimensions } = useSelector((state) => state.map) + const dispatch = useDispatch() + const zoomInOnPositionA = (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y)) + const setMapPositionWithBoundsCheckA = (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y)) + const setMapDimensionsA = (width, height) => dispatch(setMapDimensions(width, height)) + return ( + <MapStageComponent + mapPosition={position} + mapDimensions={dimensions} + zoomInOnPosition={zoomInOnPositionA} + setMapPositionWithBoundsCheck={setMapPositionWithBoundsCheckA} + setMapDimensions={setMapDimensionsA} + /> + ) } -const mapDispatchToProps = (dispatch) => { - return { - zoomInOnPosition: (zoomIn, x, y) => dispatch(zoomInOnPosition(zoomIn, x, y)), - setMapPositionWithBoundsCheck: (x, y) => dispatch(setMapPositionWithBoundsCheck(x, y)), - setMapDimensions: (width, height) => dispatch(setMapDimensions(width, height)), - } -} - -const MapStage = connect(mapStateToProps, mapDispatchToProps)(MapStageComponent) - export default MapStage diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js index 40077608..e5af5117 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackContainer.js @@ -1,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import RackGroup from '../../../components/app/map/groups/RackGroup' -const mapStateToProps = (state) => { - return { - interactionLevel: state.interactionLevel, - } +const RackContainer = ({ tile }) => { + const interactionLevel = useSelector((state) => state.interactionLevel) + return <RackGroup interactionLeve={interactionLevel} tile={tile} /> } -const RackContainer = connect(mapStateToProps)(RackGroup) - export default RackContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js index 53746271..00d3152f 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackEnergyFillContainer.js @@ -1,26 +1,32 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import RackFillBar from '../../../components/app/map/elements/RackFillBar' -const mapStateToProps = (state, ownProps) => { - let energyConsumptionTotal = 0 - const rack = state.objects.rack[state.objects.tile[ownProps.tileId].rackId] - const machineIds = rack.machineIds - machineIds.forEach((machineId) => { - if (machineId !== null) { - const machine = state.objects.machine[machineId] - machine.cpuIds.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW)) - machine.gpuIds.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW)) - machine.memoryIds.forEach((id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW)) - machine.storageIds.forEach((id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW)) +const RackSpaceFillContainer = (props) => { + const state = useSelector((state) => { + let energyConsumptionTotal = 0 + const rack = state.objects.rack[state.objects.tile[props.tileId].rackId] + const machineIds = rack.machineIds + machineIds.forEach((machineId) => { + if (machineId !== null) { + const machine = state.objects.machine[machineId] + machine.cpuIds.forEach((id) => (energyConsumptionTotal += state.objects.cpu[id].energyConsumptionW)) + machine.gpuIds.forEach((id) => (energyConsumptionTotal += state.objects.gpu[id].energyConsumptionW)) + machine.memoryIds.forEach( + (id) => (energyConsumptionTotal += state.objects.memory[id].energyConsumptionW) + ) + machine.storageIds.forEach( + (id) => (energyConsumptionTotal += state.objects.storage[id].energyConsumptionW) + ) + } + }) + + return { + type: 'energy', + fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW), } }) - - return { - type: 'energy', - fillFraction: Math.min(1, energyConsumptionTotal / rack.powerCapacityW), - } + return <RackFillBar {...props} {...state} /> } -const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar) - export default RackSpaceFillContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js index 0509a5a5..dc5119fd 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/RackSpaceFillContainer.js @@ -1,14 +1,16 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import RackFillBar from '../../../components/app/map/elements/RackFillBar' -const mapStateToProps = (state, ownProps) => { - const machineIds = state.objects.rack[state.objects.tile[ownProps.tileId].rackId].machineIds - return { - type: 'space', - fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length, - } +const RackSpaceFillContainer = (props) => { + const state = useSelector((state) => { + const machineIds = state.objects.rack[state.objects.tile[props.tileId].rackId].machineIds + return { + type: 'space', + fillFraction: machineIds.filter((id) => id !== null).length / machineIds.length, + } + }) + return <RackFillBar {...props} {...state} /> } -const RackSpaceFillContainer = connect(mapStateToProps)(RackFillBar) - export default RackSpaceFillContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js index 91bf4e5d..877233fc 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/RoomContainer.js @@ -1,21 +1,18 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { goFromBuildingToRoom } from '../../../actions/interaction-level' import RoomGroup from '../../../components/app/map/groups/RoomGroup' -const mapStateToProps = (state, ownProps) => { - return { - interactionLevel: state.interactionLevel, - currentRoomInConstruction: state.construction.currentRoomInConstruction, - room: state.objects.room[ownProps.roomId], - } +const RoomContainer = (props) => { + const state = useSelector((state) => { + return { + interactionLevel: state.interactionLevel, + currentRoomInConstruction: state.construction.currentRoomInConstruction, + room: state.objects.room[props.roomId], + } + }) + const dispatch = useDispatch() + return <RoomGroup {...props} {...state} onClick={() => dispatch(goFromBuildingToRoom(props.roomId))} /> } -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onClick: () => dispatch(goFromBuildingToRoom(ownProps.roomId)), - } -} - -const RoomContainer = connect(mapStateToProps, mapDispatchToProps)(RoomGroup) - export default RoomContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js index 04d6c8d6..ad7301a7 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/TileContainer.js @@ -1,26 +1,19 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { goFromRoomToRack } from '../../../actions/interaction-level' import TileGroup from '../../../components/app/map/groups/TileGroup' -const mapStateToProps = (state, ownProps) => { - const tile = state.objects.tile[ownProps.tileId] +const TileContainer = (props) => { + const interactionLevel = useSelector((state) => state.interactionLevel) + const tile = useSelector((state) => state.objects.tile[props.tileId]) - return { - interactionLevel: state.interactionLevel, - tile, + const dispatch = useDispatch() + const onClick = (tile) => { + if (tile.rackId) { + dispatch(goFromRoomToRack(tile._id)) + } } + return <TileGroup {...props} onClick={onClick} tile={tile} interactionLevel={interactionLevel} /> } -const mapDispatchToProps = (dispatch) => { - return { - onClick: (tile) => { - if (tile.rackId) { - dispatch(goFromRoomToRack(tile._id)) - } - }, - } -} - -const TileContainer = connect(mapStateToProps, mapDispatchToProps)(TileGroup) - export default TileContainer 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 de43a151..612ca41c 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,17 +1,14 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import TopologyGroup from '../../../components/app/map/groups/TopologyGroup' -const mapStateToProps = (state) => { - if (state.currentTopologyId === '-1') { - return {} - } +const TopologyContainer = () => { + const topology = useSelector( + (state) => state.currentTopologyId !== '-1' && state.objects.topology[state.currentTopologyId] + ) + const interactionLevel = useSelector((state) => state.interactionLevel) - return { - topology: state.objects.topology[state.currentTopologyId], - interactionLevel: state.interactionLevel, - } + return <TopologyGroup topology={topology} interactionLevel={interactionLevel} /> } -const TopologyContainer = connect(mapStateToProps)(TopologyGroup) - export default TopologyContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js index 67f8a242..2a469860 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/WallContainer.js @@ -1,12 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import WallGroup from '../../../components/app/map/groups/WallGroup' -const mapStateToProps = (state, ownProps) => { - return { - tiles: state.objects.room[ownProps.roomId].tileIds.map((tileId) => state.objects.tile[tileId]), - } +const WallContainer = (props) => { + const tiles = useSelector((state) => + state.objects.room[props.roomId].tileIds.map((tileId) => state.objects.tile[tileId]) + ) + return <WallGroup {...props} tiles={tiles} /> } -const WallContainer = connect(mapStateToProps)(WallGroup) - export default WallContainer 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 fa3b9d22..e9d58b9f 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,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import ScaleIndicatorComponent from '../../../../components/app/map/controls/ScaleIndicatorComponent' -const mapStateToProps = (state) => { - return { - scale: state.map.scale, - } +const ScaleIndicatorContainer = (props) => { + const scale = useSelector((state) => state.map.scale) + return <ScaleIndicatorComponent {...props} scale={scale} /> } -const ScaleIndicatorContainer = connect(mapStateToProps)(ScaleIndicatorComponent) - export default ScaleIndicatorContainer 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 ddc68cc7..a18dfd5b 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,19 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { zoomInOnCenter } from '../../../../actions/map' import ZoomControlComponent from '../../../../components/app/map/controls/ZoomControlComponent' -const mapStateToProps = (state) => { - return { - mapScale: state.map.scale, - } +const ZoomControlContainer = () => { + const dispatch = useDispatch() + const scale = useSelector((state) => state.map.scale) + return <ZoomControlComponent mapScale={scale} zoomInOnCenter={(zoomIn) => dispatch(zoomInOnCenter(zoomIn))} /> } -const mapDispatchToProps = (dispatch) => { - return { - zoomInOnCenter: (zoomIn) => dispatch(zoomInOnCenter(zoomIn)), - } -} - -const ZoomControlContainer = connect(mapStateToProps, mapDispatchToProps)(ZoomControlComponent) - export default ZoomControlContainer 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 8596cb9c..5f701b4b 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,13 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import MapLayerComponent from '../../../../components/app/map/layers/MapLayerComponent' -const mapStateToProps = (state) => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale, - } +const MapLayer = (props) => { + const { position, scale } = useSelector((state) => state.map) + return <MapLayerComponent {...props} mapPosition={position} mapScale={scale} /> } -const MapLayer = connect(mapStateToProps)(MapLayerComponent) - export default MapLayer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js index a4927862..cefdf35c 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/ObjectHoverLayer.js @@ -1,33 +1,32 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { addRackToTile } from '../../../../actions/topology/room' import ObjectHoverLayerComponent from '../../../../components/app/map/layers/ObjectHoverLayerComponent' import { findTileWithPosition } from '../../../../util/tile-calculations' -const mapStateToProps = (state) => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale, - isEnabled: () => state.construction.inRackConstructionMode, - isValid: (x, y) => { - if (state.interactionLevel.mode !== 'ROOM') { - return false - } +const ObjectHoverLayer = (props) => { + const state = useSelector((state) => { + return { + mapPosition: state.map.position, + mapScale: state.map.scale, + isEnabled: () => state.construction.inRackConstructionMode, + isValid: (x, y) => { + if (state.interactionLevel.mode !== 'ROOM') { + return false + } - const currentRoom = state.objects.room[state.interactionLevel.roomId] - const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId]) - const tile = findTileWithPosition(tiles, x, y) + const currentRoom = state.objects.room[state.interactionLevel.roomId] + const tiles = currentRoom.tileIds.map((tileId) => state.objects.tile[tileId]) + const tile = findTileWithPosition(tiles, x, y) - return !(tile === null || tile.rackId) - }, - } -} + return !(tile === null || tile.rackId) + }, + } + }) -const mapDispatchToProps = (dispatch) => { - return { - onClick: (x, y) => dispatch(addRackToTile(x, y)), - } + const dispatch = useDispatch() + const onClick = (x, y) => dispatch(addRackToTile(x, y)) + return <ObjectHoverLayerComponent {...props} {...state} onClick={onClick} /> } -const ObjectHoverLayer = connect(mapStateToProps, mapDispatchToProps)(ObjectHoverLayerComponent) - export default ObjectHoverLayer diff --git a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js index 66404f9e..2717d890 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/map/layers/RoomHoverLayer.js @@ -1,4 +1,5 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { toggleTileAtLocation } from '../../../../actions/topology/building' import RoomHoverLayerComponent from '../../../../components/app/map/layers/RoomHoverLayerComponent' import { @@ -7,40 +8,38 @@ import { findPositionInRooms, } from '../../../../util/tile-calculations' -const mapStateToProps = (state) => { - return { - mapPosition: state.map.position, - mapScale: state.map.scale, - isEnabled: () => state.construction.currentRoomInConstruction !== '-1', - isValid: (x, y) => { - const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction]) - const oldRooms = Object.keys(state.objects.room) - .map((id) => Object.assign({}, state.objects.room[id])) - .filter( - (room) => - state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 && - room._id !== state.construction.currentRoomInConstruction - ) +const RoomHoverLayer = (props) => { + const dispatch = useDispatch() + const onClick = (x, y) => dispatch(toggleTileAtLocation(x, y)) - ;[...oldRooms, newRoom].forEach((room) => { - room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId]) - }) - if (newRoom.tileIds.length === 0) { - return findPositionInRooms(oldRooms, x, y) === -1 - } + const state = useSelector((state) => { + return { + mapPosition: state.map.position, + mapScale: state.map.scale, + isEnabled: () => state.construction.currentRoomInConstruction !== '-1', + isValid: (x, y) => { + const newRoom = Object.assign({}, state.objects.room[state.construction.currentRoomInConstruction]) + const oldRooms = Object.keys(state.objects.room) + .map((id) => Object.assign({}, state.objects.room[id])) + .filter( + (room) => + state.objects.topology[state.currentTopologyId].roomIds.indexOf(room._id) !== -1 && + room._id !== state.construction.currentRoomInConstruction + ) - const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles) - return findPositionInPositions(validNextPositions, x, y) !== -1 - }, - } -} + ;[...oldRooms, newRoom].forEach((room) => { + room.tiles = room.tileIds.map((tileId) => state.objects.tile[tileId]) + }) + if (newRoom.tileIds.length === 0) { + return findPositionInRooms(oldRooms, x, y) === -1 + } -const mapDispatchToProps = (dispatch) => { - return { - onClick: (x, y) => dispatch(toggleTileAtLocation(x, y)), - } + const validNextPositions = deriveValidNextTilePositions(oldRooms, newRoom.tiles) + return findPositionInPositions(validNextPositions, x, y) !== -1 + }, + } + }) + return <RoomHoverLayerComponent onClick={onClick} {...props} {...state} /> } -const RoomHoverLayer = connect(mapStateToProps, mapDispatchToProps)(RoomHoverLayerComponent) - export default RoomHoverLayer diff --git a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js index 4b430e54..e60abe18 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/results/PortfolioResultsContainer.js @@ -1,28 +1,31 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import PortfolioResultsComponent from '../../../components/app/results/PortfolioResultsComponent' -const mapStateToProps = (state) => { - if ( - state.currentPortfolioId === '-1' || - !state.objects.portfolio[state.currentPortfolioId] || - state.objects.portfolio[state.currentPortfolioId].scenarioIds - .map((scenarioId) => state.objects.scenario[scenarioId]) - .some((s) => s === undefined) - ) { +const PortfolioResultsContainer = (props) => { + const { scenarios, portfolio } = useSelector((state) => { + if ( + state.currentPortfolioId === '-1' || + !state.objects.portfolio[state.currentPortfolioId] || + state.objects.portfolio[state.currentPortfolioId].scenarioIds + .map((scenarioId) => state.objects.scenario[scenarioId]) + .some((s) => s === undefined) + ) { + return { + portfolio: undefined, + scenarios: [], + } + } + return { - portfolio: undefined, - scenarios: [], + portfolio: state.objects.portfolio[state.currentPortfolioId], + scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map( + (scenarioId) => state.objects.scenario[scenarioId] + ), } - } + }) - return { - portfolio: state.objects.portfolio[state.currentPortfolioId], - scenarios: state.objects.portfolio[state.currentPortfolioId].scenarioIds.map( - (scenarioId) => state.objects.scenario[scenarioId] - ), - } + return <PortfolioResultsComponent {...props} scenarios={scenarios} portfolio={portfolio} /> } -const PortfolioResultsContainer = connect(mapStateToProps)(PortfolioResultsComponent) - export default PortfolioResultsContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js index b32c8b1d..86f465b6 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/PortfolioListContainer.js @@ -1,28 +1,31 @@ -import { connect } from 'react-redux' -import { withRouter } from 'react-router-dom' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' +import { useHistory } from 'react-router-dom' import PortfolioListComponent from '../../../../components/app/sidebars/project/PortfolioListComponent' import { deletePortfolio, setCurrentPortfolio } from '../../../../actions/portfolios' import { openNewPortfolioModal } from '../../../../actions/modals/portfolios' import { getState } from '../../../../util/state-utils' import { setCurrentTopology } from '../../../../actions/topology/building' -const mapStateToProps = (state) => { - let portfolios = state.objects.project[state.currentProjectId] - ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t]) - : [] - if (portfolios.filter((t) => !t).length > 0) { - portfolios = [] - } +const PortfolioListContainer = (props) => { + const state = useSelector((state) => { + let portfolios = state.objects.project[state.currentProjectId] + ? state.objects.project[state.currentProjectId].portfolioIds.map((t) => state.objects.portfolio[t]) + : [] + if (portfolios.filter((t) => !t).length > 0) { + portfolios = [] + } - return { - currentProjectId: state.currentProjectId, - currentPortfolioId: state.currentPortfolioId, - portfolios, - } -} + return { + currentProjectId: state.currentProjectId, + currentPortfolioId: state.currentPortfolioId, + portfolios, + } + }) -const mapDispatchToProps = (dispatch, ownProps) => { - return { + const dispatch = useDispatch() + const history = useHistory() + const actions = { onNewPortfolio: () => { dispatch(openNewPortfolioModal()) }, @@ -34,12 +37,11 @@ const mapDispatchToProps = (dispatch, ownProps) => { const state = await getState(dispatch) dispatch(deletePortfolio(id)) dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - ownProps.history.push(`/projects/${state.currentProjectId}`) + history.push(`/projects/${state.currentProjectId}`) } }, } + return <PortfolioListComponent {...props} {...state} {...actions} /> } -const PortfolioListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(PortfolioListComponent)) - export default PortfolioListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js index 49001099..35e6c52b 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ProjectSidebarContainer.js @@ -1,10 +1,11 @@ import React from 'react' -import { withRouter } from 'react-router-dom' +import { useLocation } from 'react-router-dom' import ProjectSidebarComponent from '../../../../components/app/sidebars/project/ProjectSidebarComponent' import { isCollapsible } from '../../../../util/sidebar-space' -const ProjectSidebarContainer = withRouter(({ location, ...props }) => ( - <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} /> -)) +const ProjectSidebarContainer = (props) => { + const location = useLocation() + return <ProjectSidebarComponent collapsible={isCollapsible(location)} {...props} /> +} export default ProjectSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js index 415e2792..18d0735e 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/ScenarioListContainer.js @@ -1,41 +1,49 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import ScenarioListComponent from '../../../../components/app/sidebars/project/ScenarioListComponent' import { openNewScenarioModal } from '../../../../actions/modals/scenarios' import { deleteScenario, setCurrentScenario } from '../../../../actions/scenarios' import { setCurrentPortfolio } from '../../../../actions/portfolios' -const mapStateToProps = (state, ownProps) => { - let scenarios = state.objects.portfolio[ownProps.portfolioId] - ? state.objects.portfolio[ownProps.portfolioId].scenarioIds.map((t) => state.objects.scenario[t]) - : [] - if (scenarios.filter((t) => !t).length > 0) { - scenarios = [] - } +const ScenarioListContainer = ({ portfolioId, children }) => { + const currentProjectId = useSelector((state) => state.currentProjectId) + const currentScenarioId = useSelector((state) => state.currentScenarioId) + const scenarios = useSelector((state) => { + let scenarios = state.objects.portfolio[portfolioId] + ? state.objects.portfolio[portfolioId].scenarioIds.map((t) => state.objects.scenario[t]) + : [] + if (scenarios.filter((t) => !t).length > 0) { + scenarios = [] + } - return { - currentProjectId: state.currentProjectId, - currentScenarioId: state.currentScenarioId, - scenarios, - } -} + return scenarios + }) -const mapDispatchToProps = (dispatch) => { - return { - onNewScenario: (currentPortfolioId) => { - dispatch(setCurrentPortfolio(currentPortfolioId)) - dispatch(openNewScenarioModal()) - }, - onChooseScenario: (portfolioId, scenarioId) => { - dispatch(setCurrentScenario(portfolioId, scenarioId)) - }, - onDeleteScenario: (id) => { - if (id) { - dispatch(deleteScenario(id)) - } - }, + const dispatch = useDispatch() + const onNewScenario = (currentPortfolioId) => { + dispatch(setCurrentPortfolio(currentPortfolioId)) + dispatch(openNewScenarioModal()) + } + const onChooseScenario = (portfolioId, scenarioId) => { + dispatch(setCurrentScenario(portfolioId, scenarioId)) + } + const onDeleteScenario = (id) => { + if (id) { + dispatch(deleteScenario(id)) + } } -} -const ScenarioListContainer = connect(mapStateToProps, mapDispatchToProps)(ScenarioListComponent) + return ( + <ScenarioListComponent + portfolioId={portfolioId} + currentProjectId={currentProjectId} + currentScenarioId={currentScenarioId} + scenarios={scenarios} + onNewScenario={onNewScenario} + onChooseScenario={onChooseScenario} + onDeleteScenario={onDeleteScenario} + /> + ) +} export default ScenarioListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js index e1de18f9..954284a6 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/project/TopologyListContainer.js @@ -1,46 +1,54 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import TopologyListComponent from '../../../../components/app/sidebars/project/TopologyListComponent' import { setCurrentTopology } from '../../../../actions/topology/building' import { openNewTopologyModal } from '../../../../actions/modals/topology' -import { withRouter } from 'react-router-dom' +import { useHistory } from 'react-router-dom' import { getState } from '../../../../util/state-utils' import { deleteTopology } from '../../../../actions/topologies' -const mapStateToProps = (state) => { - let topologies = state.objects.project[state.currentProjectId] - ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) - : [] - if (topologies.filter((t) => !t).length > 0) { - topologies = [] - } +const TopologyListContainer = () => { + const dispatch = useDispatch() + const history = useHistory() - return { - currentTopologyId: state.currentTopologyId, - topologies, - } -} + const topologies = useSelector((state) => { + let topologies = state.objects.project[state.currentProjectId] + ? state.objects.project[state.currentProjectId].topologyIds.map((t) => state.objects.topology[t]) + : [] + if (topologies.filter((t) => !t).length > 0) { + topologies = [] + } + + return topologies + }) + const currentTopologyId = useSelector((state) => state.currentTopologyId) -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onChooseTopology: async (id) => { - dispatch(setCurrentTopology(id)) + const onChooseTopology = async (id) => { + dispatch(setCurrentTopology(id)) + const state = await getState(dispatch) + history.push(`/projects/${state.currentProjectId}`) + } + const onNewTopology = () => { + dispatch(openNewTopologyModal()) + } + const onDeleteTopology = async (id) => { + if (id) { const state = await getState(dispatch) - ownProps.history.push(`/projects/${state.currentProjectId}`) - }, - onNewTopology: () => { - dispatch(openNewTopologyModal()) - }, - onDeleteTopology: async (id) => { - if (id) { - const state = await getState(dispatch) - dispatch(deleteTopology(id)) - dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) - ownProps.history.push(`/projects/${state.currentProjectId}`) - } - }, + dispatch(deleteTopology(id)) + dispatch(setCurrentTopology(state.objects.project[state.currentProjectId].topologyIds[0])) + history.push(`/projects/${state.currentProjectId}`) + } } -} -const TopologyListContainer = withRouter(connect(mapStateToProps, mapDispatchToProps)(TopologyListComponent)) + return ( + <TopologyListComponent + topologies={topologies} + currentTopologyId={currentTopologyId} + onChooseTopology={onChooseTopology} + onNewTopology={onNewTopology} + onDeleteTopology={onDeleteTopology} + /> + ) +} export default TopologyListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js index fe7c02fd..42c81c65 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/TopologySidebarContainer.js @@ -1,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import TopologySidebarComponent from '../../../../components/app/sidebars/topology/TopologySidebarComponent' -const mapStateToProps = (state) => { - return { - interactionLevel: state.interactionLevel, - } +const TopologySidebarContainer = (props) => { + const interactionLevel = useSelector((state) => state.interactionLevel) + return <TopologySidebarComponent {...props} interactionLevel={interactionLevel} /> } -const TopologySidebarContainer = connect(mapStateToProps)(TopologySidebarComponent) - export default TopologySidebarContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js index ea9e9e60..ea36539c 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/building/NewRoomConstructionContainer.js @@ -1,4 +1,5 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { cancelNewRoomConstruction, finishNewRoomConstruction, @@ -6,20 +7,22 @@ import { } from '../../../../../actions/topology/building' import StartNewRoomConstructionComponent from '../../../../../components/app/sidebars/topology/building/NewRoomConstructionComponent' -const mapStateToProps = (state) => { - return { - currentRoomInConstruction: state.construction.currentRoomInConstruction, - } -} +const NewRoomConstructionButton = (props) => { + const currentRoomInConstruction = useSelector((state) => state.construction.currentRoomInConstruction) -const mapDispatchToProps = (dispatch) => { - return { + const dispatch = useDispatch() + const actions = { onStart: () => dispatch(startNewRoomConstruction()), onFinish: () => dispatch(finishNewRoomConstruction()), onCancel: () => dispatch(cancelNewRoomConstruction()), } + return ( + <StartNewRoomConstructionComponent + {...props} + {...actions} + currentRoomInConstruction={currentRoomInConstruction} + /> + ) } -const NewRoomConstructionButton = connect(mapStateToProps, mapDispatchToProps)(StartNewRoomConstructionComponent) - export default NewRoomConstructionButton diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js index 24287ab0..46862472 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/BackToRackContainer.js @@ -1,13 +1,11 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToRackComponent from '../../../../../components/app/sidebars/topology/machine/BackToRackComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()), - } +const BackToRackContainer = (props) => { + const dispatch = useDispatch() + return <BackToRackComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} /> } -const BackToRackContainer = connect(undefined, mapDispatchToProps)(BackToRackComponent) - export default BackToRackContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js index 65e683e6..1510a436 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/DeleteMachineContainer.js @@ -1,13 +1,11 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { openDeleteMachineModal } from '../../../../../actions/modals/topology' import DeleteMachineComponent from '../../../../../components/app/sidebars/topology/machine/DeleteMachineComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(openDeleteMachineModal()), - } +const DeleteMachineContainer = (props) => { + const dispatch = useDispatch() + return <DeleteMachineComponent {...props} onClick={() => dispatch(openDeleteMachineModal())} /> } -const DeleteMachineContainer = connect(undefined, mapDispatchToProps)(DeleteMachineComponent) - export default DeleteMachineContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js index 1cf35b05..6f4285b2 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineNameContainer.js @@ -1,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import MachineNameComponent from '../../../../../components/app/sidebars/topology/machine/MachineNameComponent' -const mapStateToProps = (state) => { - return { - position: state.interactionLevel.position, - } +const MachineNameContainer = (props) => { + const position = useSelector((state) => state.interactionLevel.position) + return <MachineNameComponent {...props} position={position} /> } -const MachineNameContainer = connect(mapStateToProps)(MachineNameComponent) - export default MachineNameContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js index b04e3118..cb7ec8f9 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/MachineSidebarContainer.js @@ -1,15 +1,15 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import MachineSidebarComponent from '../../../../../components/app/sidebars/topology/machine/MachineSidebarComponent' -const mapStateToProps = (state) => { - return { - machineId: +const MachineSidebarContainer = (props) => { + const machineId = useSelector( + (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[ state.interactionLevel.position - 1 - ], - } + ] + ) + return <MachineSidebarComponent {...props} machineId={machineId} /> } -const MachineSidebarContainer = connect(mapStateToProps)(MachineSidebarComponent) - export default MachineSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js index 29e48016..3795cdff 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitAddContainer.js @@ -1,19 +1,15 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { addUnit } from '../../../../../actions/topology/machine' import UnitAddComponent from '../../../../../components/app/sidebars/topology/machine/UnitAddComponent' -const mapStateToProps = (state, ownProps) => { - return { - units: Object.values(state.objects[ownProps.unitType]), - } -} +const UnitAddContainer = (props) => { + const units = useSelector((state) => Object.values(state.objects[props.unitType])) + const dispatch = useDispatch() -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onAdd: (id) => dispatch(addUnit(ownProps.unitType, id)), - } -} + const onAdd = (id) => dispatch(addUnit(props.unitType, id)) -const UnitAddContainer = connect(mapStateToProps, mapDispatchToProps)(UnitAddComponent) + return <UnitAddComponent {...props} onAdd={onAdd} units={units} /> +} export default UnitAddContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js index f334f9f2..3d24859e 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitContainer.js @@ -1,20 +1,14 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { deleteUnit } from '../../../../../actions/topology/machine' import UnitComponent from '../../../../../components/app/sidebars/topology/machine/UnitComponent' -const mapStateToProps = (state, ownProps) => { - return { - unit: state.objects[ownProps.unitType][ownProps.unitId], - index: ownProps.unitId, - } -} +const UnitContainer = ({ unitId, unitType }) => { + const dispatch = useDispatch() + const unit = useSelector((state) => state.objects[unitType][unitId]) + const onDelete = () => dispatch(deleteUnit(unitType, unitId)) -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onDelete: () => dispatch(deleteUnit(ownProps.unitType, ownProps.index)), - } + return <UnitComponent index={unitId} unit={unit} unitType={unitType} onDelete={onDelete} /> } -const UnitContainer = connect(mapStateToProps, mapDispatchToProps)(UnitComponent) - export default UnitContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js index f382ff74..c5c9444d 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/machine/UnitListContainer.js @@ -1,17 +1,17 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import UnitListComponent from '../../../../../components/app/sidebars/topology/machine/UnitListComponent' -const mapStateToProps = (state, ownProps) => { - return { - unitIds: +const UnitListContainer = (props) => { + const unitIds = useSelector( + (state) => state.objects.machine[ state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds[ state.interactionLevel.position - 1 ] - ][ownProps.unitType + 'Ids'], - } + ][props.unitType + 'Ids'] + ) + return <UnitListComponent {...props} unitIds={unitIds} /> } -const UnitListContainer = connect(mapStateToProps)(UnitListComponent) - export default UnitListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js index c941e745..3708e33e 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/AddPrefabContainer.js @@ -1,13 +1,11 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { addPrefab } from '../../../../../actions/prefabs' import AddPrefabComponent from '../../../../../components/app/sidebars/topology/rack/AddPrefabComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(addPrefab('name')), - } +const AddPrefabContainer = (props) => { + const dispatch = useDispatch() + return <AddPrefabComponent {...props} onClick={() => dispatch(addPrefab('name'))} /> } -const AddPrefabContainer = connect(undefined, mapDispatchToProps)(AddPrefabComponent) - export default AddPrefabContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js index 58c3b082..93bb749f 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/BackToRoomContainer.js @@ -1,13 +1,11 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToRoomComponent from '../../../../../components/app/sidebars/topology/rack/BackToRoomComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()), - } +const BackToRoomContainer = (props) => { + const dispatch = useDispatch() + return <BackToRoomComponent {...props} onClick={() => dispatch(goDownOneInteractionLevel())} /> } -const BackToRoomContainer = connect(undefined, mapDispatchToProps)(BackToRoomComponent) - export default BackToRoomContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js index 8229a359..de46e491 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/DeleteRackContainer.js @@ -1,13 +1,11 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { openDeleteRackModal } from '../../../../../actions/modals/topology' import DeleteRackComponent from '../../../../../components/app/sidebars/topology/rack/DeleteRackComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(openDeleteRackModal()), - } +const DeleteRackContainer = (props) => { + const dispatch = useDispatch() + return <DeleteRackComponent {...props} onClick={() => dispatch(openDeleteRackModal())} /> } -const DeleteRackContainer = connect(undefined, mapDispatchToProps)(DeleteRackComponent) - export default DeleteRackContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js index cf341da9..5bb2c784 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/EmptySlotContainer.js @@ -1,13 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { addMachine } from '../../../../../actions/topology/rack' import EmptySlotComponent from '../../../../../components/app/sidebars/topology/rack/EmptySlotComponent' -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onAdd: () => dispatch(addMachine(ownProps.position)), - } +const EmptySlotContainer = (props) => { + const dispatch = useDispatch() + const onAdd = () => dispatch(addMachine(props.position)) + return <EmptySlotComponent {...props} onAdd={onAdd} /> } -const EmptySlotContainer = connect(undefined, mapDispatchToProps)(EmptySlotComponent) - export default EmptySlotContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js index fe12827d..149b4d18 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineContainer.js @@ -1,19 +1,14 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { goFromRackToMachine } from '../../../../../actions/interaction-level' import MachineComponent from '../../../../../components/app/sidebars/topology/rack/MachineComponent' -const mapStateToProps = (state, ownProps) => { - return { - machine: state.objects.machine[ownProps.machineId], - } +const MachineContainer = (props) => { + const machine = useSelector((state) => state.objects.machine[props.machineId]) + const dispatch = useDispatch() + return ( + <MachineComponent {...props} onClick={() => dispatch(goFromRackToMachine(props.position))} machine={machine} /> + ) } -const mapDispatchToProps = (dispatch, ownProps) => { - return { - onClick: () => dispatch(goFromRackToMachine(ownProps.position)), - } -} - -const MachineContainer = connect(mapStateToProps, mapDispatchToProps)(MachineComponent) - export default MachineContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js index bc5a285a..b45300fc 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/MachineListContainer.js @@ -1,12 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import MachineListComponent from '../../../../../components/app/sidebars/topology/rack/MachineListComponent' -const mapStateToProps = (state) => { - return { - machineIds: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds, - } +const MachineListContainer = (props) => { + const machineIds = useSelector( + (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].machineIds + ) + return <MachineListComponent {...props} machineIds={machineIds} /> } -const MachineListContainer = connect(mapStateToProps)(MachineListComponent) - export default MachineListContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js index 504dbc61..7dfdb473 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackNameContainer.js @@ -1,19 +1,14 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { openEditRackNameModal } from '../../../../../actions/modals/topology' import RackNameComponent from '../../../../../components/app/sidebars/topology/rack/RackNameComponent' -const mapStateToProps = (state) => { - return { - rackName: state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name, - } +const RackNameContainer = (props) => { + const rackName = useSelector( + (state) => state.objects.rack[state.objects.tile[state.interactionLevel.tileId].rackId].name + ) + const dispatch = useDispatch() + return <RackNameComponent {...props} rackName={rackName} onEdit={() => dispatch(openEditRackNameModal())} /> } -const mapDispatchToProps = (dispatch) => { - return { - onEdit: () => dispatch(openEditRackNameModal()), - } -} - -const RackNameContainer = connect(mapStateToProps, mapDispatchToProps)(RackNameComponent) - export default RackNameContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js index 453d7e41..b8fc3bfb 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/rack/RackSidebarContainer.js @@ -1,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import RackSidebarComponent from '../../../../../components/app/sidebars/topology/rack/RackSidebarComponent' -const mapStateToProps = (state) => { - return { - rackId: state.objects.tile[state.interactionLevel.tileId].rackId, - } +const RackSidebarContainer = (props) => { + const rackId = useSelector((state) => state.objects.tile[state.interactionLevel.tileId].rackId) + return <RackSidebarComponent {...props} rackId={rackId} /> } -const RackSidebarContainer = connect(mapStateToProps)(RackSidebarComponent) - export default RackSidebarContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js index 4c1ab99d..a48bf0a7 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/BackToBuildingContainer.js @@ -1,13 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { goDownOneInteractionLevel } from '../../../../../actions/interaction-level' import BackToBuildingComponent from '../../../../../components/app/sidebars/topology/room/BackToBuildingComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(goDownOneInteractionLevel()), - } +const BackToBuildingContainer = () => { + const dispatch = useDispatch() + const onClick = () => dispatch(goDownOneInteractionLevel()) + return <BackToBuildingComponent onClick={onClick} /> } -const BackToBuildingContainer = connect(undefined, mapDispatchToProps)(BackToBuildingComponent) - export default BackToBuildingContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js index 636fa5c5..6a80e9b0 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/DeleteRoomContainer.js @@ -1,13 +1,12 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch } from 'react-redux' import { openDeleteRoomModal } from '../../../../../actions/modals/topology' import DeleteRoomComponent from '../../../../../components/app/sidebars/topology/room/DeleteRoomComponent' -const mapDispatchToProps = (dispatch) => { - return { - onClick: () => dispatch(openDeleteRoomModal()), - } +const DeleteRoomContainer = (props) => { + const dispatch = useDispatch() + const onClick = () => dispatch(openDeleteRoomModal()) + return <DeleteRoomComponent {...props} onClick={onClick} /> } -const DeleteRoomContainer = connect(undefined, mapDispatchToProps)(DeleteRoomComponent) - export default DeleteRoomContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js index d17a45d1..37027fc5 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/EditRoomContainer.js @@ -1,21 +1,25 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { finishRoomEdit, startRoomEdit } from '../../../../../actions/topology/building' import EditRoomComponent from '../../../../../components/app/sidebars/topology/room/EditRoomComponent' -const mapStateToProps = (state) => { - return { - isEditing: state.construction.currentRoomInConstruction !== '-1', - isInRackConstructionMode: state.construction.inRackConstructionMode, - } -} +const EditRoomContainer = (props) => { + const isEditing = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') + const isInRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode) -const mapDispatchToProps = (dispatch) => { - return { - onEdit: () => dispatch(startRoomEdit()), - onFinish: () => dispatch(finishRoomEdit()), - } -} + const dispatch = useDispatch() + const onEdit = () => dispatch(startRoomEdit()) + const onFinish = () => dispatch(finishRoomEdit()) -const EditRoomContainer = connect(mapStateToProps, mapDispatchToProps)(EditRoomComponent) + return ( + <EditRoomComponent + {...props} + onEdit={onEdit} + onFinish={onFinish} + isEditing={isEditing} + isInRackConstructionMode={isInRackConstructionMode} + /> + ) +} export default EditRoomContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js index cd8319de..726e9d37 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RackConstructionContainer.js @@ -1,21 +1,24 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { startRackConstruction, stopRackConstruction } from '../../../../../actions/topology/room' import RackConstructionComponent from '../../../../../components/app/sidebars/topology/room/RackConstructionComponent' -const mapStateToProps = (state) => { - return { - inRackConstructionMode: state.construction.inRackConstructionMode, - isEditingRoom: state.construction.currentRoomInConstruction !== '-1', - } -} +const RackConstructionContainer = (props) => { + const isRackConstructionMode = useSelector((state) => state.construction.inRackConstructionMode) + const isEditingRoom = useSelector((state) => state.construction.currentRoomInConstruction !== '-1') -const mapDispatchToProps = (dispatch) => { - return { - onStart: () => dispatch(startRackConstruction()), - onStop: () => dispatch(stopRackConstruction()), - } + const dispatch = useDispatch() + const onStart = () => dispatch(startRackConstruction()) + const onStop = () => dispatch(stopRackConstruction()) + return ( + <RackConstructionComponent + {...props} + inRackConstructionMode={isRackConstructionMode} + isEditingRoom={isEditingRoom} + onStart={onStart} + onStop={onStop} + /> + ) } -const RackConstructionContainer = connect(mapStateToProps, mapDispatchToProps)(RackConstructionComponent) - export default RackConstructionContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js index cab16016..1f53aeb6 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomNameContainer.js @@ -1,19 +1,13 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useDispatch, useSelector } from 'react-redux' import { openEditRoomNameModal } from '../../../../../actions/modals/topology' import RoomNameComponent from '../../../../../components/app/sidebars/topology/room/RoomNameComponent' -const mapStateToProps = (state) => { - return { - roomName: state.objects.room[state.interactionLevel.roomId].name, - } +const RoomNameContainer = (props) => { + const roomName = useSelector((state) => state.objects.room[state.interactionLevel.roomId].name) + const dispatch = useDispatch() + const onEdit = () => dispatch(openEditRoomNameModal()) + return <RoomNameComponent {...props} onEdit={onEdit} roomName={roomName} /> } -const mapDispatchToProps = (dispatch) => { - return { - onEdit: () => dispatch(openEditRoomNameModal()), - } -} - -const RoomNameContainer = connect(mapStateToProps, mapDispatchToProps)(RoomNameComponent) - export default RoomNameContainer diff --git a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js index 8c3ca8ab..252881a0 100644 --- a/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js +++ b/opendc-web/opendc-web-ui/src/containers/app/sidebars/topology/room/RoomSidebarContainer.js @@ -1,12 +1,10 @@ -import { connect } from 'react-redux' +import React from 'react' +import { useSelector } from 'react-redux' import RoomSidebarComponent from '../../../../../components/app/sidebars/topology/room/RoomSidebarComponent' -const mapStateToProps = (state) => { - return { - roomId: state.interactionLevel.roomId, - } +const RoomSidebarContainer = (props) => { + const roomId = useSelector((state) => state.interactionLevel.roomId) + return <RoomSidebarComponent {...props} roomId={roomId} /> } -const RoomSidebarContainer = connect(mapStateToProps)(RoomSidebarComponent) - export default RoomSidebarContainer |