inifite-list-react-virtualized.jsx

//top-level imports
import React from 'react';
import shallowCompare from 'react-addons-shallow-compare'
import { Link } from 'react-router';
//npm components
import { List, AutoSizer, InfiniteLoader } from 'react-virtualized';
// Material-UI
import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import Avatar from 'material-ui/Avatar';
//modules
import { timeAgo } from '../../../modules/moment-helpers';
import { formatChatTime } from '../../../modules/moment-helpers';
//custom components
import { TransactionItem } from './transaction-item';
//styles
import { StyleSheet, css } from 'aphrodite';
import { styles } from './styles.js';
import 'react-virtualized/styles.css'; // only needs to be imported once



// EXPORTED COMPONENT
//----------------------------------------


export class TransactionFeed extends React.Component {
	constructor(props){
		super(props)
		this.rowRenderer = this.rowRenderer.bind(this);
		this.isRowLoaded = this.isRowLoaded.bind(this);
		this.loadMoreRows = this.loadMoreRows.bind(this);

	}
	rowRenderer({key, index, style}){
		const { transactions } = this.props;
		 if (!this.isRowLoaded({ index })) {
		      <div>Loading...</div>
		  } 
		return (<div style={style} key={key} ><TransactionItem transaction={transactions[index]} /></div>)
	}
	shouldComponentUpdate(nextProps, nextState) {
	    return shallowCompare(this, nextProps, nextState)
	}
	componentWillMount(){
    	    Session.set( "currentLimit_Transactions", 10 );
  	}
	loadMoreRows({ startIndex, stopIndex }){
	     console.log('loadMoreRowsRan')
	     let newCurrentSkip = Session.get('currentLimit_Transactions') + 10;
             Session.set( "currentLimit_Transactions", newCurrentSkip );
	}
	isRowLoaded({ index }){
	    return !this.props.hasNextPage || index < this.props.transactions.length
	}
	render(){
		
		const { transactions, hasNextPage } = this.props;
		
		return <InfiniteLoader
			      isRowLoaded={this.isRowLoaded}
			      loadMoreRows={this.loadMoreRows}
			      rowCount={transactions.length}
			    >
	    		{({ onRowsRendered, registerChild }) => (
	            	<List
				    width={300}
				    height={500}
				    scrollToIndex={undefined}
				    rowCount={transactions.length}
				    rowHeight={85}
				    ref={registerChild}
				    onRowsRendered={onRowsRendered}
				    showScrollingPlaceholder={false}
				    useDynamicRowHeight={false}
				    rowRenderer={this.rowRenderer}
				    scrollToAlignment={'start'}
				    overscanRowCount={20}
				  />)}
			 </InfiniteLoader>
	}
};