From 73f0fa2268cf6d97c26c787c45c7ec0d00a4609c Mon Sep 17 00:00:00 2001
From: Andreas Deuschlinger <andreas.deuschlinger@gmail.com>
Date: Thu, 29 Mar 2018 10:03:52 +0200
Subject: [PATCH] start adding header

---
 src/demos/todomvc/todo-footer.jsx |  2 +-
 src/demos/todomvc/todo-header.jsx | 33 +++++++++++++++++++++++++++++++
 src/demos/todomvc/todo-item.jsx   |  1 -
 src/demos/todomvc/todos-list.jsx  |  4 ++--
 src/demos/todomvc/todos.jsx       |  9 ++++++++-
 5 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 src/demos/todomvc/todo-header.jsx

diff --git a/src/demos/todomvc/todo-footer.jsx b/src/demos/todomvc/todo-footer.jsx
index 26d21acdd7..f53d208376 100644
--- a/src/demos/todomvc/todo-footer.jsx
+++ b/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,
diff --git a/src/demos/todomvc/todo-header.jsx b/src/demos/todomvc/todo-header.jsx
new file mode 100644
index 0000000000..7d7699423c
--- /dev/null
+++ b/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;
diff --git a/src/demos/todomvc/todo-item.jsx b/src/demos/todomvc/todo-item.jsx
index 15cd9080bd..67511b7a93 100644
--- a/src/demos/todomvc/todo-item.jsx
+++ b/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);
diff --git a/src/demos/todomvc/todos-list.jsx b/src/demos/todomvc/todos-list.jsx
index be2c424125..df8fd1dd12 100644
--- a/src/demos/todomvc/todos-list.jsx
+++ b/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;
diff --git a/src/demos/todomvc/todos.jsx b/src/demos/todomvc/todos.jsx
index e665ce458c..48da9d3eeb 100644
--- a/src/demos/todomvc/todos.jsx
+++ b/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),
     ];
   }