<!doctype html>
<html>
<head>
<script src="static/js/react.js"></script>
<script src="static/js/jsx.js"></script>
<script src="static/js/jquery.js"></script>
<style>
.wrapper {
width: 900px;
height: 500px;
border: 1px solid #000;
margin: 0 auto;
}
.title-input {
width: 600px;
padding: 3px;
height: 20px;
margin: 5px;
}
.title-submit {
float: right;
margin: 5px;
height: 30px;
width: 270px;
}
</style>
</head>
<body>
<div id="main">
</div>
<script type="text/jsx">
/** @jsx React.DOM */
var TodoApp = React.createClass({
getInitialState: function() {
return {'records': []}
},
componentDidMount: function() {
this.getTasks();
},
addTask: function(value) {
var self = this;
$.ajax({
url: '/api/task/add',
dataType: 'json',
data: {value: value},
method: 'POST',
}).success(function(data) {
self.setState({records: data.tasks});
});
},
getTasks: function() {
$.ajax({
url: '/api/tasks/',
dataType: 'json',
success: function(data) {
this.setState({records: data.tasks});
}.bind(this),
error: function(xhr, status, err) {
console.error('/api/tasks/', status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="wrapper">
<ControlBox addTask={this.addTask} />
<Record records={this.state.records} />
</div>
)
}
});
var Record = React.createClass({
render: function() {
var createRecord = function(record) {
return (<li>{record}</li>);
};
return (
<ul>{this.props.records.map(createRecord)}</ul>
);
}
});
var ControlBox = React.createClass({
getInitialState: function() {
return {value: ""};
},
clickHandler: function(e) {
this.props.addTask(this.state.value);
this.setState({value: ""});
},
onChange: function(e) {
this.setState({value: e.target.value});
},
render: function() {
return (
<div className="control-wrapper">
<input onChange={this.onChange} value={this.state.value} className="title-input" type="text" name="title" />
<button onClick={this.clickHandler} className="title-submit">Create New</button>
</div>
)
}
});
React.renderComponent(
<TodoApp />,
document.getElementById('main')
);
</script>
</body>
</html>