import React, { Component, PropTypes } from 'react'
import TodoItem from './TodoItem'

class MainSection extends Component {
  constructor(props, context) {
    super(props, context)
  }

  handleClearCompleted() {
    this.props.actions.clearCompleted()
  }

  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} />
      )
    }
  }

  render() {
    const { todos, actions } = this.props

    const completedCount = todos.reduce((count, todo) =>
      todo.completed ? count + 1 : count,
      0
    )

    return (
      <section className="main">
        {this.renderToggleAll(completedCount)}
        <ul className="todo-list">
          {todos.map(todo =>
            <TodoItem key={todo.id} todo={todo} {...actions} />
          )}
        </ul>
      </section>
    )
  }
}

MainSection.propTypes = {
  todos: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

export default MainSection

@@ -45,16 +45,52 @@
 'react'%0A
+import classnames from 'classnames'%0A
 import T
@@ -212,16 +212,62 @@
 ontext)%0A
+    this.state = %7B%0A      showList: true%0A    %7D%0A
   %7D%0A%0A  h
@@ -341,308 +341,155 @@
 %0A%0A  
-renderToggleAll(completedCount) %7B%0A    const %7B todos, actions %7D = this.props%0A    if (todos.length %3E 0) %7B%0A      return (%0A        %3Cinput className=%22toggle-all%22%0A               type=%22checkbox%22%0A               checked=%7BcompletedCount === todos.length%7D
+handleClickShow() %7B%0A    if (this.state.showList) %7B%0A      this.setState(%7B showList: false %7D)
 %0A    
+%7D%0A
     
-       onChange=%7Bactions.completeAll%7D /%3E%0A      
+else %7B%0A      this.setState(%7B showList: true %7D
 )%0A  
@@ -561,244 +561,226 @@
     
-const completedCount = todos.reduce((count, todo) =%3E%0A      todo.completed ? count + 1 : count,%0A      0%0A    )%0A%0A    return (%0A      %3Csection className=%22main%22%3E%0A        %7Bthis.renderToggleAll(completedCount)%7D%0A        %3Cul className=%22todo-list%22
+return (%0A      %3Csection className=%22main%22%3E%0A        %3Cbutton onClick=%7B() =%3E this.handleClickShow()%7D%3EShow all%3C/button%3E%0A        %3Cul className=%7Bclassnames('todo-list', %7B %0A            hidden: this.state.showList%0A          %7D)%7D
 %3E%0A  

add toggle show list