Skip to content

Instantly share code, notes, and snippets.

View dai-shi's full-sized avatar

Daishi Kato dai-shi

View GitHub Profile
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 246ad81..3347daf 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -31,6 +31,12 @@ class App extends Component {
ReactDOM.findDOMNode(this.refs.textInput).value = '';
}
+ toggleHideCompleted() {
+ this.setState({
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 3347daf..1500877 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -38,7 +38,11 @@ class App extends Component {
}
renderTasks() {
- return this.props.tasks.map((task) => (
+ let filteredTasks = this.props.tasks;
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 546d198..31d7564 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -35,6 +35,16 @@ class App extends Component {
<header>
<h1>Todo List</h1>
+ <label className="hide-completed">
+ <input
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 31d7564..246ad81 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -8,6 +8,14 @@ import Task from './Task.jsx';
// App component - represents the whole app
class App extends Component {
+ constructor(props) {
+ super(props);
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 1500877..75714e5 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -87,5 +87,6 @@ App.propTypes = {
export default createContainer(() => {
return {
tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
+ incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
};
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 75714e5..78e5548 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -51,7 +51,7 @@ class App extends Component {
return (
<div className="container">
<header>
- <h1>Todo List</h1>
+ <h1>Todo List ({this.props.incompleteCount})</h1>
diff --git a/imports/ui/Task.jsx b/imports/ui/Task.jsx
index a5000e0..3140871 100644
--- a/imports/ui/Task.jsx
+++ b/imports/ui/Task.jsx
@@ -1,10 +1,40 @@
import React, { Component, PropTypes } from 'react';
+import { Tasks } from '../api/tasks.js';
+
// Task component - represents a single todo item
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 8f1bf8b..c452da9 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -18,6 +18,14 @@ class App extends Component {
<div className="container">
<header>
<h1>Todo List</h1>
+
+ <form className="new-task" onSubmit={this.handleSubmit.bind(this)} >
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index c452da9..332bd6e 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -1,4 +1,5 @@
import React, { Component, PropTypes } from 'react';
+import ReactDOM from 'react-dom';
import { createContainer } from 'meteor/react-meteor-data';
import { Tasks } from '../api/tasks.js';
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
index 332bd6e..546d198 100644
--- a/imports/ui/App.jsx
+++ b/imports/ui/App.jsx
@@ -58,6 +58,6 @@ App.propTypes = {
export default createContainer(() => {
return {
- tasks: Tasks.find({}).fetch(),
+ tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),