<commit_before>/* global API_HOST */
import React from 'react';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import heroes from 'dotaconstants/build/heroes.json';
import strings from 'lang';
import Heading from 'components/Heading';
import Ranking from './Ranking';
import Benchmark from './Benchmark';
import styles from './Hero.css';

const getSingleHero = heroId => ({ ...heroes[heroId], img: API_HOST + heroes[heroId].img });

const Hero = ({ props }) => (<div>
  <Helmet title={getSingleHero(props.match.params.heroId).localized_name} />
  <div className={styles.Header}>
    <Heading
      title={getSingleHero(props.match.params.heroId).localized_name}
      className={styles.Heading}
      icon=""
    />
    <img role="presentation" src={getSingleHero(props.match.params.heroId).img} className={styles.image} />
  </div>
  <div style={{ display: 'flex' }}>
    <div style={{ width: '50%', padding: '15px' }}>
      <Heading title={strings.tab_rankings} subtitle={strings.rankings_description} />
      <Ranking {...props} />
    </div>
    <div style={{ width: '50%', padding: '15px' }}>
      <Heading title={strings.tab_benchmarks} />
      <Benchmark {...props} />
    </div>
  </div>
</div>);

export default connect()(Hero);<commit_msg>split hero page into tabs<commit_after>/* global API_HOST */
import React from 'react';
import { connect } from 'react-redux';
import Helmet from 'react-helmet';
import heroes from 'dotaconstants/build/heroes.json';
import strings from 'lang';
import Heading from 'components/Heading';
import TabBar from 'components/TabBar';
import Ranking from './Ranking';
import Benchmark from './Benchmark';
import styles from './Hero.css';

const getSingleHero = heroId => ({ ...heroes[heroId], img: API_HOST + heroes[heroId].img });

const tabs = (heroId) => ([
  { 
    name: strings.tab_rankings,
    key: 'rankings',
    content: (props) => (<div>
      <Heading title={strings.tab_rankings} subtitle={strings.rankings_description} />
      <Ranking {...props} />
    </div>),
    route: `/heroes/${heroId}/rankings`,
  },
  {
    name: strings.tab_benchmarks,
    key: 'benchmarks',
    content: (props) => (<div>
      <Heading title={strings.tab_benchmarks} />
      <Benchmark {...props} />
    </div>),
    route: `/heroes/${heroId}/benchmarks`,
  },
]);

const Hero = ({ props }) => {
  const route = props.match.params.info || 'rankings';
  const heroId = props.match.params.heroId;
  return (<div>
    <Helmet title={getSingleHero(props.match.params.heroId).localized_name} />
    <div className={styles.Header}>
      <Heading
        title={getSingleHero(props.match.params.heroId).localized_name}
        className={styles.Heading}
        icon=""
      />
      <img role="presentation" src={getSingleHero(props.match.params.heroId).img} className={styles.image} />
    </div>
    <div>
    <TabBar
      info={route}
      tabs={tabs(heroId)}
    />
    {tabs(heroId).filter(tab => tab.key === route).map(tab => tab.content(props))}
    </div>
  </div>);
};

export default connect()(Hero);
{'fraction_non_alphanumeric': 0.1771781534460338, 'fraction_numerical': 0.002600780234070221, 'mean_word_length': 3.6480362537764353, 'pattern_counts': {'":': 0, '<': 38, '<?xml version=': 0, '>': 47, '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': '3841397', 'n_tokens_mistral': 1023, 'n_tokens_neox': 1010, 'n_words': 218}