/**
 |==========================================================================================
 | This is a container that displays the list of restaurants.
 | Needs access to redux state.
 | Does not need to dispatch to redux state.
 |
 | A. When redux's places state is updated via the map container:
 |  1. This list rerenders with the new places.
 |------------------------------------------------------------------------------------------
 */

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ListItem from '../components/listItem';

class List extends Component {
  /**
   * Scroll up when list is applied a new filter
   */
  componentDidUpdate() {
    document.getElementById('list-scroll').scrollTop = 0;
  }

  render() {
    return (
      <div id="list-scroll" className="list-scroll">
        {this.props.places.map((place, index) =>
          (
            <div key={place.id} className="list-item-container">
              <h4 className="list-item-number">{index + 1}</h4>
              <ListItem
                place={place}
              />
            </div>
          )
        )}
      </div>
    );
  }
}

List.propTypes = {
  places: PropTypes.array.isRequired,
};

function mapStateToProps({ places }) {
  return {
    places,
  };
}

export default connect(mapStateToProps)(List);

/**
 |==========================================================================================
 | This is a container that displays the list of restaurants.
 | Needs access to redux state.
 | Does not need to dispatch to redux state.
 |
 | A. When redux's places state is updated via the map container:
 |  1. This list rerenders with the new places.
 |------------------------------------------------------------------------------------------
 */

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import ListItem from '../components/listItem';

class List extends Component {
  /**
   * Scroll up when list is applied a new filter
   */
  componentDidUpdate() {
    document.getElementById('list-scroll').scrollTop = 0;
  }

  render() {
    return (
      <div id="list-scroll" className="list-scroll">
        {this.props.places.map((place, index) =>
          (
            <div key={place.place_id} className="list-item-container">
              <h4 className="list-item-number">{index + 1}</h4>
              <ListItem
                place={place}
              />
            </div>
          )
        )}
      </div>
    );
  }
}

List.propTypes = {
  places: PropTypes.array.isRequired,
};

function mapStateToProps({ places }) {
  return {
    places,
  };
}

export default connect(mapStateToProps)(List);

Fix proper property name place_id
Fix proper property name place_id
