From d7a5e7f791c6f6659c4767f8bb4afa853d793647 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:00:51 -0700

Subject: [PATCH 01/41] Step 1: Run `meteor create`

---

.meteor/.finished-upgraders | 8 ++++++++

.meteor/.gitignore | 1 +

.meteor/.id | 7 +++++++

.meteor/packages | 9 +++++++++

.meteor/platforms | 2 ++

.meteor/release | 1 +

.meteor/versions | 48 +++++++++++++++++++++++++++++++++++++++++++++

simple-todos-react.css | 1 +

simple-todos-react.html | 14 +++++++++++++

simple-todos-react.js | 23 ++++++++++++++++++++++

10 files changed, 114 insertions(+)

create mode 100644 .meteor/.finished-upgraders

create mode 100644 .meteor/.gitignore

create mode 100644 .meteor/.id

create mode 100644 .meteor/packages

create mode 100644 .meteor/platforms

create mode 100644 .meteor/release

create mode 100644 .meteor/versions

create mode 100644 simple-todos-react.css

create mode 100644 simple-todos-react.html

create mode 100644 simple-todos-react.js

diff --git a/.meteor/.finished-upgraders b/.meteor/.finished-upgraders

new file mode 100644

index 0000000..8a76103

--- /dev/null

+++ b/.meteor/.finished-upgraders

@@ -0,0 +1,8 @@

+# This file contains information which helps Meteor properly upgrade your

+# app when you run 'meteor update'. You should check it into version control

+# with your project.

+

+notices-for-0.9.0

+notices-for-0.9.1

+0.9.4-platform-file

+notices-for-facebook-graph-api-2

diff --git a/.meteor/.gitignore b/.meteor/.gitignore

new file mode 100644

index 0000000..4083037

--- /dev/null

+++ b/.meteor/.gitignore

@@ -0,0 +1 @@

+local

diff --git a/.meteor/.id b/.meteor/.id

new file mode 100644

index 0000000..3bab3ba

--- /dev/null

+++ b/.meteor/.id

@@ -0,0 +1,7 @@

+# This file contains a token that is unique to your project.

+# Check it into your repository along with the rest of this directory.

+# It can be used for purposes such as:

+# - ensuring you don't accidentally deploy one app on top of another

+# - providing package authors with aggregated statistics

+

+ucqipf8prm38bs7dxj

diff --git a/.meteor/packages b/.meteor/packages

new file mode 100644

index 0000000..99704e0

--- /dev/null

+++ b/.meteor/packages

@@ -0,0 +1,9 @@

+# Meteor packages used by this project, one per line.

+# Check this file (and the other files in this directory) into your repository.

+#

+# 'meteor add' and 'meteor remove' will edit this file for you,

+# but you can also edit it by hand.

+

+meteor-platform

+autopublish

+insecure

diff --git a/.meteor/platforms b/.meteor/platforms

new file mode 100644

index 0000000..efeba1b

--- /dev/null

+++ b/.meteor/platforms

@@ -0,0 +1,2 @@

+server

+browser

diff --git a/.meteor/release b/.meteor/release

new file mode 100644

index 0000000..dab6b55

--- /dev/null

+++ b/.meteor/release

@@ -0,0 +1 @@

+METEOR@1.1.0.2

diff --git a/.meteor/versions b/.meteor/versions

new file mode 100644

index 0000000..410e1d9

--- /dev/null

+++ b/.meteor/versions

@@ -0,0 +1,48 @@

+autopublish@1.0.3

+autoupdate@1.2.1

+base64@1.0.3

+binary-heap@1.0.3

+blaze@2.1.2

+blaze-tools@1.0.3

+boilerplate-generator@1.0.3

+callback-hook@1.0.3

+check@1.0.5

+ddp@1.1.0

+deps@1.0.7

+ejson@1.0.6

+fastclick@1.0.3

+geojson-utils@1.0.3

+html-tools@1.0.4

+htmljs@1.0.4

+http@1.1.0

+id-map@1.0.3

+insecure@1.0.3

+jquery@1.11.3_2

+json@1.0.3

+launch-screen@1.0.2

+livedata@1.0.13

+logging@1.0.7

+meteor@1.1.6

+meteor-platform@1.2.2

+minifiers@1.1.5

+minimongo@1.0.8

+mobile-status-bar@1.0.3

+mongo@1.1.0

+observe-sequence@1.0.6

+ordered-dict@1.0.3

+random@1.0.3

+reactive-dict@1.1.0

+reactive-var@1.0.5

+reload@1.1.3

+retry@1.0.3

+routepolicy@1.0.5

+session@1.1.0

+spacebars@1.0.6

+spacebars-compiler@1.0.6

+templating@1.1.1

+tracker@1.0.7

+ui@1.0.6

+underscore@1.0.3

+url@1.0.4

+webapp@1.2.0

+webapp-hashing@1.0.3

diff --git a/simple-todos-react.css b/simple-todos-react.css

new file mode 100644

index 0000000..b6b4052

--- /dev/null

+++ b/simple-todos-react.css

@@ -0,0 +1 @@

+/* CSS declarations go here */

diff --git a/simple-todos-react.html b/simple-todos-react.html

new file mode 100644

index 0000000..e296a58

--- /dev/null

+++ b/simple-todos-react.html

@@ -0,0 +1,14 @@

+<head>

+ <title>simple-todos-react</title>

+</head>

+

+<body>

+ <h1>Welcome to Meteor!</h1>

+

+ {{> hello}}

+</body>

+

+<template name="hello">

+ <button>Click Me</button>

+ <p>You've pressed the button {{counter}} times.</p>

+</template>

diff --git a/simple-todos-react.js b/simple-todos-react.js

new file mode 100644

index 0000000..4f8c65d

--- /dev/null

+++ b/simple-todos-react.js

@@ -0,0 +1,23 @@

+if (Meteor.isClient) {

+ // counter starts at 0

+ Session.setDefault('counter', 0);

+

+ Template.hello.helpers({

+ counter: function () {

+ return Session.get('counter');

+ }

+ });

+

+ Template.hello.events({

+ 'click button': function () {

+ // increment the counter when button is clicked

+ Session.set('counter', Session.get('counter') + 1);

+ }

+ });

+}

+

+if (Meteor.isServer) {

+ Meteor.startup(function () {

+ // code to run on server at startup

+ });

+}

--

2.2.1

From 96bd5130dbd707aa497a0effa85cb7316cd7d560 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:02:01 -0700

Subject: [PATCH 02/41] Step 2.1: Add the React package

---

.meteor/packages | 1 +

.meteor/versions | 10 ++++++++++

2 files changed, 11 insertions(+)

diff --git a/.meteor/packages b/.meteor/packages

index 99704e0..10cd8b0 100644

--- a/.meteor/packages

+++ b/.meteor/packages

@@ -7,3 +7,4 @@

meteor-platform

autopublish

insecure

+react

diff --git a/.meteor/versions b/.meteor/versions

index 410e1d9..288ee5f 100644

--- a/.meteor/versions

+++ b/.meteor/versions

@@ -1,5 +1,7 @@

autopublish@1.0.3

autoupdate@1.2.1

+babel-compiler@5.6.15

+babel-runtime@0.1.1

base64@1.0.3

binary-heap@1.0.3

blaze@2.1.2

@@ -7,6 +9,8 @@ blaze-tools@1.0.3

boilerplate-generator@1.0.3

callback-hook@1.0.3

check@1.0.5

+coffeescript@1.0.6

+cosmos:browserify@0.4.0

ddp@1.1.0

deps@1.0.7

ejson@1.0.6

@@ -19,6 +23,7 @@ id-map@1.0.3

insecure@1.0.3

jquery@1.11.3_2

json@1.0.3

+jsx@0.1.1

launch-screen@1.0.2

livedata@1.0.13

logging@1.0.7

@@ -31,6 +36,11 @@ mongo@1.1.0

observe-sequence@1.0.6

ordered-dict@1.0.3

random@1.0.3

+react@0.1.2

+react-meteor-data@0.1.0

+react-runtime@0.13.3_2

+react-runtime-dev@0.13.3_2

+react-runtime-prod@0.13.3_1

reactive-dict@1.1.0

reactive-var@1.0.5

reload@1.1.3

--

2.2.1

From 3cec511c67cb3b78b43329d12b55da7efb2a107e Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:03:54 -0700

Subject: [PATCH 03/41] Step 2.2: Replace starter HTML code

---

simple-todos-react.html | 11 ++---------

1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/simple-todos-react.html b/simple-todos-react.html

index e296a58..1aae2d4 100644

--- a/simple-todos-react.html

+++ b/simple-todos-react.html

@@ -1,14 +1,7 @@

<head>

- <title>simple-todos-react</title>

+ <title>Todo List</title>

</head>

<body>

- <h1>Welcome to Meteor!</h1>

-

- {{> hello}}

+ <div id="render-target"></div>

</body>

-

-<template name="hello">

- <button>Click Me</button>

- <p>You've pressed the button {{counter}} times.</p>

-</template>

--

2.2.1

From 36c59c642fc6a7b48ebe0378c5f75488854479c7 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:05:08 -0700

Subject: [PATCH 04/41] Step 2.3: Replace starter JS

---

simple-todos-react.js | 23 -----------------------

simple-todos-react.jsx | 8 ++++++++

2 files changed, 8 insertions(+), 23 deletions(-)

delete mode 100644 simple-todos-react.js

create mode 100644 simple-todos-react.jsx

diff --git a/simple-todos-react.js b/simple-todos-react.js

deleted file mode 100644

index 4f8c65d..0000000

--- a/simple-todos-react.js

+++ /dev/null

@@ -1,23 +0,0 @@

-if (Meteor.isClient) {

- // counter starts at 0

- Session.setDefault('counter', 0);

-

- Template.hello.helpers({

- counter: function () {

- return Session.get('counter');

- }

- });

-

- Template.hello.events({

- 'click button': function () {

- // increment the counter when button is clicked

- Session.set('counter', Session.get('counter') + 1);

- }

- });

-}

-

-if (Meteor.isServer) {

- Meteor.startup(function () {

- // code to run on server at startup

- });

-}

diff --git a/simple-todos-react.jsx b/simple-todos-react.jsx

new file mode 100644

index 0000000..a7e2d2f

--- /dev/null

+++ b/simple-todos-react.jsx

@@ -0,0 +1,8 @@

+if (Meteor.isClient) {

+ // This code is executed on the client only

+

+ Meteor.startup(function () {

+ // Use Meteor.startup to render the component after the page is ready

+ React.render(<App />, document.getElementById("render-target"));

+ });

+}

--

2.2.1

From 1b8a7577860c7d9f0f0afa6996cf8fa6fe92d3ec Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:05:58 -0700

Subject: [PATCH 05/41] Step 2.4: Create App component

---

App.jsx | 30 ++++++++++++++++++++++++++++++

1 file changed, 30 insertions(+)

create mode 100644 App.jsx

diff --git a/App.jsx b/App.jsx

new file mode 100644

index 0000000..27ac66e

--- /dev/null

+++ b/App.jsx

@@ -0,0 +1,30 @@

+// App component - represents the whole app

+App = React.createClass({

+ getTasks() {

+ return [

+ { _id: 1, text: "This is task 1" },

+ { _id: 2, text: "This is task 2" },

+ { _id: 3, text: "This is task 3" }

+ ];

+ },

+

+ renderTasks() {

+ return this.getTasks().map((task) => {

+ return <Task key={task._id} task={task} />;

+ });

+ },

+

+ render() {

+ return (

+ <div className="container">

+ <header>

+ <h1>Todo List</h1>

+ </header>

+

+ <ul>

+ {this.renderTasks()}

+ </ul>

+ </div>

+ );

+ }

+});

--

2.2.1

From c676d9f668e3adb9c4f214bdafaa8f388d63678b Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:06:31 -0700

Subject: [PATCH 06/41] Step 2.5: Create Task component

---

Task.jsx | 13 +++++++++++++

1 file changed, 13 insertions(+)

create mode 100644 Task.jsx

diff --git a/Task.jsx b/Task.jsx

new file mode 100644

index 0000000..c49e7ac

--- /dev/null

+++ b/Task.jsx

@@ -0,0 +1,13 @@

+// Task component - represents a single todo item

+Task = React.createClass({

+ propTypes: {

+ // This component gets the task to display through a React prop.

+ // We can use propTypes to indicate it is required

+ task: React.PropTypes.object.isRequired

+ },

+ render() {

+ return (

+ <li>{this.props.task.text}</li>

+ );

+ }

+});

--

2.2.1

From ec0e0aee25ff51d8f3096ea446537113aded6ab3 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:07:02 -0700

Subject: [PATCH 07/41] Step 2.6: Add CSS

---

simple-todos-react.css | 125 +++++++++++++++++++++++++++++++++++++++++++++++++

1 file changed, 125 insertions(+)

diff --git a/simple-todos-react.css b/simple-todos-react.css

index b6b4052..cec3ae6 100644

--- a/simple-todos-react.css

+++ b/simple-todos-react.css

@@ -1 +1,126 @@

/* CSS declarations go here */

+body {

+ font-family: sans-serif;

+ background-color: #315481;

+ background-image: linear-gradient(to bottom, #315481, #918e82 100%);

+ background-attachment: fixed;

+

+ position: absolute;

+ top: 0;

+ bottom: 0;

+ left: 0;

+ right: 0;

+

+ padding: 0;

+ margin: 0;

+

+ font-size: 14px;

+}

+

+.container {

+ max-width: 600px;

+ margin: 0 auto;

+ min-height: 100%;

+ background: white;

+}

+

+header {

+ background: #d2edf4;

+ background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);

+ padding: 20px 15px 15px 15px;

+ position: relative;

+}

+

+#login-buttons {

+ display: block;

+}

+

+h1 {

+ font-size: 1.5em;

+ margin: 0;

+ margin-bottom: 10px;

+ display: inline-block;

+ margin-right: 1em;

+}

+

+form {

+ margin-top: 10px;

+ margin-bottom: -10px;

+ position: relative;

+}

+

+.new-task input {

+ box-sizing: border-box;

+ padding: 10px 0;

+ background: transparent;

+ border: none;

+ width: 100%;

+ padding-right: 80px;

+ font-size: 1em;

+}

+

+.new-task input:focus{

+ outline: 0;

+}

+

+ul {

+ margin: 0;

+ padding: 0;

+ background: white;

+}

+

+.delete {

+ float: right;

+ font-weight: bold;

+ background: none;

+ font-size: 1em;

+ border: none;

+ position: relative;

+}

+

+li {

+ position: relative;

+ list-style: none;

+ padding: 15px;

+ border-bottom: #eee solid 1px;

+}

+

+li .text {

+ margin-left: 10px;

+}

+

+li.checked {

+ color: #888;

+}

+

+li.checked .text {

+ text-decoration: line-through;

+}

+

+li.private {

+ background: #eee;

+ border-color: #ddd;

+}

+

+header .hide-completed {

+ float: right;

+}

+

+.toggle-private {

+ margin-left: 5px;

+}

+

+@media (max-width: 600px) {

+ li {

+ padding: 12px 15px;

+ }

+

+ .search {

+ width: 150px;

+ clear: both;

+ }

+

+ .new-task input {

+ padding-bottom: 5px;

+ }

+}

\ No newline at end of file

--

2.2.1

From b21327904ff8de4d51618d88edc6aabb39060c65 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:08:08 -0700

Subject: [PATCH 08/41] Step 3.1: Define tasks collection

---

simple-todos-react.jsx | 3 +++

1 file changed, 3 insertions(+)

diff --git a/simple-todos-react.jsx b/simple-todos-react.jsx

index a7e2d2f..a67b030 100644

--- a/simple-todos-react.jsx

+++ b/simple-todos-react.jsx

@@ -1,3 +1,6 @@

+// Define a collection to hold our tasks

+Tasks = new Mongo.Collection("tasks");

+

if (Meteor.isClient) {

// This code is executed on the client only

--

2.2.1

From ce86ff010f94a8a1cc2c8e6f9331df080565682b Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:08:44 -0700

Subject: [PATCH 09/41] Step 3.2: Modify App component to get tasks from

collection

---

App.jsx | 18 +++++++++++-------

1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/App.jsx b/App.jsx

index 27ac66e..60f1400 100644

--- a/App.jsx

+++ b/App.jsx

@@ -1,15 +1,19 @@

// App component - represents the whole app

App = React.createClass({

- getTasks() {

- return [

- { _id: 1, text: "This is task 1" },

- { _id: 2, text: "This is task 2" },

- { _id: 3, text: "This is task 3" }

- ];

+

+ // This mixin makes the getMeteorData method work

+ mixins: [ReactMeteorData],

+

+ // Loads items from the Tasks collection and puts them on this.data.tasks

+ getMeteorData() {

+ return {

+ tasks: Tasks.find({}).fetch()

+ }

},

renderTasks() {

- return this.getTasks().map((task) => {

+ // Get tasks from this.data.tasks

+ return this.data.tasks.map((task) => {

return <Task key={task._id} task={task} />;

});

},

--

2.2.1

From 8a0525ce1e84b872ca35743b7101f14ec627b41f Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:13:37 -0700

Subject: [PATCH 10/41] Step 4.1: Add form for new tasks

---

App.jsx | 7 +++++++

1 file changed, 7 insertions(+)

diff --git a/App.jsx b/App.jsx

index 60f1400..7b798bb 100644

--- a/App.jsx

+++ b/App.jsx

@@ -23,6 +23,13 @@ App = React.createClass({

<div className="container">

<header>

<h1>Todo List</h1>

+

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

+ <input

+ type="text"

+ ref="textInput"

+ placeholder="Type to add new tasks" />

+ </form>

</header>

<ul>

--

2.2.1

From 1b87eff8bd37fc375f506c32b9c4d765f15b301f Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:14:08 -0700

Subject: [PATCH 11/41] Step 4.2: Add handleSubmit method to App component

---

App.jsx | 15 +++++++++++++++

1 file changed, 15 insertions(+)

diff --git a/App.jsx b/App.jsx

index 7b798bb..67184cc 100644

--- a/App.jsx

+++ b/App.jsx

@@ -18,6 +18,21 @@ App = React.createClass({

});

},

+ handleSubmit(event) {

+ event.preventDefault();

+

+ // Find the text field via the React ref

+ var text = React.findDOMNode(this.refs.textInput).value.trim();

+

+ Tasks.insert({

+ text: text,

+ createdAt: new Date() // current time

+ });

+

+ // Clear form

+ React.findDOMNode(this.refs.textInput).value = "";

+ },

+

render() {

return (

<div className="container">

--

2.2.1

From 4bd9bbafd1845dd9aee21da655f0dcde7b4b3da5 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:14:40 -0700

Subject: [PATCH 12/41] Step 4.3: Update getMeteorData to sort tasks by time

---

App.jsx | 2 +-

1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/App.jsx b/App.jsx

index 67184cc..64197bd 100644

--- a/App.jsx

+++ b/App.jsx

@@ -7,7 +7,7 @@ App = React.createClass({

// Loads items from the Tasks collection and puts them on this.data.tasks

getMeteorData() {

return {

- tasks: Tasks.find({}).fetch()

+ tasks: Tasks.find({}, {sort: {createdAt: -1}}).fetch()

}

},

--

2.2.1

From 2560d9ad137bf546344670d81fcaaee6ef38c560 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:17:06 -0700

Subject: [PATCH 13/41] Step 5.1: Update Task component to add features

---

Task.jsx | 32 +++++++++++++++++++++++++++++---

1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/Task.jsx b/Task.jsx

index c49e7ac..d1c618b 100644

--- a/Task.jsx

+++ b/Task.jsx

@@ -1,13 +1,39 @@

// Task component - represents a single todo item

Task = React.createClass({

propTypes: {

- // This component gets the task to display through a React prop.

- // We can use propTypes to indicate it is required

task: React.PropTypes.object.isRequired

},

+

+ toggleChecked() {

+ // Set the checked property to the opposite of its current value

+ Tasks.update(this.props.task._id, {

+ $set: {checked: ! this.props.task.checked}

+ });

+ },

+

+ deleteThisTask() {

+ Tasks.remove(this.props.task._id);

+ },

+

render() {

+ // Give tasks a different className when they are checked off,

+ // so that we can style them nicely in CSS

+ const taskClassName = this.props.task.checked ? "checked" : "";

+

return (

- <li>{this.props.task.text}</li>

+ <li className={taskClassName}>

+ <button className="delete" onClick={this.deleteThisTask}>

+ &times;

+ </button>

+

+ <input

+ type="checkbox"

+ readOnly={true}

+ checked={this.props.task.checked}

+ onClick={this.toggleChecked} />

+

+ <span className="text">{this.props.task.text}</span>

+ </li>

);

}

});

--

2.2.1

From 922d90961e4cdab0aaef6c07438d853b2d16e32a Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:21:30 -0700

Subject: [PATCH 14/41] Step 8.1: Add hide completed checkbox to App component

---

App.jsx | 9 +++++++++

1 file changed, 9 insertions(+)

diff --git a/App.jsx b/App.jsx

index 64197bd..ef39e73 100644

--- a/App.jsx

+++ b/App.jsx

@@ -39,6 +39,15 @@ App = React.createClass({

<header>

<h1>Todo List</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

type="text"

--

2.2.1

From a6bea499cba226edcf0f537615cc0ecfc0f47230 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:22:07 -0700

Subject: [PATCH 15/41] Step 8.2: Add getInitialState to App component

---

App.jsx | 6 ++++++

1 file changed, 6 insertions(+)

diff --git a/App.jsx b/App.jsx

index ef39e73..144582d 100644

--- a/App.jsx

+++ b/App.jsx

@@ -4,6 +4,12 @@ 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() {

return {

--

2.2.1

From 59dab20a8dbb012f3313dc660a1266612298e786 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:22:32 -0700

Subject: [PATCH 16/41] Step 8.3: Add toggleHideCompleted handler to App

---

App.jsx | 6 ++++++

1 file changed, 6 insertions(+)

diff --git a/App.jsx b/App.jsx

index 144582d..6799fca 100644

--- a/App.jsx

+++ b/App.jsx

@@ -39,6 +39,12 @@ App = React.createClass({

React.findDOMNode(this.refs.textInput).value = "";

},

+ toggleHideCompleted() {

+ this.setState({

+ hideCompleted: ! this.state.hideCompleted

+ });

+ },

+

render() {

return (

<div className="container">

--

2.2.1

From f48c03507b9438ad4c1e9a48a2d5b82b1bd354ea Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:23:02 -0700

Subject: [PATCH 17/41] Step 8.4: Replace getMeteorData to filter tasks

---

App.jsx | 11 +++++++++--

1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/App.jsx b/App.jsx

index 6799fca..105577e 100644

--- a/App.jsx

+++ b/App.jsx

@@ -12,9 +12,16 @@ App = React.createClass({

// Loads items from the Tasks collection and puts them on this.data.tasks

getMeteorData() {

- return {

- tasks: Tasks.find({}, {sort: {createdAt: -1}}).fetch()

+ let query = {};

+

+ if (this.state.hideCompleted) {

+ // If hide completed is checked, filter tasks

+ query = {checked: {$ne: true}};

}

+

+ return {

+ tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch()

+ };

},

renderTasks() {

--

2.2.1

From 0ffc7a42c13617ffa11d1460f1251531043813fd Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:23:44 -0700

Subject: [PATCH 18/41] Step 8.5: Update getMeteorData to return

incompleteCount

---

App.jsx | 3 ++-

1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/App.jsx b/App.jsx

index 105577e..09415f3 100644

--- a/App.jsx

+++ b/App.jsx

@@ -20,7 +20,8 @@ App = React.createClass({

}

return {

- tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch()

+ tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),

+ incompleteCount: Tasks.find({checked: {$ne: true}}).count()

};

},

--

2.2.1

From 8173671b2f2e8411b20194d818abadea83f974f0 Mon Sep 17 00:00:00 2001

From: Sashko Stubailo <sashko@stubailo.com>

Date: Mon, 13 Jul 2015 12:24:09 -0700

Subject: [PATCH 19/41] Step 8.6: Display incompleteCount in the header

---

App.jsx | 2 +-

1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/App.jsx b/App.jsx

index 09415f3..f5b8224 100644

--- a/App.jsx

+++ b/App.jsx

@@ -57,7 +57,7 @@ App = React.createClass({

return (

<div className="container">

<header>

- <h1>Todo List</h1>

+ <h1>Todo List ({this.data.incompleteCount})</h1>

<label className="hide-completed">

<input

--

2.2.1

From 1c45b6bfb12ee5980a15e6e5ae014ee2bdfaf08f Mon Sep 17 00:00:00 2001