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

import React, {Component} from 'react';
import {
  Grid,
} from "semantic-ui-react";
import {editButtonStyle, panelStyle} from "./devices/styleComponents";
import {checkMaxLength, DEVICE_NAME_MAX_LENGTH} from "./devices/constants";
import DeviceType from './devices/DeviceTypeController';
import NewDevice from "./devices/NewDevice";

export default class DevicePanel extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editMode : false,
      devices : this.props.devices,
    };
  }

  editModeController = (e) => this.setState((prevState) => ({ editMode: !prevState.editMode }));

  changeDeviceData = (deviceId, newSettings) => {

    console.log(newSettings.name, " <-- new name --> ", deviceId );
    this.state.devices.map(device => {
      if(device.id === deviceId){
        for(let prop in newSettings){
          if(device.hasOwnProperty(prop)){
            if(prop==="name"){
              if(checkMaxLength(newSettings[prop])){
                device[prop] = newSettings[prop];
              }
              else{
                alert("Name must be less than " + DEVICE_NAME_MAX_LENGTH + " characters.");
              }
            }else{
              device[prop] = newSettings[prop];
            }

          }
        }
      }
      return null;
    });
    this.forceUpdate();
  };


  render() {
    return (
      <div style={panelStyle}>
        <button style={editButtonStyle} onClick={this.editModeController}>Edit</button>
        <Grid doubling columns={this.state.devices.length > 0 ? this.state.devices.length : 1} divided="vertically">
          {
            this.state.devices ?
              this.state.devices.map((e, i) => {
                return (
                  <Grid.Column key={i}>
                    <DeviceType type={e.kind} onChangeData={this.changeDeviceData}  device={e} edit={this.state.editMode}/>
                  </Grid.Column>
                )
              })
              :
              null
          }
          <Grid.Column>
            <NewDevice devices={this.state.devices}/>
          </Grid.Column>
        </Grid>
      </div>
    )
  }

}