Permalink
Browse files

Add Todos

  • Loading branch information...
alexishevia committed Nov 30, 2014
1 parent 6f3ba93 commit bd2f097117480a90fbe84d0887651341c7f68484
Showing with 94 additions and 1 deletion.
  1. +5 −0 README.md
  2. +28 −0 actions/createTodo.js
  3. +26 −0 components/Home.jsx
  4. +35 −1 stores/TodoStore.js
View
@@ -71,3 +71,8 @@ This is the process when we visit the home page:
Notice: when we visit the About page, and then click on the Home page, an AJAX request will be made to read from the todos service.
## Add Todos
- Add actions/createTodo.js. Will be executed when the user tries to create a new todo from the UI.
- Add `<input>` to Home.jsx, to allow user to add a todo. When the user clicks enter, createTodo is called.
- Add handlers for the todo creation lifecycle on the TodoStore
View
@@ -0,0 +1,28 @@
/**
* Copyright 2014, Yahoo! Inc.
* Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
*/
'use strict';
var TodoStore = require('../stores/TodoStore');
module.exports = function (context, payload, done) {
var todoStore = context.getStore(TodoStore);
var newTodo = todoStore.createTodo({
timestamp: Date.now(),
text: payload.text
});
context.dispatch('CREATE_TODO_START', newTodo);
context.service.create('todo', newTodo, {}, function (err, todo) {
if (err) {
context.dispatch('CREATE_TODO_FAILURE', newTodo);
done();
return;
}
context.dispatch('CREATE_TODO_SUCCESS', todo);
done();
});
};
View
@@ -3,6 +3,9 @@ var React = require('react');
var FluxibleMixin = require('fluxible').Mixin;
var TodoStore = require('../stores/TodoStore');
var TodoItem = require('./TodoItem');
var createTodo = require('../actions/createTodo');
var ENTER_KEY = 13;
module.exports = React.createClass({
mixins: [FluxibleMixin],
@@ -22,6 +25,22 @@ module.exports = React.createClass({
_onChange: function() {
this.setState(this.getState());
},
handleNewTodoKeyDown: function (event) {
if (event.which !== ENTER_KEY) {
return;
}
event.preventDefault();
var text = this.refs.newField.getDOMNode().value.trim();
if (text) {
this.props.context.executeAction(createTodo, {
text: text
});
this.refs.newField.getDOMNode().value = '';
}
},
render: function(){
var main;
var todos = this.state.items;
@@ -48,6 +67,13 @@ module.exports = React.createClass({
<div>
<header id="header">
<h1>todos</h1>
<input
ref="newField"
id="new-todo"
placeholder="What needs to be done?"
onKeyDown={this.handleNewTodoKeyDown}
autoFocus={true}
/>
</header>
{main}
</div>
View
@@ -8,7 +8,10 @@ var createStore = require('fluxible/utils/createStore');
module.exports = createStore({
storeName: 'TodoStore',
handlers: {
'RECEIVE_TODOS_SUCCESS': '_receiveTodos'
'RECEIVE_TODOS_SUCCESS': '_receiveTodos',
'CREATE_TODO_START': '_createTodoStart',
'CREATE_TODO_FAILURE': '_createTodoFailure',
'CREATE_TODO_SUCCESS': '_createTodoSuccess'
},
initialize: function () {
this.todos = [];
@@ -17,9 +20,40 @@ module.exports = createStore({
this.todos = todos;
this.emitChange();
},
_createTodoStart: function (todo) {
this.todos.push(todo);
this.emitChange();
},
_createTodoSuccess: function (newTodo) {
this.todos.forEach(function (todo, index) {
if (todo.id === newTodo.id) {
this.todos.splice(index, 1, newTodo);
}
}, this);
this.emitChange();
},
_createTodoFailure: function (failedTodo) {
this.todos.forEach(function (todo, index) {
if (todo.id === failedTodo.id) {
todo.failure = true;
}
}, this);
this.emitChange();
},
getAll: function () {
return this.todos;
},
createTodo: function(details) {
return {
id: 'td_' + details.timestamp,
editing: false,
completed: false,
text: details.text,
pending: true
};
},
dehydrate: function () {
return {
todos: this.todos

0 comments on commit bd2f097

Please sign in to comment.