start adding header

src/demos/todomvc/todo-footer.jsx

@@ -31,7 +31,7 @@ const TodoFooter = ({
   onClearCompleted,
   nowShowing,
 }) => {
-  const activeTodoWord = pluralize(this.props.count, 'item');
+  const activeTodoWord = pluralize(count, 'item');
   const selected = item => ({
     ...item,
     selected: item.state === nowShowing,

src/demos/todomvc/todo-header.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import withReact from '../../js/with-react';
+import AXAHeader from '../../components/o-header';
+import AXAHeaderMain from '../../components/m-header-main';
+import AXAHeaderLogo from '../../components/m-header-logo';
+
+const withReactBound = withReact(React);
+const AXAHeaderReact = withReactBound(AXAHeader);
+const AXAHeaderMainReact = withReactBound(AXAHeaderMain);
+const AXAHeaderLogoReact = withReactBound(AXAHeaderLogo);
+
+const TodoHeader = ({
+  newTodo,
+  handleNewTodoKeyDown,
+  handleChange,
+}) => (
+  <AXAHeaderReact>
+    <AXAHeaderMainReact firstLeft>
+      <AXAHeaderLogoReact />
+      <h1 className="m-todo-header__title">Todos</h1>
+      <input
+        className="m-todo-header__new"
+        placeholder="What needs to be done?"
+        value={newTodo}
+        onKeyDown={handleNewTodoKeyDown}
+        onChange={handleChange}
+        autoFocus={true}
+      />
+    </AXAHeaderMainReact>
+  </AXAHeaderReact>
+);
+
+export default TodoHeader;

src/demos/todomvc/todo-item.jsx

@@ -14,7 +14,6 @@ class TodoItem extends Component {
   constructor(props, context) {
     super(props, context);
 
-    this.onClick = this.onClick.bind(this);
     this.handleRef = this.handleRef.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
     this.handleEdit = this.handleEdit.bind(this);

src/demos/todomvc/todos-list.jsx

@@ -7,8 +7,8 @@ const TodosList = ({
   ...props,
 }) => Array.isArray(shownTodos) && shownTodos.length ? (
   <ul className="m-todo__list">
-    {shownTodos.map(({ id, ...todo }) => (
-      <TodoItem {...todo} {...props} editing={editing === id} id={id} key={todo.id} />
+    {shownTodos.map(todo => (
+      <TodoItem todo={todo} {...props} editing={editing === todo.id} id={todo.id} key={todo.id} />
     ))}
   </ul>
 ) : null;

src/demos/todomvc/todos.jsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import TodoHeader from './todo-header';
 import TodosList from './todos-list';
 import TodoFooter from './todo-footer';
 import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from './utils';
@@ -15,6 +16,8 @@ class Todos extends Component {
     this.save = this.save.bind(this);
     this.cancel = this.cancel.bind(this);
     this.clearCompleted = this.clearCompleted.bind(this);
+    this.handleNewTodoKeyDown = this.handleNewTodoKeyDown.bind(this);
+    this.handleChange = this.handleChange.bind(this);
 
     this.state = {
       nowShowing: ALL_TODOS,
@@ -32,6 +35,8 @@ class Todos extends Component {
       return;
     }
 
+    console.log('handleNewTodoKeyDown', event);
+
     event.preventDefault();
 
     const val = this.state.newTodo.trim();
@@ -92,6 +97,7 @@ class Todos extends Component {
     const completedCount = todos.length - activeTodoCount;
 
     return [
+      <TodoHeader newTodo={state.newTodo} handleNewTodoKeyDown={this.handleNewTodoKeyDown} handleChange={this.handleChange} key={0} />,
       <TodosList
         shownTodos={shownTodos}
         onToggle={this.toggle}
@@ -100,9 +106,10 @@ class Todos extends Component {
         editing={state.editing}
         onSave={this.save}
         onCancel={this.cancel}
+        key={1}
       />,
       ((activeTodoCount || completedCount) ? (
-        <TodoFooter count={activeTodoCount} completedCount={completedCount} nowShowing={state.nowShowing} onClearCompleted={this.clearCompleted} />
+        <TodoFooter count={activeTodoCount} completedCount={completedCount} nowShowing={state.nowShowing} onClearCompleted={this.clearCompleted} key={2} />
       ) : null),
     ];
   }