stage 3

web/src/components/IntentDetails.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import '../css/Intent.css'
+
+class IntentDetails extends Component {
+  constructor(props){
+    super(props);
+
+    this.state= {intent: props.selectedIntent};
+
+    this.addQuestion = this.addQuestion.bind(this);
+    this.deleteQuestion = this.deleteQuestion.bind(this);
+  }
+
+  componentWillReceiveProps(props){
+    this.setState({intent: props.selectedIntent});
+  }
+
+  render() {
+    return (
+      <div className="IntentDetails">
+        <p> Questions </p>
+        {
+          this.state.intent.questions.map((question, index)=>{
+            return (
+              <div key={index} className="QuestionBox">
+                <input value={question}></input>
+                <button onClick={()=>{this.deleteQuestion(question)}}>Del</button>
+              </div>
+            );
+          })
+        }
+        <p> Answer </p>
+        {
+          <input value={this.state.intent.answer}></input>
+        }
+        <br></br>
+        <br></br>
+        <button onClick={this.addQuestion}>Add question</button>
+        <button onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete</button>
+        <button onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</button>
+      </div>
+    );
+  }
+
+  addQuestion(){
+    let newIntent = this.state.intent;
+    newIntent.questions.push('New question');
+    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});
+  }
+}
+
+export default IntentDetails;