<!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({
render: function() {
return (
<div className="wrapper">
<ControlBox add_url="/api/task/add" parentel={this} />
<Record ref="recordlist" url="/api/tasks/" />
</div>
)
}
});
var Record = React.createClass({
getInitialState: function() {
return {records: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({records: data.tasks});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
var createRecord = function(record) {
return (<li>{record}</li>);
};
return (
<ul>{this.state.records.map(createRecord)}</ul>
);
}
});
var ControlBox = React.createClass({
getInitialState: function() {
return {value: ""};
},
clickHandler: function(e) {
var self = this;
$.ajax({
url: this.props.add_url,
dataType: 'json',
data: {value: this.state.value},
method: 'POST',
}).success(function(data) {
self.props.parentel.refs.recordlist.setState({records: data.tasks});
});
},
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>