frontend/smart-hut/src/components/dashboard/DevicePanel.js

// vim: set ts=2 sw=2 et tw=80:

import React, { Component } from "react";
import { Segment, Card, Header, Icon } from "semantic-ui-react";
import Device from "./devices/Device";
import NewDevice from "./devices/NewDevice";
import { connect } from "react-redux";
import { RemoteService } from "../../remote";

class DevicePanel extends Component {
  constructor(props) {
    super(props);

    this.getDevices();
  }

  getDevices() {
    if (this.props.tab === "Devices") {
      this.props
        .fetchDevices()
        .catch((err) => console.error(`error fetching devices:`, err));
    }
  }

  render() {
    return (
      <Card.Group centered style={{ paddingTop: "3rem" }}>
        {this.props.devices.length !== 0 ? (
          <React.Fragment>
            {this.props.devices.map((e, i) => {
              return <Device key={i} tab={this.props.tab} id={e.id} />;
            })}
            {!this.props.isActiveRoomHome ? (
              <Card style={{ height: "27em" }}>
                <Segment basic style={{ width: "100%", height: "100%" }}>
                  <NewDevice />
                </Segment>
              </Card>
            ) : null}
          </React.Fragment>
        ) : (
          <Segment placeholder>
            <Header icon>
              <Icon
                name="exclamation triangle"
                style={{ paddingBottom: "1rem" }}
              />
              Please create a room on the left, and then add devices to the
              same.
            </Header>
          </Segment>
        )}
      </Card.Group>
    );
  }
}

const mapStateToProps = (state, _) => ({
  get devices() {
    if (state.active.activeRoom === -1) {
      return Object.values(state.devices);
    } else {
      const deviceArray = [
        ...state.rooms[state.active.activeRoom].devices,
      ].sort();
      return deviceArray.map((id) => state.devices[id]);
    }
  },
  get isActiveRoomHome() {
    return state.active.activeRoom === -1;
  },
  activeRoom: state.active.activeRoom,
});
const DevicePanelContainer = connect(
  mapStateToProps,
  RemoteService
)(DevicePanel);
export default DevicePanelContainer;