<commit_before>import React, { Component } from 'react';
import { Form, Icon } from 'semantic-ui-react';


class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = {edited_comment: this.props.comment, edit: false}
  }
  onClick() {
    this.setState({edit: true});
  }
  onChange(event) {
    this.setState({edited_comment: event.target.value});
  }
  onSubmit(event) {
    event.preventDefault();
    this.setState({edit: false});
    fetch(`http://localhost:8080/comment/${this.props.metric_id}`, {
      method: 'post',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({comment: this.state.edited_comment})
    })
  }
  render() {
    if (this.state.edit) {
      return (
        <Form onSubmit={(e) => this.onSubmit(e)}>
          <Form.Input autoFocus focus fluid defaultValue={this.state.edited_comment}
            onChange={(e) => this.onChange(e)} />
        </Form>
      )
    }
    const style = this.state.edited_comment ? {marginRight: "10px"} : {marginRight: "0px"};
    return (
      <div onClick={(e) => this.onClick(e)}>
        <span style={style}>
          {this.state.edited_comment}
        </span>
        <Icon color='grey' name='edit' />
      </div>
    )
  }
}

export { Comment };
<commit_msg>Escape cancels editing the comment. (#32)<commit_after>import React, { Component } from 'react';
import { Form, Icon } from 'semantic-ui-react';


class Comment extends Component {
  constructor(props) {
    super(props);
    this.state = {edited_comment: this.props.comment, edit: false}
  }
  onClick() {
    this.setState({edit: true});
  }
  onChange(event) {
    this.setState({edited_comment: event.target.value});
  }
  onKeyDown(event) {
    if (event.key === "Escape") {
      this.setState({edit: false, edited_comment: this.props.comment})
    }
  }
  onSubmit(event) {
    event.preventDefault();
    this.setState({edit: false});
    fetch(`http://localhost:8080/comment/${this.props.metric_id}`, {
      method: 'post',
      mode: 'cors',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({comment: this.state.edited_comment})
    })
  }
  render() {
    if (this.state.edit) {
      return (
        <Form onSubmit={(e) => this.onSubmit(e)}>
          <Form.Input autoFocus focus fluid defaultValue={this.state.edited_comment}
            onChange={(e) => this.onChange(e)} onKeyDown={(e) => this.onKeyDown(e)} />
        </Form>
      )
    }
    const style = this.state.edited_comment ? {marginRight: "10px"} : {marginRight: "0px"};
    return (
      <div onClick={(e) => this.onClick(e)}>
        <span style={style}>
          {this.state.edited_comment}
        </span>
        <Icon color='grey' name='edit' />
      </div>
    )
  }
}

export { Comment };

{'fraction_non_alphanumeric': 0.169645986680687, 'fraction_numerical': 0.005608131791097091, 'mean_word_length': 2.6968911917098444, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 26, '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': '7038966', 'n_tokens_mistral': 950, 'n_tokens_neox': 936, 'n_words': 171}