<commit_before>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)}><commit_msg>Edit and create messages update automatically<commit_after>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,
    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,
  };

  static defaultProps = {
    updatedAt: 0,
  }

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

  state = {
    text: this.props.text,
    updateMessage: '',
    createMessage: '',
  }

  componentDidMount() {
    this.updateMessages();
    this.interval = window.setInterval(this.updateMessages, 1000);
  }

  componentWillReceiveProps(props) {
    this.setState({ updatedMessage: moment(props.updatedAt).fromNow() });
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  updateMessages = () => {
    this.setState({
      updatedMessage: this.props.updatedAt ? moment(this.props.updatedAt).fromNow() : '',
      createdMessage: moment(this.props.createdAt).fromNow(),
    });
  }

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

  render() {
    const { id, text, 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 {this.state.createdMessage}
          </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 {this.state.updatedMessage}
              </span> : null
            }
            {edit ?
              <span className="icon" onClick={() => updateTodo(id, this.state.text)}>
                <i className="fa fa-clipboard" />
              </span>
              :
              <span className="icon" onClick={() => editTodo(id)}>
{'fraction_non_alphanumeric': 0.12884471117779445, 'fraction_numerical': 0.0009377344336084021, 'mean_word_length': 2.037015945330296, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 52, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2100138', 'n_tokens_mistral': 1490, 'n_tokens_neox': 1490, 'n_words': 301}