1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/components/app/map/groups/DatacenterGroup.js b/frontend/src/components/app/map/groups/DatacenterGroup.js
new file mode 100644
index 00000000..51e32db6
--- /dev/null
+++ b/frontend/src/components/app/map/groups/DatacenterGroup.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { Group } from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import RoomContainer from "../../../../containers/app/map/RoomContainer";
+import Shapes from "../../../../shapes/index";
+
+const DatacenterGroup = ({ datacenter, interactionLevel }) => {
+  if (!datacenter) {
+    return <Group />;
+  }
+
+  if (interactionLevel.mode === "BUILDING") {
+    return (
+      <Group>
+        {datacenter.roomIds.map(roomId => (
+          <RoomContainer key={roomId} roomId={roomId} />
+        ))}
+      </Group>
+    );
+  }
+
+  return (
+    <Group>
+      {datacenter.roomIds
+        .filter(roomId => roomId !== interactionLevel.roomId)
+        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
+      {interactionLevel.mode === "ROOM" ? <GrayContainer /> : null}
+      {datacenter.roomIds
+        .filter(roomId => roomId === interactionLevel.roomId)
+        .map(roomId => <RoomContainer key={roomId} roomId={roomId} />)}
+    </Group>
+  );
+};
+
+DatacenterGroup.propTypes = {
+  datacenter: Shapes.Datacenter,
+  interactionLevel: Shapes.InteractionLevel
+};
+
+export default DatacenterGroup;