functional application without amazon update

web/src/components/IntentDetails.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
 import '../css/Intent.css'
+import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH} from '../config';
 
 class IntentDetails extends Component {
   constructor(props){
@@ -10,6 +11,9 @@ class IntentDetails extends Component {
 
     this.addQuestion = this.addQuestion.bind(this);
     this.deleteQuestion = this.deleteQuestion.bind(this);
+    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
+    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
   }
 
   componentWillReceiveProps(props){
@@ -19,18 +23,32 @@ class IntentDetails extends Component {
   render() {
     return (
       <div className="IntentDetails">
+        <div className="QuestionBox">
+          <TextField
+            id="intent name"
+            lineDirection="center"
+            placeholder="Intent name"
+            label="Intent name"
+            className="md-cell md-cell--bottom"
+            style={{width:'60%'}}
+            onChange={this.handleIntentNameEdit}
+            maxLength={INTENT_NAME_MAX_LENGTH}
+            value={this.state.intent.intentName} />
+        </div>
         <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
         {
           this.state.intent.questions.map((question, index)=>{
             return (
               <div key={index} className="QuestionBox">
                 <TextField
-                  id="floating-center-title"
+                  id="intent question"
                   lineDirection="center"
                   placeholder="Question"
                   className="md-cell md-cell--bottom"
                   style={{width:'60%'}}
+                  maxLength={QUESTION_MAX_LENGTH}
                   rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
                   value={question}/>
               </div>
             );
@@ -40,12 +58,14 @@ class IntentDetails extends Component {
         {
           <div className="QuestionBox">
             <TextField
-              id="floating-center-title"
+              id="intent answer"
               lineDirection="center"
               label="Answer"
               placeholder="Answer"
               style={{width:'60%'}}
+              maxLength={ANSWER_MAX_LENGTH}
               className="md-cell md-cell--bottom"
+              onChange={this.handleAnswerEdit}
               value={this.state.intent.answer}/>
           </div>
         }
@@ -60,7 +80,7 @@ class IntentDetails extends Component {
 
   addQuestion(){
     let newIntent = this.state.intent;
-    newIntent.questions.push('New question');
+    newIntent.questions.push('');
     this.setState({intent: newIntent});
   }
 
@@ -72,6 +92,28 @@ class IntentDetails extends Component {
     
     this.setState({intent: newIntent});
   }
+
+  handleQuestionEdit(e,index){
+    if (e.length === QUESTION_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.questions[index] = e;
+    this.setState({intent: newIntent});
+  }
+
+  handleAnswerEdit(e){
+    if (e.length === ANSWER_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.answer = e;
+    this.setState({intent: newIntent});
+  }
+
+  handleIntentNameEdit(e){
+    if (e.length === INTENT_NAME_MAX_LENGTH) return;
+    //e.replace(/\s/g,'');
+    let newIntent = this.state.intent;
+    newIntent.intentName = e;
+    this.setState({intent: newIntent});
+  }
 }
 
 export default IntentDetails;