old-tellall/web/src/components/LaunchRequest.js

import React, { Component } from 'react';
import {Button, TextField} from 'react-md';
import '../css/Intent.css'
import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config';

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

    this.state = {invocationName: props.invocationName, invocationAnswer: props.invocationAnswer};

    this.handleNameEdit = this.handleNameEdit.bind(this);
    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
  }

  componentWillReceiveProps(props){
    this.setState({invocationName: props.invocationName, invocationAnswer: props.invocationAnswer});
  }

  render() {
    return (
      <div className="LaunchRequestBox">
        <h5 style={{textAlign:'left', marginTop: '30px', marginLeft: '20px'}}> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
        <TextField
          id="invocation name"
          lineDirection="center"
          placeholder="Saburly"
          label="Invocation name"
          className="md-cell md-cell--bottom"
          style={{width:'60%', marginLeft: '20px'}}
          maxLength={INVOCATION_NAME_MAX_LENGTH}
          onChange={this.handleNameEdit}
          value={this.state.invocationName}/>
        <br></br>
        <h5 style={{textAlign:'left', marginLeft: '20px', marginTop: '30px'}}>Answer customers get from Alexa when they activate the skill.</h5>
        <TextField
          id="invocation answer"
          lineDirection="center"
          placeholder="We are Saburly, ask us something about us"
          label="Answer"
          className="md-cell md-cell--bottom"
          style={{width:'60%', marginLeft: '20px'}}
          maxLength={INVOCATION_ANSWER_MAX_LENGTH}
          onChange={this.handleAnswerEdit}
          value={this.state.invocationAnswer}/>
        <br></br>
        <br></br>
        <Button style={{float:'right', marginRight: '20px'}} flat primary swapTheming 
                onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
                disabled={this.props.waiting}>Save</Button>
      </div>
    );
  }

  handleNameEdit(e){
    if (e.length === INVOCATION_NAME_MAX_LENGTH) return;
    this.setState({invocationName: e});
  }

  handleAnswerEdit(e){
    if (e.length === INVOCATION_ANSWER_MAX_LENGTH) return;
    this.setState({invocationAnswer: e});
  }
}

export default LaunchRequest;