<commit_before>import React, { Component } from 'react'
import Loader from '../Loader/Loader'
import Paper from 'material-ui/Paper'
import { Link } from 'react-router'
import CatalogPreview from './CatalogPreview/CatalogPreview'
import LastHarvesting from '../LastHarvesting/LastHarvesting'
import { fetchMetrics } from '../fetch/fetch';
import { waitForDataAndSetState, cancelAllPromises } from '../helpers/components';

class Catalog extends Component {
  constructor(props) {
    super(props)
    this.state = {errors: []}
  }

  componentWillMount() {
    return waitForDataAndSetState(fetchMetrics(this.props.catalog.id), this, 'metrics');
  }

  componentWillUnmount() {
    return cancelAllPromises(this)
  }

  render() {
      const catalogPreview = <CatalogPreview metrics={this.state.metrics} />
      const styles = {
        link: {
          cursor: 'pointer',
          margin: '1em 3em 1em 3em',
        },
      }
      return (
          <Link to={`/catalogs/${this.props.catalog.id}`} style={styles.link}>
            <Paper rounded={true} zDepth={2}>
              <LastHarvesting style={styles.ribbon} harvest={this.props.catalog.lastHarvesting}/>
              <div style={styles.stats}>
                <span style={styles.title} className="ui large header">{this.props.catalog.name}</span>
                <Loader value={this.state.metrics} component={catalogPreview}/>
              </div>
            </Paper>
          </Link>
      )
  }
}

export default Catalog<commit_msg>Flex Catalog Component<commit_after>import React, { Component } from 'react'
import Loader from '../Loader/Loader'
import Paper from 'material-ui/Paper'
import { Link } from 'react-router'
import CatalogPreview from './CatalogPreview/CatalogPreview'
import LastHarvesting from '../LastHarvesting/LastHarvesting'
import { fetchMetrics } from '../fetch/fetch';
import { waitForDataAndSetState, cancelAllPromises } from '../helpers/components';

class Catalog extends Component {
  constructor(props) {
    super(props)
    this.state = {errors: []}
  }

  componentWillMount() {
    return waitForDataAndSetState(fetchMetrics(this.props.catalog.id), this, 'metrics');
  }

  componentWillUnmount() {
    return cancelAllPromises(this)
  }

  render() {
      const catalogPreview = <CatalogPreview metrics={this.state.metrics} />
      const styles = {
        link: {
          cursor: 'pointer',
          margin: '1em 3em 1em 3em',
          position: 'relative',
        },
        ribbon: {
          position: 'absolute',
          top: '1em',
          left: '-14px',
        },
        stats: {
          display: 'flex',
          felxWrap: 'wrap',
          justifyContent: 'space-around',
          alignItems: 'center',
        },
        title: {
          position: 'relative',
          justifyContent: 'center',
          width: '30%',
          top: '20px',
        },
      }
      return (
          <Link to={`/catalogs/${this.props.catalog.id}`} style={styles.link}>
            <Paper rounded={true} zDepth={2}>
              <LastHarvesting style={styles.ribbon} harvest={this.props.catalog.lastHarvesting}/>
              <div style={styles.stats}>
                <span style={styles.title} className="ui large header">{this.props.catalog.name}</span>
                <Loader value={this.state.metrics} component={catalogPreview}/>
              </div>
            </Paper>
          </Link>
      )
  }
}

export default Catalog
{'fraction_non_alphanumeric': 0.1357452966714906, 'fraction_numerical': 0.004920405209840811, 'mean_word_length': 2.4909090909090907, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 25, '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': '5073362', 'n_tokens_mistral': 994, 'n_tokens_neox': 974, 'n_words': 210}