Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
113 lines (108 sloc) 3.17 KB
<div>
<h1>todos - index</h1>
<hr />
<a class="btn btn-primary" href="/todos/new"> add</a>
<hr />
<div id="app"></div>
</div>
<!-- -->
<script type="text/babel">
//
class List extends React.Component {
constructor(props) {
super(props);
this.state = {data: ''}
this.complete = props.complete
// console.log( this.complete )
}
getList(complete){
this.complete = complete
axios.get('/api_todos/index').then(response => {
var todos = []
// console.log( response.data.docs )
var items = response.data.docs
self = this
items.forEach( function (item) {
if(item.complete == complete ){
//var dt = item.up_date
//var s = new String(dt)
//item.date_str = s.substring(0, 10)
todos.push(item)
}
});
// console.log( todos )
this.setState({ data: todos })
})
.catch(function (error) {
console.log(error)
})
}
componentDidMount(){
this.getList(0)
}
tabRow(){
if(this.state.data instanceof Array){
return this.state.data.map(function(row, index){
return (
<tr key={index}>
<td>
<h4><a href={"/todos/show/"+row._id}>{row.title}</a>
</h4>
</td>
<td><a href={"/todos/edit/"+row._id}>[ edit ]</a></td>
</tr>
)
})
}
}
tabHead(){
var completeMsg= "display= Not complete"
if(this.complete == 1){
completeMsg= "display= complete"
console.log("0-desu" )
}
return(
<div>
<p className="completeState">{completeMsg}</p>
<ul className="nav nav-tabs">
<li className="nav-item">
<a className="nav-link"
onClick={this.getList.bind(this, 0)}>未完
</a>
</li>
<li className="nav-item">
<a className="nav-link"
onClick={this.getList.bind(this, 1)}>完了済
</a>
</li>
</ul>
</div>
)
}
render(){
return (
<div>
{this.tabHead()}
<table className="table table-hover">
<thead>
<tr>
<td>Title</td>
<td>content</td>
</tr>
</thead>
<tbody>
{this.tabRow()}
</tbody>
</table>
</div>
)
}
}
ReactDOM.render(<List complete="0" />, document.getElementById('app'));
</script>
<!-- -->
<style>
.completeState{
color : green;
}
</style>
You can’t perform that action at this time.