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;

web/src/components/IntentItem.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+import '../css/Intent.css'
+
+class IntentItem extends Component {
+  
+    constructor(props){
+        super(props);
+
+        this.state={intent: props.intent, index: props.index, onClick: props.onClick};
+    }
+  
+    render() {
+        return (
+            <div className={false ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent)}}>
+                <p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
+            </div>
+        );
+    }
+}
+
+export default IntentItem;

web/src/components/IntentList.js

@@ -0,0 +1,37 @@
+import React, { Component } from 'react';
+import QuestionItem from './IntentItem';
+import '../css/Intent.css'
+
+class IntentList extends Component {
+    constructor (props){
+        super(props);
+
+        this.state = {intents: props.allIntents, selected:0, onIntentClick:props.onIntentClick};
+    }
+
+    componentWillReceiveProps(props){
+        this.setState({intents: props.allIntents});
+    }
+
+    render() {
+        return (
+            <div className="IntentList">
+                <div className="IntentList-title">
+                    <p>Intents</p>
+                </div>
+                {
+                    this.state.intents.map((intent,index)=>{
+                    return <QuestionItem 
+                                key={index} intent={intent} index={index} 
+                                onClick={this.state.onIntentClick}>
+                            </QuestionItem>
+                    })
+                }
+                <br></br>
+                <button onClick={this.props.handleAddIntentClick}>Add intent</button>
+            </div>  
+        );
+    }
+}
+
+export default IntentList;