<commit_before>import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';

import Navbar from 'react-bootstrap/lib/Navbar';
import ListGroupItem from 'react-bootstrap/lib/ListGroupItem';

import TrackList from '_components/tracks/trackList';

import initStore from '_utils/initStore';
import isPlainClick from '_utils/isPlainClick';
import Icon from '_components/misc/icon';
import SearchField from '_components/misc/searchField';

import { getSongs, getMoreSongs } from '_store/actions';
import { songSelectors } from '_store/selectors';

import styles from './songList.css';

export function SongListComponent({
  list,
  search,
  onSearchChangeHandler,
  onSearchClearHandler,
  onMoreSongsHandler,
 }) {
  return (
    <div className={styles.songList}>
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <Icon type="arrow-up" href="/" label="Songs" />
          </Navbar.Brand>
        </Navbar.Header>
        <Navbar.Form pullLeft>
          <SearchField
            search={search}
            onChangeHandler={onSearchChangeHandler}
            onClearHandler={onSearchClearHandler}
          />
        </Navbar.Form>
      </Navbar>
      <TrackList
        idTracks={list.map(song => song.idTrack)}
        Toolbar="default"
      >
        <ListGroupItem>
          <Icon
            button
            block
            type="menu-down"
            label="More"
            onClick={onMoreSongsHandler}
          />
        </ListGroupItem>
      </TrackList>
    </div>
  );
}

SongListComponent.propTypes = {
  list: PropTypes.array,
  search: PropTypes.string,
  onSearchChangeHandler: PropTypes.func,
  onSearchClearHandler: PropTypes.func,
  onMoreSongsHandler: PropTypes.func,
};


export const storeInitializer =
  (dispatch, state) => !songSelectors.isEmpty(state) || dispatch(getSongs());

export const mapStateToProps = state => ({
  list: songSelectors.list(state),
  search: songSelectors.searchTerm(state),
});

export const mapDispatchToProps = dispatch => ({
  onSearchChangeHandler: ev => dispatch(getSongs(ev.target.value)),
  onSearchClearHandler: ev => isPlainClick(ev) && dispatch(getSongs()),
  onMoreSongsHandler: ev => isPlainClick(ev) && dispatch(getMoreSongs()),
});

export default compose(
  initStore(storeInitializer),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(SongListComponent);
<commit_msg>The `More...` button is now a feature of TrackList<commit_after>import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';

import Navbar from 'react-bootstrap/lib/Navbar';

import TrackList from '_components/tracks/trackList';

import initStore from '_utils/initStore';
import isPlainClick from '_utils/isPlainClick';
import Icon from '_components/misc/icon';
import SearchField from '_components/misc/searchField';

import { getSongs, getMoreSongs } from '_store/actions';
import { songSelectors } from '_store/selectors';

import styles from './songList.css';

export function SongListComponent({
  list,
  search,
  onSearchChangeHandler,
  onSearchClearHandler,
  onMoreSongsHandler,
 }) {
  return (
    <div className={styles.songList}>
      <Navbar>
        <Navbar.Header>
          <Navbar.Brand>
            <Icon type="arrow-up" href="/" label="Songs" />
          </Navbar.Brand>
        </Navbar.Header>
        <Navbar.Form pullLeft>
          <SearchField
            search={search}
            onChangeHandler={onSearchChangeHandler}
            onClearHandler={onSearchClearHandler}
          />
        </Navbar.Form>
      </Navbar>
      <TrackList
        idTracks={list.map(song => song.idTrack)}
        Toolbar="default"
        onMoreClick={onMoreSongsHandler}
      />
    </div>
  );
}

SongListComponent.propTypes = {
  list: PropTypes.array,
  search: PropTypes.string,
  onSearchChangeHandler: PropTypes.func,
  onSearchClearHandler: PropTypes.func,
  onMoreSongsHandler: PropTypes.func,
};


export const storeInitializer =
  (dispatch, state) => !songSelectors.isEmpty(state) || dispatch(getSongs());

export const mapStateToProps = state => ({
  list: songSelectors.list(state),
  search: songSelectors.searchTerm(state),
});

export const mapDispatchToProps = dispatch => ({
  onSearchChangeHandler: ev => dispatch(getSongs(ev.target.value)),
  onSearchClearHandler: ev => isPlainClick(ev) && dispatch(getSongs()),
  onMoreSongsHandler: ev => isPlainClick(ev) && dispatch(getMoreSongs()),
});

export default compose(
  initStore(storeInitializer),
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(SongListComponent);

{'fraction_non_alphanumeric': 0.12132904608788853, 'fraction_numerical': 0.0, 'mean_word_length': 3.4822286263208455, 'pattern_counts': {'":': 0, '<': 33, '<?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': '348865', 'n_tokens_mistral': 1403, 'n_tokens_neox': 1367, 'n_words': 286}