cabana/src/components/EditMessageModal.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Modal from './Modals/baseModal';

export default class EditMessageModal extends Component {
  static propTypes = {
    handleClose: PropTypes.func.isRequired,
    handleSave: PropTypes.func.isRequired,
    message: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props);

    this.state = {
      messageFrame: props.message.frame.copy()
    };
    this.handleSave = this.handleSave.bind(this);
    this.editTransmitter = this.editTransmitter.bind(this);
    this.addTransmitter = this.addTransmitter.bind(this);
    this.renderActions = this.renderActions.bind(this);
  }

  handleSave() {
    this.props.handleSave(this.state.messageFrame);
  }

  addTransmitter() {
    const { messageFrame } = this.state;
    messageFrame.addTransmitter();
    this.setState({ messageFrame });
  }

  editTransmitter(transmitter) {}

  renderActions() {
    return (
      <div>
        <button className="button--inverted" onClick={this.props.handleClose}>
          Cancel
        </button>
        <button className="button--primary" onClick={this.handleSave}>
          Save Message
        </button>
      </div>
    );
  }

  render() {
    return (
      <Modal
        title={`Edit Message: (${this.props.message.id})`}
        subtitle="Make changes and update defaults of this message"
        handleClose={this.props.handleClose}
        handleSave={this.handleSave}
        actions={this.renderActions()}
      >
        <div className="form-field">
          <label htmlFor="message_name">
            <span>Name</span>
            <sup>Customize the name of this message</sup>
          </label>
          <input
            type="text"
            id="message_name"
            value={this.state.messageFrame.name}
            onChange={(e) => {
              const { messageFrame } = this.state;
              messageFrame.name = e.target.value;
              this.setState({ messageFrame });
            }}
          />
        </div>
        <div className="form-field">
          <label htmlFor="message_size">
            <span>Size</span>
            <sup>Add a size parameter to this message</sup>
          </label>
          <input
            type="number"
            id="message_size"
            value={this.state.messageFrame.size}
            onChange={(e) => {
              const { messageFrame } = this.state;
              messageFrame.size = parseInt(e.target.value, 10);
              this.setState({ messageFrame });
            }}
          />
        </div>
        <div className="form-field u-hidden">
          <label htmlFor="message_transmitters">
            <span>Transmitters</span>
            <sup>
              Add the physical ECU units that this message is coming from.
            </sup>
          </label>
          <div className="form-field-inset">
            <ul className="form-field-inset-list">
              {this.state.messageFrame.transmitters.map((transmitter) => (
                <li className="form-field-inset-list-item" key={transmitter}>
                  <div className="form-field-inset-list-item-title">
                    <span>{transmitter}</span>
                  </div>
                  <div className="form-field-inset-list-item-action">
                    <button className="button--tiny button--alpha">Edit</button>
                  </div>
                </li>
              ))}
              <button className="button--tiny button--alpha">
                <span>
                  <i className="fa fa-plus" />
                  {' '}
Add Transmitter
                </span>
              </button>
            </ul>
          </div>
        </div>
      </Modal>
    );
  }
}