1 files changed, 78 insertions, 0 deletions
diff --git a/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js
new file mode 100644
index 0000000000..ec23b516b8
--- /dev/null
+++ b/third_party/webkit/PerformanceTests/Speedometer/resources/todomvc/architecture-examples/react-redux/src/components/MainSection.js
@@ -0,0 +1,78 @@
+import React, { Component, PropTypes } from 'react'
+import TodoItem from './TodoItem'
+import Footer from './Footer'
+import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters'
+
+const TODO_FILTERS = {
+  [SHOW_ALL]: () => true,
+  [SHOW_ACTIVE]: todo => !todo.completed,
+  [SHOW_COMPLETED]: todo => todo.completed
+}
+
+export default class MainSection extends Component {
+  static propTypes = {
+    todos: PropTypes.array.isRequired,
+    actions: PropTypes.object.isRequired
+  }
+
+  state = { filter: SHOW_ALL }
+
+  handleClearCompleted = () => {
+    this.props.actions.clearCompleted()
+  }
+
+  handleShow = filter => {
+    this.setState({ filter })
+  }
+
+  renderToggleAll(completedCount) {
+    const { todos, actions } = this.props
+    if (todos.length > 0) {
+      return (
+        <input className="toggle-all"
+               type="checkbox"
+               checked={completedCount === todos.length}
+               onChange={actions.completeAll} />
+      )
+    }
+  }
+
+  renderFooter(completedCount) {
+    const { todos } = this.props
+    const { filter } = this.state
+    const activeCount = todos.length - completedCount
+
+    if (todos.length) {
+      return (
+        <Footer completedCount={completedCount}
+                activeCount={activeCount}
+                filter={filter}
+                onClearCompleted={this.handleClearCompleted.bind(this)}
+                onShow={this.handleShow.bind(this)} />
+      )
+    }
+  }
+
+  render() {
+    const { todos, actions } = this.props
+    const { filter } = this.state
+
+    const filteredTodos = todos.filter(TODO_FILTERS[filter])
+    const completedCount = todos.reduce((count, todo) =>
+      todo.completed ? count + 1 : count,
+      0
+    )
+
+    return (
+      <section className="main">
+        {this.renderToggleAll(completedCount)}
+        <ul className="todo-list">
+          {filteredTodos.map(todo =>
+            <TodoItem key={todo.id} todo={todo} {...actions} />
+          )}
+        </ul>
+        {this.renderFooter(completedCount)}
+      </section>
+    )
+  }
+}