1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114
|
import React, { Component, Fragment} from 'react'
import { Link } from "react-router-dom";
import { addNewIntent } from "../../Actions/IntentActions";
import { connect } from "react-redux";
import PropTypes from "prop-types";
class AddNewIntent extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
questions: ['Enter your question here']
}
this.onChangeName = this.onChangeName.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
handleText = i => e => {
let questions = [...this.state.questions]
questions[i] = e.target.value
this.setState({
questions
})
}
handleDelete = i => e => {
e.preventDefault()
let questions = [
...this.state.questions.slice(0, i),
...this.state.questions.slice(i + 1)
]
this.setState({
questions
})
}
addQuestion = e => {
e.preventDefault()
let questions = this.state.questions.concat([''])
this.setState({
questions
})
}
onSubmit() {
const newIntent = {
name: this.state.name,
questions: this.state.questions
}
this.props.addNewIntent(newIntent, this.props.history);
}
onChangeName(e) {
this.setState({
[e.target.name]: e.target.value
});
}
render() {
return (
<Fragment>
<div className="addIntent">
<Link to="/" className="btn btn-light">
Back to Board
</Link>
<h1 className=" text-center">
New Intent
</h1>
<form onSubmit={this.onSubmit}>
<div className="form-group">
<label ><h5> Intent </h5></label>
<input
className="form-control form-control-lg"
placeholder="intent"
name="name"
value={this.state.name}
onChange={this.onChangeName}
required
/>
</div>
{this.state.questions.map((question, index) => (
<span key={index}>
<input
type="text"
onChange={this.handleText(index)}
value={question}
/>
<button onClick={this.handleDelete(index)}>X</button>
</span>
))}
<button onClick={this.addQuestion}>Add New Question</button>
<input
type="submit"
className="btn btn-primary btn-block mt-4"
/>
</form>
</div>
</Fragment>
)
}
}
AddNewIntent.propTypes = {
addNewIntent: PropTypes.func.isRequired,
};
const mapStateToProps = state => ({
});
export default connect(
mapStateToProps,
{ addNewIntent}
)(AddNewIntent); |
Partager