import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { setDisplayName, setPropTypes } from 'recompose';
import React from 'react';
import R from 'ramda';

import AlbumCollection from './album-collection';
import { getAlbums as getAlbumsAction } from 'interactions/albums/actions';


class Albums extends React.Component {
  componentWillMount() {
    this.props.getAlbums();
  }

  render() {
    return (
      <AlbumCollection />
    );
  }
}

Albums.propTypes = {
  getAlbums: React.PropTypes.func,
};

const mapDispatchToProps = (dispatch) =>
  bindActionCreators({
    getAlbums: getAlbumsAction,
  }, dispatch);

const enhance = R.pipe(
  setPropTypes({
    getAlbums: React.PropTypes.func,
  }),
  connect(null, mapDispatchToProps),
  setDisplayName('Albums'),
);

export { Albums };
export default enhance(Albums);

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { setDisplayName } from 'recompose';
import React from 'react';
import R from 'ramda';

import AlbumImages from './album-images';
import AlbumCollection from './album-collection';
import { getAlbums as getAlbumsAction } from 'interactions/albums/actions';


class Albums extends React.Component {
  componentWillMount() {
    this.props.getAlbums();
  }

  render() {
    let children;

    if (this.props.isAlbumSelected) {
      children = <AlbumImages id={this.props.selectedAlbum} />;
    } else {
      children = <AlbumCollection />;
    }

    return (
      children
    );
  }
}

Albums.propTypes = {
  getAlbums: React.PropTypes.func,
  isAlbumSelected: React.PropTypes.bool,
  selectedAlbum: React.PropTypes.string,
};

const mapStateToProps = (state) => {
  const selectedAlbum = state.getIn(['albums', 'selected']);

  return ({
    isAlbumSelected: !!selectedAlbum,
    selectedAlbum,
  });
};

const mapDispatchToProps = (dispatch) =>
  bindActionCreators({
    getAlbums: getAlbumsAction,
  }, dispatch);

const enhance = R.pipe(
  connect(mapStateToProps, mapDispatchToProps),
  setDisplayName('Albums'),
);


export { Albums };
export default enhance(Albums);

Extend `Albums` to render album images
Extend `Albums` to render album images

... when a certain album is selected.

Component `Albums` is not a stateless component like the other components.
The component needs the life cycle method `componentWillMount`, that's why it's stateful.

A stateless component would only require one comment of `eslint-disable-line react/prop-types`.
This component would need three comments to disable linter errors.
That's why `Albums.propTypes` seems better in this case than `setPropTypes` from `recompose`.
