import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import moment from 'moment';

export default class Todo extends Component {
  static propTypes = {
    id: PropTypes.number.isRequired,
    createdAt: PropTypes.number.isRequired,
    updatedAt: PropTypes.number.isRequired,
    deleted: PropTypes.bool.isRequired,
    completed: PropTypes.bool.isRequired,
    edit: PropTypes.bool.isRequired,
    text: PropTypes.string.isRequired,
    toggleComplete: PropTypes.func.isRequired,
    editTodo: PropTypes.func.isRequired,
    updateTodo: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired,
  };

  constructor(props) {
    super(props);
    this.props = props;
  }

  state = {
    text: this.props.text,
  }

  updateText = e => this.setState({ text: e.target.value })

  render() {
    const { id, text, createdAt, updatedAt, deleted, completed, edit,
      toggleComplete, editTodo, updateTodo, deleteTodo } = this.props;

    const iconClasses = classNames({
      fa: true,
      'fa-square-o': !completed,
      'fa-check-square-o': completed,
    });

    return (
      deleted ?
        null :
        <li className="todo">
          <div className="create-text">
            created {moment(createdAt).fromNow()}
          </div>
          {edit ?
            null :
            <span className="icon" onClick={() => toggleComplete(id)}>
              <i className={iconClasses} />
            </span>
          }
          {edit ?
            <div className="field">
              <p className="control">
                <textarea
                  className="textarea"
                  value={this.state.text}
                  onChange={this.updateText} />
              </p>
            </div>
            :
            <span>{text}</span>
          }
          <div className="has-text-right">
            {updatedAt ?
              <span className="edit-text is-pulled-left">
                edited {moment(updatedAt).fromNow()}
              </span> : null
            }
            {edit ?
              <span className="icon" onClick={() => updateTodo(id, this.state.text)}>
                <i className="fa fa-clipboard" />
              </span>
              :
              <span className="icon" onClick={() => editTodo(id)}>
                <i className="fa fa-pencil" />
              </span>
            }
            <span className="icon" onClick={() => deleteTodo(id)}>
              <i className="fa fa-trash" />
            </span>
          </div>
        </li>
    );
  }
}

@@ -315,37 +315,26 @@
 Types.number
-.isRequired
 ,%0A
+
     deleted:
@@ -659,16 +659,65 @@
 ,%0A  %7D;%0A%0A
+  static defaultProps = %7B%0A    updatedAt: 0,%0A  %7D%0A%0A
   constr
@@ -817,16 +817,579 @@
 s.text,%0A
+    updateMessage: '',%0A    createMessage: '',%0A  %7D%0A%0A  componentDidMount() %7B%0A    this.updateMessages();%0A    this.interval = window.setInterval(this.updateMessages, 1000);%0A  %7D%0A%0A  componentWillReceiveProps(props) %7B%0A    this.setState(%7B updatedMessage: moment(props.updatedAt).fromNow() %7D);%0A  %7D%0A%0A  componentWillUnmount() %7B%0A    clearInterval(this.interval);%0A  %7D%0A%0A  updateMessages = () =%3E %7B%0A    this.setState(%7B%0A      updatedMessage: this.props.updatedAt ? moment(this.props.updatedAt).fromNow() : '',%0A      createdMessage: moment(this.props.createdAt).fromNow(),%0A    %7D);%0A
   %7D%0A%0A  u
@@ -1484,19 +1484,8 @@
 ext,
- createdAt,
  upd
@@ -1862,35 +1862,33 @@
 ed %7B
-moment(createdAt).fromNow()
+this.state.createdMessage
 %7D%0A  
@@ -2583,35 +2583,33 @@
 ed %7B
-moment(updatedAt).fromNow()
+this.state.updatedMessage
 %7D%0A  

Edit and create messages update automatically