src/components/app/map/groups/DatacenterGroup.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

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;