<commit_before>import React, { Component, PropTypes } from 'react'
import axios from 'axios'
import styles from './Comments.styl'

import CommentList from '../components/CommentList'

export default class Comments extends Component {
  static propTypes = {
    id: React.PropTypes.number.isRequired
  }

  constructor (props, context) {
    super(props, context)

    this.state = {
      loading: true,
      failed: false,
      comments: []
    }
  }

  componentDidMount () {
    this.fetch()
  }

  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) this.fetch()
  }

  render () {
    const style = { width: `calc((100% - 400px) * ${this.props.width} / 100)` }

    return <div className={styles.commentContainer} style={style}>
      <h2 className="header commentHeader">{this.state.count} comments</h2>
      <div className={styles.commentList}>
        {this.state.comments.map(this.renderComment, this)}
      </div>
    </div>
  }

  renderComment (comment, i) {
    return <CommentList data={comment} />
  }

  fetch () {
    this.setState({ loading: true, failed: false })

    axios.get(`http://localhost:1339/item/${this.props.id}`).then(response => {
      this.setState({ comments: response.data.comments, count: response.data.comments_count, loading: false, failed: false })
    }).catch(response => {
      this.setState({ loading: false, failed: true })
    })
  }<commit_msg>Reset scroll position on update<commit_after>import React, { Component, PropTypes } from 'react'
import axios from 'axios'
import styles from './Comments.styl'

import CommentList from '../components/CommentList'

export default class Comments extends Component {
  static propTypes = {
    id: React.PropTypes.number.isRequired
  }

  constructor (props, context) {
    super(props, context)

    this.state = {
      loading: true,
      failed: false,
      comments: []
    }
  }

  componentDidMount () {
    this.fetch()
  }

  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) this.fetch()
    this.refs.container.scrollTop = 0
  }

  render () {
    const style = { width: `calc((100% - 400px) * ${this.props.width} / 100)` }

    return <div className={styles.commentContainer} style={style} ref="container">
      <h2 className="header commentHeader">{this.state.count} comments</h2>
      <div className={styles.commentList}>
        {this.state.comments.map(this.renderComment, this)}
      </div>
    </div>
  }

  renderComment (comment, i) {
    return <CommentList data={comment} />
  }

  fetch () {
    this.setState({ loading: true, failed: false })

    axios.get(`http://localhost:1339/item/${this.props.id}`).then(response => {
      this.setState({ comments: response.data.comments, count: response.data.comments_count, loading: false, failed: false })
    }).catch(response => {
      this.setState({ loading: false, failed: true })
    })
  }
{'fraction_non_alphanumeric': 0.14889958734525446, 'fraction_numerical': 0.010660247592847318, 'mean_word_length': 3.2281976744186047, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, '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': '5143223', 'n_tokens_mistral': 913, 'n_tokens_neox': 881, 'n_words': 201}