Refactor app to work with local storage

Also simplifying TodoApp to remove code now replaced by Redux.

app/actions/actions.jsx

@@ -12,6 +12,13 @@ export var addTodo = (text) => {
   };
 }
 
+export var addTodos = (todos) => {
+    return {
+        type: 'ADD_TODOS',
+        todos
+    };
+}
+
 export var toggleShowCompleted = () => {
   return {
     type: 'TOGGLE_SHOW_COMPLETED'

app/app.jsx

@@ -9,14 +9,20 @@ var {Route, Router, IndexRoute, hashHistory} = require('react-router');
 
 //Include our component dependencies
 var TodoApp = require('TodoApp');
+var TodoAPI = require('TodoAPI');
 
 var actions = require('actions');
 var store = require('configureStore').configure();
 
 store.subscribe(() => {
-    console.log('New state', store.getState());
+    var state = store.getState();
+    console.log('New state', state);
+    TodoAPI.setTodos(state.todos);
 });
 
+var initialTodos = TodoAPI.getTodos();
+store.dispatch(actions.addTodos(initialTodos));
+
 //Use jQuery to start foundation
 $(document).foundation();
 

app/components/TodoApp.jsx

@@ -6,47 +6,19 @@ var moment = require('moment');
 import TodoList from 'TodoList';
 import AddTodo from 'AddTodo';
 import TodoSearch from 'TodoSearch';
-var TodoAPI = require('TodoAPI');
 
 //Main component of this app, maintaining state
 var TodoApp = React.createClass({
-  getInitialState: function() {
-    return {
-      showCompleted: false,
-      searchText: '',
-      todos: TodoAPI.getTodos()
-    }
-  },
-    componentDidUpdate: function() {
-        //This is a little over eager to update even if the filter changes, but it works
-        TodoAPI.setTodos(this.state.todos);
-    },
-  handleAddTodo: function(text) {
-    this.setState({
-      todos: [
-        ...this.state.todos,
-        {id: UUID(), text: text, createdAt: moment().unix(), completedAt: undefined, complete: false}
-      ]
-    });
-  },
-  handleFilterTodo: function(searchText, showCompleted) {
-    this.setState({
-      showCompleted: showCompleted,
-      searchText: searchText.toLowerCase()
-    });
-  },
   render: function() {
-    var {todos, showCompleted, searchText} = this.state;
-    var filteredTodos = TodoAPI.filterTodos(todos, showCompleted, searchText);
     return (
       <div>
         <h1 className="page-title">Todo App</h1>
         <div className="row">
           <div className="column small-centered small-11 medium-6 large-5">
             <div className="container">
-                <TodoSearch onSearch={this.handleFilterTodo}/>
+                <TodoSearch/>
                 <TodoList/>
-                <AddTodo onNewTodo={this.handleAddTodo}/>
+                <AddTodo/>
             </div>
           </div>
         </div>

app/reducers/reducers.jsx

@@ -32,6 +32,12 @@ export var todosReducer = (state = [], action) => {
                  completedAt: undefined, complete: false}
                 ];
             break;
+        case 'ADD_TODOS':
+            return [
+                ...state,
+                ...action.todos
+                ];
+            break;
         case 'TOGGLE_TODO':
             return state.map((todo) => {
                 if (action.id === todo.id) {

app/tests/actions/actions.test.jsx

@@ -24,6 +24,17 @@ describe('Actions', () => {
     expect(res).toEqual(action);
   });
 
+  it('should generate add todos action', () => {
+    var action = {
+      type: 'ADD_TODOS',
+      todos: [{id: 1, text: 'something', completed: false, completedAt: undefined, createdAt: 5000}]
+    };
+
+    var res = actions.addTodos(action.todos);
+
+    expect(res).toEqual(action);
+  });
+
   it('should generate toggle show completed action', () => {
     var action = {
       type: 'TOGGLE_SHOW_COMPLETED'

app/tests/reducers/reducers.test.jsx

@@ -41,6 +41,16 @@ describe('Reducers', () => {
       expect(res[0].text).toEqual(action.text);
     });
 
+    it('should add new todos', () => {
+      var action = {
+        type: 'ADD_TODOS',
+        todos: [{id: 1, text: 'something', completed: false, completedAt: undefined, createdAt: 5000}]
+      };
+      var res = reducers.todosReducer(df([]), df(action));
+      expect(res.length).toEqual(1);
+      expect(res[0]).toEqual(action.todos[0]);
+    });
+
     it('should toggle a todo', () => {
       var state = [{id: 123, text: 'hello', createdAt: 123,
                  completedAt: 234, complete: true}];