Fix issue loading DC with previously filled store

6 files changed, 20 insertions, 8 deletions

diff --git a/src/actions/topology.js b/src/actions/topology.js
index 3f60386b..1f111f06 100644
--- a/src/actions/topology.js
+++ b/src/actions/topology.js
@@ -5,6 +5,7 @@ export const FETCH_TOPOLOGY_OF_DATACENTER = "FETCH_TOPOLOGY_OF_DATACENTER";
 export const FETCH_TOPOLOGY_OF_DATACENTER_SUCCEEDED = "FETCH_TOPOLOGY_OF_DATACENTER_SUCCEEDED";
 export const FETCH_LATEST_DATACENTER = "FETCH_LATEST_DATACENTER";
 export const FETCH_LATEST_DATACENTER_SUCCEEDED = "FETCH_LATEST_DATACENTER_SUCCEEDED";
+export const RESET_CURRENT_DATACENTER = "RESET_CURRENT_DATACENTER";
 export const START_NEW_ROOM_CONSTRUCTION = "START_NEW_ROOM_CONSTRUCTION";
 export const START_NEW_ROOM_CONSTRUCTION_SUCCEEDED = "START_NEW_ROOM_CONSTRUCTION_SUCCEEDED";
 export const FINISH_NEW_ROOM_CONSTRUCTION = "FINISH_NEW_ROOM_CONSTRUCTION";
@@ -35,6 +36,12 @@ export function fetchLatestDatacenterSucceeded(datacenterId) {
     };
 }
 
+export function resetCurrentDatacenter() {
+    return {
+        type: RESET_CURRENT_DATACENTER
+    };
+}
+
 export function startNewRoomConstruction() {
     return {
         type: START_NEW_ROOM_CONSTRUCTION
diff --git a/src/components/map/MapConstants.js b/src/components/map/MapConstants.js
index c8a9810b..d700ee49 100644
--- a/src/components/map/MapConstants.js
+++ b/src/components/map/MapConstants.js
@@ -3,6 +3,7 @@ export const TILE_SIZE_IN_PIXELS = 100;
 export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS;
 
 export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5;
+export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3;
 export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2;
 
 export const GRID_LINE_WIDTH_IN_PIXELS = 2;
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 562d7d15..4c22c23c 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -2,20 +2,20 @@ import PropTypes from "prop-types";
 import React from "react";
 import {Group, Line} from "react-konva";
 import {TILE_PLUS_COLOR} from "../../../colors/index";
-import {OBJECT_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
 const TilePlusIcon = ({pixelX, pixelY}) => {
     const linePoints = [
         [
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelY + OBJECT_MARGIN_IN_PIXELS,
+            pixelY + TILE_PLUS_MARGIN_IN_PIXELS,
             pixelX + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelY + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelY + TILE_SIZE_IN_PIXELS - TILE_PLUS_MARGIN_IN_PIXELS,
         ],
         [
-            pixelX + OBJECT_MARGIN_IN_PIXELS,
+            pixelX + TILE_PLUS_MARGIN_IN_PIXELS,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
-            pixelX + TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS,
+            pixelX + TILE_SIZE_IN_PIXELS - TILE_PLUS_MARGIN_IN_PIXELS,
             pixelY + 0.5 * TILE_SIZE_IN_PIXELS,
         ],
     ];
diff --git a/src/components/map/groups/GridGroup.js b/src/components/map/groups/GridGroup.js
index f50482ce..7affeced 100644
--- a/src/components/map/groups/GridGroup.js
+++ b/src/components/map/groups/GridGroup.js
@@ -17,10 +17,10 @@ const GridGroup = () => (
     <Group>
         {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
+                key={index}
                 points={points}
                 stroke={GRID_COLOR}
                 strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
-                key={index}
             />
         ))}
     </Group>
diff --git a/src/pages/App.js b/src/pages/App.js
index 98e2eac3..f74c3fc8 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -3,7 +3,7 @@ import React from 'react';
 import {connect} from "react-redux";
 import {ShortcutManager} from "react-shortcuts";
 import {openSimulationSucceeded} from "../actions/simulations";
-import {fetchLatestDatacenter} from "../actions/topology";
+import {fetchLatestDatacenter, resetCurrentDatacenter} from "../actions/topology";
 import MapStage from "../components/map/MapStage";
 import AppNavbar from "../components/navigation/AppNavbar";
 import EditRoomNameModal from "../containers/modals/EditRoomNameModal";
@@ -22,6 +22,7 @@ class AppContainer extends React.Component {
 
     componentDidMount() {
         this.props.storeSimulationId(this.props.simulationId);
+        this.props.resetCurrentDatacenter();
         this.props.fetchLatestDatacenter();
     }
 
@@ -48,6 +49,7 @@ class AppContainer extends React.Component {
 const mapDispatchToProps = dispatch => {
     return {
         storeSimulationId: id => dispatch(openSimulationSucceeded(id)),
+        resetCurrentDatacenter: () => dispatch(resetCurrentDatacenter()),
         fetchLatestDatacenter: () => dispatch(fetchLatestDatacenter()),
     };
 };
diff --git a/src/reducers/topology.js b/src/reducers/topology.js
index caafb7c1..e0236e0c 100644
--- a/src/reducers/topology.js
+++ b/src/reducers/topology.js
@@ -1,9 +1,11 @@
-import {FETCH_LATEST_DATACENTER_SUCCEEDED} from "../actions/topology";
+import {FETCH_LATEST_DATACENTER_SUCCEEDED, RESET_CURRENT_DATACENTER} from "../actions/topology";
 
 export function currentDatacenterId(state = -1, action) {
     switch (action.type) {
         case FETCH_LATEST_DATACENTER_SUCCEEDED:
             return action.datacenterId;
+        case RESET_CURRENT_DATACENTER:
+            return -1;
         default:
             return state;
     }