From c47a27b826f7d76410308a4151611a366f9eaf46 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Fri, 25 Aug 2017 17:48:12 +0200
Subject: Fetch and display datacenter topology

---
 src/components/map/groups/DatacenterGroup.js | 20 +++++++++++++-------
 src/components/map/groups/GridGroup.js       |  3 ++-
 src/components/map/groups/RoomGroup.js       |  3 ++-
 3 files changed, 17 insertions(+), 9 deletions(-)

(limited to 'src/components/map/groups')

diff --git a/src/components/map/groups/DatacenterGroup.js b/src/components/map/groups/DatacenterGroup.js
index 3b7a086b..d7e349be 100644
--- a/src/components/map/groups/DatacenterGroup.js
+++ b/src/components/map/groups/DatacenterGroup.js
@@ -1,14 +1,20 @@
 import React from "react";
 import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
 import RoomGroup from "./RoomGroup";
 
-const DatacenterGroup = ({datacenter}) => (
-    <Group>
-        {datacenter.rooms.map(room => (
-            <RoomGroup room={room}/>
-        ))}
-    </Group>
-);
+const DatacenterGroup = ({datacenter}) => {
+    if (!datacenter) {
+        return <Group/>;
+    }
+    return (
+        <Group>
+            {datacenter.rooms.map(room => (
+                <RoomGroup key={room.id} room={room}/>
+            ))}
+        </Group>
+    );
+};
 
 DatacenterGroup.propTypes = {
     datacenter: Shapes.Datacenter,
diff --git a/src/components/map/groups/GridGroup.js b/src/components/map/groups/GridGroup.js
index 2651bf19..f50482ce 100644
--- a/src/components/map/groups/GridGroup.js
+++ b/src/components/map/groups/GridGroup.js
@@ -15,11 +15,12 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
 
 const GridGroup = () => (
     <Group>
-        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map(points => (
+        {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
             <Line
                 points={points}
                 stroke={GRID_COLOR}
                 strokeWidth={GRID_LINE_WIDTH_IN_PIXELS}
+                key={index}
             />
         ))}
     </Group>
diff --git a/src/components/map/groups/RoomGroup.js b/src/components/map/groups/RoomGroup.js
index 90a58767..28240d77 100644
--- a/src/components/map/groups/RoomGroup.js
+++ b/src/components/map/groups/RoomGroup.js
@@ -1,11 +1,12 @@
 import React from "react";
 import {Group} from "react-konva";
+import Shapes from "../../../shapes/index";
 import TileGroup from "./TileGroup";
 
 const RoomGroup = ({room}) => (
     <Group>
         {room.tiles.map(tile => (
-            <TileGroup tile={tile}/>
+            <TileGroup key={tile.id} tile={tile}/>
         ))}
     </Group>
 );
-- 
cgit v1.2.3