import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { ListView, StyleSheet } from 'react-native';

import ProductListRow from '../components/ProductListRow';

const styles = StyleSheet.create({
  listView: {
    backgroundColor: 'dimgray',
  },
});

export default class ProductListView extends Component {
  constructor(props) {
    super(props);

    props.loadProducts();

    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1.id !== r2.id,
    });
    this.dataSource = ds.cloneWithRows([]);
  }

  shouldComponentUpdate(nextProps) {
    return nextProps.products !== this.props.products;
  }

  componentWillUpdate(nextProps) {
    this.dataSource = this.dataSource.cloneWithRows(nextProps.products);
  }

  renderRow(row) {
    const { name, image, price } = row;
    return <ProductListRow {...{ name, image, price }} />;
  }

  render() {
    return (
      <ListView
        style={styles.listView}
        dataSource={this.dataSource}
        renderRow={row => this.renderRow(row)}
      />
    );
  }
}

ProductListView.propTypes = {
  products: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
    image: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
  })).isRequired,
};

@@ -80,24 +80,24 @@
 mport %7B 
+Flat
 List
-View
 , StyleS
@@ -374,17 +374,16 @@
 props);%0A
-%0A
     prop
@@ -403,362 +403,8 @@
 s();
-%0A%0A    const ds = new ListView.DataSource(%7B%0A      rowHasChanged: (r1, r2) =%3E r1.id !== r2.id,%0A    %7D);%0A    this.dataSource = ds.cloneWithRows(%5B%5D);%0A  %7D%0A%0A  shouldComponentUpdate(nextProps) %7B%0A    return nextProps.products !== this.props.products;%0A  %7D%0A%0A  componentWillUpdate(nextProps) %7B%0A    this.dataSource = this.dataSource.cloneWithRows(nextProps.products);
 %0A  %7D
@@ -561,24 +561,24 @@
 %0A      %3C
+Flat
 List
-View
 %0A       
@@ -618,31 +618,29 @@
 data
-Source
 =%7Bthis.
-dataSource
+props.products
 %7D%0A  
@@ -655,16 +655,22 @@
 nder
-Row=%7Brow
+Item=%7B(%7Bitem%7D)
  =%3E 
@@ -684,19 +684,20 @@
 nderRow(
-row
+item
 )%7D%0A     

use flat list