functional application without amazon update

web/src/components/LaunchRequest.js

@@ -0,0 +1,64 @@
+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)}}>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;