Skip to content
Permalink
Browse files

Step 8 of TODO App with React tutorial - adding functionality to hide…

… completed TODO items and showing count of active items in header
  • Loading branch information
itamaro committed Nov 28, 2015
1 parent ac69d1b commit 676a7725cf5708271b08404676189c10d4a220f0
Showing with 31 additions and 2 deletions.
  1. +31 −2 App.jsx
33 App.jsx
@@ -4,10 +4,24 @@ App = React.createClass({
// This mixin makes the getMeteorData method work
mixins: [ReactMeteorData],

getInitialState() {
return {
hideCompleted: false
}
},

// Loads items from the Tasks collection and puts them on this.data.tasks
getMeteorData() {
let query = {};

if (this.state.hideCompleted) {
// If hide completed is checked, filter tasks
query = {checked: {$ne: true}};
}

return {
tasks: Tasks.find({}, {sort: {createdAt: -1}}).fetch()
tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
incompleteCount: Tasks.find({checked: {$ne: true}}).count()
}
},

@@ -33,11 +47,26 @@ App = React.createClass({
React.findDOMNode(this.refs.textInput).value = "";
},

toggleHideCompleted() {
this.setState({
hideCompleted: ! this.state.hideCompleted
});
},

render() {
return (
<div className="container">
<header>
<h1>Todo List</h1>
<h1>Todo List ({this.data.incompleteCount})</h1>

<label className="hide-completed">
<input
type="checkbox"
readOnly={true}
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted} />
Hide Completed Tasks
</label>

<form className="new-task" onSubmit={this.handleSubmit} >
<input

0 comments on commit 676a772

Please sign in to comment.