<commit_before>import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { actions as wikipediaActions } from 'redux/modules/Wikipedia/Wikipedia.js'
import SearchBar from 'components/SearchBar/SearchBar'
import sty from './Wikipedia.scss'
import Loader from 'halogen/PulseLoader'

const mapStateToProps = (state) => ({
  searchInput: state.wikipedia.searchInput,
  isFetching: state.wikipedia.isFetching,
  articles: state.wikipedia.articles
})

export default class Wikipedia extends Component {
  static propTypes = {
    articles: PropTypes.object.isRequired,
    searchInput: PropTypes.string,
    fetchWikiIfNeeded: PropTypes.func.isRequired,
    searchInputSet: PropTypes.func.isRequired,
    isFetching: PropTypes.bool.isRequired
  };

  render() {
    const {searchInput, fetchWikiIfNeeded, searchInputSet, isFetching} = this.props
    return (
      <div className={sty.container}>
        <h1>Wikipedia Search</h1>
        <SearchBar
          searchInput={searchInput}
          searchInputSet={searchInputSet}
          fetchWikiIfNeeded={fetchWikiIfNeeded}
        />
        {isFetching ? <Loader color="#D3D3D3" size="32px" margin="4px" /> : ''}
      </div>
    )
  }
}

export default connect(mapStateToProps, wikipediaActions)(Wikipedia)
<commit_msg>add cards component to wikipedia component<commit_after>import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { isEmpty } from 'lodash'
import { actions as wikipediaActions } from 'redux/modules/Wikipedia/Wikipedia.js'
import SearchBar from 'components/SearchBar/SearchBar'
import sty from './Wikipedia.scss'
import Loader from 'halogen/PulseLoader'
import Cards from 'components/Cards/Cards'

const mapStateToProps = (state) => ({
  searchInput: state.wikipedia.searchInput,
  isFetching: state.wikipedia.isFetching,
  articles: state.wikipedia.articles
})

export default class Wikipedia extends Component {
  static propTypes = {
    articles: PropTypes.array.isRequired,
    searchInput: PropTypes.string,
    fetchWikiIfNeeded: PropTypes.func.isRequired,
    searchInputSet: PropTypes.func.isRequired,
    isFetching: PropTypes.bool.isRequired
  };

  render() {
    const {searchInput, fetchWikiIfNeeded, searchInputSet, isFetching, articles} = this.props
    return (
      <div className={sty.container}>
        <h1>Wikipedia Search</h1>
        <SearchBar
          searchInput={searchInput}
          searchInputSet={searchInputSet}
          fetchWikiIfNeeded={fetchWikiIfNeeded}
        />
        {isFetching ? <Loader color="#D3D3D3" size="32px" margin="20px" /> : ''}
        {isEmpty(articles)
          ? <div>Test</div>
          : <Cards articles={articles} />
        }
      </div>
    )
  }
}

export default connect(mapStateToProps, wikipediaActions)(Wikipedia)

{'fraction_non_alphanumeric': 0.10860366713681241, 'fraction_numerical': 0.005994358251057828, 'mean_word_length': 3.8166383701188455, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 20, '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': '6866280', 'n_tokens_mistral': 866, 'n_tokens_neox': 861, 'n_words': 180}