1 files changed, 56 insertions, 0 deletions
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
new file mode 100644
index 00000000..c8f0d3db
--- /dev/null
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -0,0 +1,56 @@
+import React from "react";
+import { Group } from "react-konva";
+import GrayContainer from "../../../../containers/app/map/GrayContainer";
+import TileContainer from "../../../../containers/app/map/TileContainer";
+import WallContainer from "../../../../containers/app/map/WallContainer";
+import Shapes from "../../../../shapes/index";
+
+const RoomGroup = ({
+  room,
+  interactionLevel,
+  currentRoomInConstruction,
+  onClick
+}) => {
+  if (currentRoomInConstruction === room.id) {
+    return (
+      <Group onClick={onClick}>
+        {room.tileIds.map(tileId => (
+          <TileContainer key={tileId} tileId={tileId} newTile={true} />
+        ))}
+      </Group>
+    );
+  }
+
+  return (
+    <Group onClick={onClick}>
+      {(() => {
+        if (
+          (interactionLevel.mode === "RACK" ||
+            interactionLevel.mode === "MACHINE") &&
+          interactionLevel.roomId === room.id
+        ) {
+          return [
+            room.tileIds
+              .filter(tileId => tileId !== interactionLevel.tileId)
+              .map(tileId => <TileContainer key={tileId} tileId={tileId} />),
+            <GrayContainer key={-1} />,
+            room.tileIds
+              .filter(tileId => tileId === interactionLevel.tileId)
+              .map(tileId => <TileContainer key={tileId} tileId={tileId} />)
+          ];
+        } else {
+          return room.tileIds.map(tileId => (
+            <TileContainer key={tileId} tileId={tileId} />
+          ));
+        }
+      })()}
+      <WallContainer roomId={room.id} />
+    </Group>
+  );
+};
+
+RoomGroup.propTypes = {
+  room: Shapes.Room
+};
+
+export default RoomGroup;