start adding footer

src/demos/todomvc/todo-footer.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import withReact from '../../js/with-react';
+import { pluralize, ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from './utils';
+import AXAButton from '../../components/m-button';
+import AXAFooter from '../../components/o-footer';
+import AXAFooterMain from '../../components/m-footer-main';
+import AXAFooterLinks from '../../components/m-footer-links';
+import AXAFooterSub from '../../components/m-footer-sub';
+import AXAFooterLegals from '../../components/m-footer-legals';
+
+const withReactBound = withReact(React);
+
+const AXAButtonReact = withReactBound(AXAButton);
+const AXAFooterReact = withReactBound(AXAFooter);
+const AXAFooterMainReact = withReactBound(AXAFooterMain);
+const AXAFooterLinksReact = withReactBound(AXAFooterLinks);
+const AXAFooterSubReact = withReactBound(AXAFooterSub);
+const AXAFooterLegalsReact = withReactBound(AXAFooterLegals);
+
+const footerItems = [
+  { name: 'All', url: '#', state: ALL_TODOS },
+  { name: 'Active', url: '#active', state: ACTIVE_TODOS },
+  { name: 'completed', url: '#completed', state: COMPLETED_TODOS },
+];
+
+const TodoFooter = ({
+  title = 'Visible Todos',
+  items = footerItems,
+  count,
+  completedCount,
+  onClearCompleted,
+  nowShowing,
+}) => {
+  const activeTodoWord = pluralize(this.props.count, 'item');
+  const selected = item => ({
+    ...item,
+    selected: item.state === nowShowing,
+  });
+
+  return (
+    <AXAFooterReact>
+      <AXAFooterMainReact>
+        <AXAFooterLinksReact title={title} items={items.map(selected)} />
+      </AXAFooterMainReact>
+
+      <AXAFooterSubReact>
+        <AXAFooterLegalsReact>
+          <span className="todo-count">
+            <strong>{count}</strong> {activeTodoWord} left
+          </span>
+
+          {completedCount > 0 &&
+            <AXAButtonReact onClick={onClearCompleted}>Clear Completed</AXAButtonReact>
+          }
+        </AXAFooterLegalsReact>
+      </AXAFooterSubReact>
+    </AXAFooterReact>
+  );
+};
+
+export default TodoFooter;

src/demos/todomvc/todos.jsx

@@ -1,12 +1,9 @@
 import React, { Component } from 'react';
 import TodosList from './todos-list';
+import TodoFooter from './todo-footer';
+import { ALL_TODOS, ACTIVE_TODOS, COMPLETED_TODOS } from './utils';
 
 const ENTER_KEY = 13;
-const app = app || {};
-
-app.ALL_TODOS = 'all';
-app.ACTIVE_TODOS = 'active';
-app.COMPLETED_TODOS = 'completed';
 
 class Todos extends Component {
   constructor(props, context) {
@@ -17,9 +14,10 @@ class Todos extends Component {
     this.edit = this.edit.bind(this);
     this.save = this.save.bind(this);
     this.cancel = this.cancel.bind(this);
+    this.clearCompleted = this.clearCompleted.bind(this);
 
     this.state = {
-      nowShowing: app.ALL_TODOS,
+      nowShowing: ALL_TODOS,
       editing: null,
       newTodo: '',
     };
@@ -77,29 +75,36 @@ class Todos extends Component {
 
   render() {
     const { props: { model: { todos } } } = this;
+    const { state } = this;
 
     const shownTodos = todos.filter((todo) => {
-      switch (this.state.nowShowing) {
-        case app.ACTIVE_TODOS:
+      switch (state.nowShowing) {
+        case ACTIVE_TODOS:
           return !todo.completed;
-        case app.COMPLETED_TODOS:
+        case COMPLETED_TODOS:
           return todo.completed;
         default:
           return true;
       }
     });
 
-    return (
+    const activeTodoCount = todos.reduce((accum, todo) => todo.completed ? accum : accum + 1, 0);
+    const completedCount = todos.length - activeTodoCount;
+
+    return [
       <TodosList
         shownTodos={shownTodos}
         onToggle={this.toggle}
         onDestroy={this.destroy}
         onEdit={this.edit}
-        editing={this.state.editing}
+        editing={state.editing}
         onSave={this.save}
         onCancel={this.cancel}
-      />
-    );
+      />,
+      ((activeTodoCount || completedCount) && (
+        <TodoFooter count={activeTodoCount} completedCount={completedCount} nowShowing={state.nowShowing} onClearCompleted={this.clearCompleted} />
+      )),
+    ];
   }
 }
 

src/demos/todomvc/utils.js

@@ -33,3 +33,7 @@ export function store(namespace, data) {
 
   return (store && JSON.parse(store)) || [];
 }
+
+export const ALL_TODOS = 'all';
+export const ACTIVE_TODOS = 'active';
+export const COMPLETED_TODOS = 'completed';