<commit_before>import React, { Component, PropTypes } from 'react'
import Example from './Example'
import PropsTable from './PropsTable'

export default class ComponentDoc extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    getComponent: PropTypes.func.isRequired,
  }

  state = {
    module: null,
  }

  componentWillMount() {
    this.requireInfo(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.getComponent !== nextProps.getComponent) {
      this.setState({ module: null })
      this.requireInfo(nextProps)
    }
  }

  requireInfo = props => {
    props.getComponent(module => {
      this.setState({ module })
    })
  }

  render() {
    const { module } = this.state

    if (!module) {
      return <div>Loading...</div>
    }

    const { name } = this.props
    const { source } = module
    let { examples } = module

    if (!examples) {
      examples = []
    } else if (!(examples instanceof Array)) {
      examples = [examples]
    }

    return (
      <div>
        <h1>{name}</h1>

        {source.props &&
          <PropsTable props={source.props} />
        }

        {examples.map((example, index) =>
          <Example
            key={index}
            componentName={name}
            {...example}
          />,
        )}
      </div>
    )
  }
}<commit_msg>Displays the component main description<commit_after>import React, { Component, PropTypes } from 'react'
import Example from './Example'
import PropsTable from './PropsTable'

export default class ComponentDoc extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    getComponent: PropTypes.func.isRequired,
  }

  state = {
    module: null,
  }

  componentWillMount() {
    this.requireInfo(this.props)
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.getComponent !== nextProps.getComponent) {
      this.setState({ module: null })
      this.requireInfo(nextProps)
    }
  }

  requireInfo = props => {
    props.getComponent(module => {
      this.setState({ module })
    })
  }

  render() {
    const { module } = this.state

    if (!module) {
      return <div>Loading...</div>
    }

    const { name } = this.props
    const { source } = module
    let { examples } = module

    if (!examples) {
      examples = []
    } else if (!(examples instanceof Array)) {
      examples = [examples]
    }

    return (
      <div>
        <h1>{name}</h1>

        {source.description &&
          <p>{source.description}</p>
        }

        {source.props &&
          <PropsTable props={source.props} />
        }

        {examples.map((example, index) =>
          <Example
            key={index}
            componentName={name}
            {...example}
          />,
        )}
      </div>
    )
  }
}
{'fraction_non_alphanumeric': 0.13458806818181818, 'fraction_numerical': 0.0014204545454545455, 'mean_word_length': 2.0719738276990185, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, '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': '3843984', 'n_tokens_mistral': 849, 'n_tokens_neox': 823, 'n_words': 174}