import React from "react";
import { Row, Col, ListGroupItem } from "react-bootstrap";
import { connect } from "react-redux";

import { getIndexHistory } from "../actions";
import { LoadingPlaceholder, ScrollList } from "../../base";

class IndexChanges extends React.Component {
    componentDidMount() {
        if (!this.props.history) {
            this.props.handlePage(1);
        }
    }

    handlePage = page => {
        this.props.onLoadNextPage(this.props.detail.id, page);
    };

    rowRenderer = index => (
        <ListGroupItem key={this.props.history.documents[index].id} className="spaced">
            <Row>
                <Col xs={12} md={6}>
                    <strong>{this.props.history.documents[index].otu.name}</strong>
                </Col>
                <Col xs={12} md={6}>
                    {this.props.history.documents[index].description}
                </Col>
            </Row>
        </ListGroupItem>
    );

    render() {
        if (this.props.history === null || this.props.history.documents === null || this.props.detail === null) {
            return <LoadingPlaceholder />;
        }

        return (
            <div>
                <ScrollList
                    documents={this.props.history.documents}
                    onLoadNextPage={this.handlePage}
                    page={this.props.history.page}
                    pageCount={this.props.history.page_coount}
                    rowRenderer={this.rowRenderer}
                />
            </div>
        );
    }
}

const mapStateToProps = state => ({
    detail: state.indexes.detail,
    history: state.indexes.history
});

const mapDispatchToProps = dispatch => ({
    onLoadNextPage: (indexId, page) => {
        dispatch(getIndexHistory(indexId, page));
    }
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(IndexChanges);

@@ -341,86 +341,8 @@
     
-        this.props.handlePage(1);%0A        %7D%0A    %7D%0A%0A    handlePage = page =%3E %7B%0A
     
@@ -397,38 +397,42 @@
 id, 
-page
+1
 );%0A    
+ 
+   %7D%0A    
 %7D
-;
 %0A%0A    r
-owR
 ender
-er
+Row
  = i
@@ -1220,23 +1220,69 @@
 ge=%7B
-this.handlePage
+page =%3E this.props.onLoadNextPage(this.props.detail.id, page)
 %7D%0A  
@@ -1387,17 +1387,16 @@
 .page_co
-o
 unt%7D%0A   
@@ -1417,26 +1417,24 @@
    r
-owR
 ender
-er
+Row
 =%7Bthis.r
 owRe
@@ -1433,18 +1433,16 @@
 is.r
-owR
 ender
-er
+Row
 %7D%0A  

Fix client crash when viewing index changes