4a. import content from WP ; change design to reflect 4a

web/src/components/IntentDetails.js

@@ -1,72 +1,43 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
 import AnswerSource from './AnswerSource.js';
 import '../css/components/IntentDetails.css';
 import '../css/Common.css';
-import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';
+import {
+  QUESTION_MAX_LENGTH,
+  ANSWER_MAX_LENGTH,
+  INTENT_NAME_MAX_LENGTH,
+  INTENT_EXPLANATION_MAX_LENGTH,
+  ANSWER_TYPE,
+} from '../config/constants';
 
 class IntentDetails extends Component {
-  constructor(props){
-    super(props);
+  constructor (props) {
+    super (props);
 
-    this.state= {intent: props.selectedIntent};
+    this.state = {intent: props.selectedIntent};
 
-    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);
-    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
+    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.handleAnswerSourceEdit = this.handleAnswerSourceEdit.bind (this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind (this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind (
+      this
+    );
+    this.handleExternalSourceSave = this.handleExternalSourceSave.bind (this);
   }
 
-  componentWillReceiveProps(props){
-    this.setState({intent: props.selectedIntent});
+  componentWillReceiveProps (props) {
+    this.setState ({intent: props.selectedIntent});
   }
 
-  render() {
-    return (
-      <div className="RightPanelBox">
-        <div className="QuestionBox">
-        <h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
-        <TextField
-            id="intent explanation"
-            lineDirection="center"
-            placeholder="To ask us about our services, say "
-            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-            onChange={this.handleIntentExplanationEdit}
-            maxLength={INTENT_EXPLANATION_MAX_LENGTH}
-            value={this.state.intent.intentExplanation} />
-          <br/>
-          <TextField
-            id="intent name"
-            lineDirection="center"
-            label="Question name"
-            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-            onChange={this.handleIntentNameEdit}
-            maxLength={INTENT_NAME_MAX_LENGTH}
-            value={this.state.intent.intentName} />
-        </div>
-        <AnswerSource />
-        <h5 className="QuestionTitle">Question variants</h5>
-        {
-          this.state.intent.questions.map((question, index)=>{
-            return (
-              <div key={index} className="QuestionBox">
-                <TextField
-                  id="intent question"
-                  lineDirection="center"
-                  placeholder="Question"
-                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
-                  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>
-            );
-          })
-        }
-        <br></br>
-        {
+  render () {
+    let answerBox;
+    switch (this.state.intent.answerType) {
+      case ANSWER_TYPE.PREDEFINED:
+        answerBox = (
           <div className="QuestionBox">
             <TextField
               id="intent answer"
@@ -76,60 +47,188 @@ class IntentDetails extends Component {
               maxLength={ANSWER_MAX_LENGTH}
               className="md-cell md-cell--bottom IntentDetailsInputBoxes"
               onChange={this.handleAnswerEdit}
-              value={this.state.intent.answer}/>
+              value={this.state.intent.answer}
+            />
           </div>
-        }
-        <br></br>
-        <br></br>
-        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
-        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
-        
+        );
+        break;
+      case ANSWER_TYPE.EXTERNAL_SOURCE_WP_JSON:
+      case ANSWER_TYPE.EXTERNAL_SOURCE_RSS:
+        answerBox = (
+          <div className="QuestionBox">
+            <TextField
+              id="intent answer"
+              lineDirection="center"
+              label="Answer source"
+              placeholder="Answer source"
+              maxLength={ANSWER_MAX_LENGTH}
+              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+              onChange={this.handleAnswerSourceEdit}
+              value={this.state.intent.externalAnswerSource}
+            />
+          </div>
+        );
+        break;
+    }
+
+    return (
+      <div className="RightPanelBox">
+        <div className="QuestionBox">
+          <h5 className="PanelSubTitle">
+            {' '}
+            In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.
+          </h5>
+          <TextField
+            id="intent explanation"
+            lineDirection="center"
+            placeholder="To ask us about our services, say "
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onChange={this.handleIntentExplanationEdit}
+            maxLength={INTENT_EXPLANATION_MAX_LENGTH}
+            value={this.state.intent.intentExplanation}
+          />
+          <br />
+          <TextField
+            id="intent name"
+            lineDirection="center"
+            label="Question name"
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onChange={this.handleIntentNameEdit}
+            maxLength={INTENT_NAME_MAX_LENGTH}
+            value={this.state.intent.intentName}
+          />
+        </div>
+        <h5 className="QuestionTitle">Question variants</h5>
+        {this.state.intent.questions.map ((question, index) => {
+          return (
+            <div key={index} className="QuestionBox">
+              <TextField
+                id="intent question"
+                lineDirection="center"
+                placeholder="Question"
+                className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                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>
+          );
+        })}
+        <Button
+          className="AddQuestionVariantButton"
+          icon
+          primary
+          onClick={this.addQuestion}
+          disabled={this.props.waiting}
+        >
+          add
+        </Button>
+        <AnswerSource
+          className="QuestionTypeButton"
+          onSaveHandle={this.handleExternalSourceSave}
+          answerType={this.state.intent.answerType}
+        />
+        {answerBox}
+        <Button
+          className="IntentDetailsButton-firstInRow"
+          flat
+          primary
+          swapTheming
+          onClick={() => {
+            this.props.onSaveIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Save
+        </Button>
+        <Button
+          className="IntentDetailsButton"
+          flat
+          primary
+          onClick={() => {
+            this.props.onDeleteIntentClick (this.state.intent);
+          }}
+          disabled={this.props.waiting}
+        >
+          Delete
+        </Button>
+
       </div>
     );
   }
 
-  addQuestion(){
+  addQuestion () {
     let newIntent = this.state.intent;
-    newIntent.questions.push('');
-    this.setState({intent: newIntent});
+    newIntent.questions.push ('');
+    this.setState ({intent: newIntent});
   }
 
-  deleteQuestion(question){
-    let newIntent = this.state.intent;
-    let removeId = newIntent.questions.indexOf(question);
-    if (removeId !== -1)
-      newIntent.questions.splice(removeId,1);
-    
-    this.setState({intent: newIntent});
+  deleteQuestion (question) {
+    if (this.state.intent.questions.length > 1) {
+      let newIntent = this.state.intent;
+      let removeId = newIntent.questions.indexOf (question);
+      if (removeId !== -1) newIntent.questions.splice (removeId, 1);
+
+      this.setState ({intent: newIntent});
+    }
   }
 
-  handleQuestionEdit(e,index){
-    if (e.length === QUESTION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+  handleQuestionEdit (e, index) {
+    if (e.length === QUESTION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.questions[index] = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleIntentExplanationEdit(e,index){
-    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+  handleIntentExplanationEdit (e, index) {
+    if (e.length === INTENT_EXPLANATION_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e))
+      return;
     let newIntent = this.state.intent;
     newIntent.intentExplanation = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleAnswerEdit(e){
-    if (e.length === ANSWER_MAX_LENGTH || !(/^[a-z,.' ]*$/i.test(e))) return;
+  handleAnswerEdit (e) {
+    if (e.length === ANSWER_MAX_LENGTH || !/^[a-z,.' ]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.answer = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
   }
 
-  handleIntentNameEdit(e){
-    if (e.length === INTENT_NAME_MAX_LENGTH || !(/^[a-z]*$/i.test(e))) return;
+  handleAnswerSourceEdit (e) {
+    if (e.length === ANSWER_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.externalAnswerSource = e;
+    this.setState ({intent: newIntent});
+  }
+
+  handleIntentNameEdit (e) {
+    if (e.length === INTENT_NAME_MAX_LENGTH || !/^[a-z]*$/i.test (e)) return;
     let newIntent = this.state.intent;
     newIntent.intentName = e;
-    this.setState({intent: newIntent});
+    this.setState ({intent: newIntent});
+  }
+
+  handleExternalSourceSave (answerType) {
+    let newIntent = this.state.intent;
+    newIntent.answerType = answerType;
+    this.setState ({intent: newIntent});
   }
 }