frontend/smart-hut/src/components/dashboard/devices/Device.js

import React from "react";
import Light from "./Light";
import SmartPlug from "./SmartPlug";
import Sensor from "./Sensor";
import { ButtonDimmer, KnobDimmer } from "./Dimmer";
import Switcher from "./Switch";
import Videocam from "./Videocam";
import { Segment, Grid, Header, Button, Icon } from "semantic-ui-react";
import { RemoteService } from "../../../remote";
import { connect } from "react-redux";
import DeviceSettingsModal from "./DeviceSettingsModal";

class Device extends React.Component {
  constructor(props) {
    super(props);

    this.modalRef = React.createRef();
    this.edit = this.edit.bind(this);
    this.resetSmartPlug = this.resetSmartPlug.bind(this);
  }

  edit() {
    console.log("editing device with id=" + this.props.id);
    this.modalRef.current.openModal();
  }

  resetSmartPlug() {
    this.props
      .smartPlugReset(this.props.id)
      .catch((err) => console.error(`Smart plug reset error`, err));
  }

  renderDeviceComponent() {
    switch (this.props.stateOrDevice.kind) {
      case "regularLight":
        return <Light tab={this.props.tab} id={this.props.id} />;
      case "sensor":
        return <Sensor tab={this.props.tab} id={this.props.id} />;
      case "motionSensor":
        return <Sensor tab={this.props.tab} id={this.props.id} />;
      case "buttonDimmer":
        return <ButtonDimmer tab={this.props.tab} id={this.props.id} />;
      case "knobDimmer":
        return <KnobDimmer tab={this.props.tab} id={this.props.id} />;
      case "smartPlug":
        return <SmartPlug tab={this.props.tab} id={this.props.id} />;
      case "switch":
        return <Switcher tab={this.props.tab} id={this.props.id} />;
      case "dimmableLight":
        return <Light id={this.props.id} />;
      case "securityCamera":
        return <Videocam id={this.props.id} />;
      default:
        throw new Error("Device type unknown");
    }
  }

  render() {
    return (
      <Segment>
        <Grid columns={2}>
          <Grid.Column>{this.renderDeviceComponent()}</Grid.Column>
          {this.props.tab === "Devices" ? (
            <Grid.Column textAlign="center">
              <Header as="h3">{this.props.stateOrDevice.name}</Header>
              <Button
                color="blue"
                icon
                onClick={this.edit}
                labelPosition="left"
              >
                <Icon name="pencil" />
                Edit
              </Button>
              {this.props.stateOrDevice.kind === "smartPlug" ? (
                <Button
                  color="orange"
                  icon
                  onClick={this.resetSmartPlug}
                  labelPosition="left"
                >
                  <Icon name="undo" />
                  Reset
                </Button>
              ) : null}
            </Grid.Column>
          ) : (
            <Grid.Column textAlign="center">
              <Header as="h3">{this.props.stateOrDevice.name}</Header>
            </Grid.Column>
          )}

          <DeviceSettingsModal ref={this.modalRef} id={this.props.id} />
        </Grid>
      </Segment>
    );
  }
}

const mapStateToProps = (state, ownProps) => ({
  get stateOrDevice() {
    if (state.active.activeTab === "Devices") {
      return state.devices[ownProps.id];
    } else {
      const sceneState = state.sceneStates[ownProps.id];
      return state.devices[sceneState];
    }
  },
});
const DeviceContainer = connect(mapStateToProps, RemoteService)(Device);
export default DeviceContainer;