case START_TIMER: {
  const todo = { ...state.todos.find(item => item.id === action.id) };
  todo.startTime = new Date();
  const todos = [...state.todos].map(item => item.id === action.id ? todo : item);
  return { ...state, timerActive: true, timerTodo: action.id, todos };
}
case STOP_TIMER: {
  return { ...state, timerActive: false, timerTodo: null }
}
case UPDATE_TODO_TOTAL: {
  const todo = { ...state.todos.find(item => item.id === action.id) };
  todo.total += 1;
  const todos = [...state.todos].map(item => item.id === action.id ? todo : item);
  const total = state.total || 0;
  return { ...state, todos, total: total + 1 };
}

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'
import moment from 'react-moment'


let interval;

export default class TodoItem extends Component {
  static propTypes = {
    todo: PropTypes.object.isRequired,
    deleteTodo: PropTypes.func.isRequired,
    completeTodo: PropTypes.func.isRequired
  }

  componentWillUnmount() {
    clearInterval(interval);
  }

  handleDeleteClick = () => {
    this.props.deleteTodo(this.props.todo.id);
  }

  handleCompleteClick = () => {
    this.props.completeTodo(this.props.todo.id);
  }

  handleStartClick = () => {
    this.props.startTimer(this.props.todo.id);
    interval = setInterval(() => {
      this.props.updateTimer(this.props.todo.id);
    }, 1000);
  }


  handleStopClick = () => {
    this.props.stopTimer(this.props.todo.id);
    clearInterval(interval);
  }


  render() {
    const { todo, timerActive, timerTodo } = this.props
    const {total} = todo.total;
    const timerDisplay = ('0' + ((total/3600)|0)%60) + ':' + ('0'+ ((total/60)|0)%60).substr(-2) + ':'+('0' + total%60).substr(-2);

    return (
      <li className={classnames({
        completed: todo.completed
      })}>
        <div className="view" style={{ display: 'flex', alignItems: 'center' }} onClick={this.handleSelectToDo}>
          <input
            className="toggle"
            type="checkbox"
            checked={todo.completed}
            onChange={this.handleCompleteClick}
          />
          <label style={{ width: '50%' }}>
            {todo.text}
          </label>
          <span style={{ display: 'block', fontSize: 20 }}>{timerDisplay}</span>
          {(!timerActive || timerTodo === todo.id) && (
            <button
              style={{
                background: 'transparent',
                border: 0,
                outline: 0,
                fontSize: 12,
                cursor: 'pointer',
                marginLeft: 30
              }}
              disabled={timerActive && timerTodo !== todo.id}
              onClick={timerActive ? this.handleStopClick : this.handleStartClick}
            >{timerActive ? 'Stop' : 'Start'}</button>
          )}
          <button className="destroy" onClick={this.handleDeleteClick} />
        </div>
      </li>
    )
  }
}