import React from 'react';
import { connect } from 'react-redux';
import { fetchPeople, fetchPeopleGet } from 'redux/bundles/people';
import classnames from 'classnames';

const People =  React.createClass({
  componentDidMount: function(){
    this.props.fetchPeople();
  },
  getPeople: function() {
    return this.props.people || [];
  },
  changePage: function(url) {
    return e => {
      e.preventDefault();
      url && this.props.fetchPeople(url);
    }
  },
  renderTableHead: function(){
    return (
      <thead>
        <tr>
          <th>Name</th>
          <th>Gender</th>
          <th>Birth day</th>
          <th>Hair color</th>
          <th>Height</th>
          <th>Mass</th>
          <th>Skin color</th>
        </tr>
      </thead>
    );
  },
  renderTableBody: function() {
    return <tbody>{this.renderPeopleRow()}</tbody>;
  },
  renderPeopleRow: function() {
    return this.getPeople().map((person, i) => {
      return (
        <tr key={i}>
          <td>{person.name}</td>
          <td>{person.gender}</td>
          <td>{person.birth_year}</td>
          <td>{person.hair_color}</td>
          <td>{person.height}</td>
          <td>{person.mass}</td>
          <td>{person.skin_color}</td>
        </tr>
      );
    });
  },
  renderPeopleTablePaginationNext: function() {
    const { nextUrl } = this.props;
    const classes = classnames('btn pull-right', {'btn-primary': !!nextUrl, 'btn-default': !nextUrl} );
    return <a href="" className={classes} onClick={this.changePage(nextUrl)}>Next</a>
  },
  renderPeopleTablePaginationPrev: function() {
    const { prevUrl } = this.props;
    const classes = classnames('btn', {'btn-primary': !!prevUrl, 'btn-default': !prevUrl} );
    return <a href="" className={classes} onClick={this.changePage(prevUrl)}>Previous</a>
  },
  renderPeopleTablePagination: function(){
    return (
      <div>
        {this.renderPeopleTablePaginationNext()}
        {this.renderPeopleTablePaginationPrev()}
      </div>
    );
  },
  renderPeopleTable: function() {
    return (
      <table className="table fadeIn animated">
        {this.renderTableHead()}
        {this.renderTableBody()}
      </table>
    )
  },
  renderPeopleTableBlock: function() {
    return (
      <div>
        {this.renderPeopleTable()}
        {this.renderPeopleTablePagination()}
      </div>
    );
  },
  renderSpinner: function() {
    return <span>Loading...</span>
  },
  render: function() {
    return this.props.isFetching ?
      this.renderSpinner() :
      this.renderPeopleTableBlock();
  }
});


export default connect(
  state => ({
    isFetching: state.people.isFetching,
    isFetched: state.people.isFetched,
    nextUrl: state.people.apiResponse.next,
    prevUrl: state.people.apiResponse.previous,
    people: state.people.apiResponse.results
  }),
  { fetchPeople, fetchPeopleGet }
)(People);

@@ -457,32 +457,33 @@
 );%0A    %7D%0A  %7D,%0A  
+_
 renderTableHead:
@@ -763,24 +763,25 @@
   );%0A  %7D,%0A  
+_
 renderTableB
@@ -818,24 +818,25 @@
 tbody%3E%7Bthis.
+_
 renderPeople
@@ -850,32 +850,33 @@
 /tbody%3E;%0A  %7D,%0A  
+_
 renderPeopleRow:
@@ -1257,32 +1257,33 @@
 %0A    %7D);%0A  %7D,%0A  
+_
 renderPeopleTabl
@@ -1537,32 +1537,33 @@
 Next%3C/a%3E%0A  %7D,%0A  
+_
 renderPeopleTabl
@@ -1810,32 +1810,33 @@
 ious%3C/a%3E%0A  %7D,%0A  
+_
 renderPeopleTabl
@@ -1891,32 +1891,33 @@
 %3E%0A        %7Bthis.
+_
 renderPeopleTabl
@@ -1941,32 +1941,33 @@
 %7D%0A        %7Bthis.
+_
 renderPeopleTabl
@@ -2004,32 +2004,33 @@
 %3E%0A    );%0A  %7D,%0A  
+_
 renderPeopleTabl
@@ -2112,32 +2112,33 @@
 %3E%0A        %7Bthis.
+_
 renderTableHead(
@@ -2150,24 +2150,25 @@
       %7Bthis.
+_
 renderTableB
@@ -2198,24 +2198,25 @@
    )%0A  %7D,%0A  
+_
 renderPeople
@@ -2271,32 +2271,33 @@
 %3E%0A        %7Bthis.
+_
 renderPeopleTabl
@@ -2311,24 +2311,25 @@
       %7Bthis.
+_
 renderPeople
@@ -2370,24 +2370,25 @@
   );%0A  %7D,%0A  
+_
 renderSpinne
@@ -2508,24 +2508,25 @@
 %0A      this.
+_
 renderSpinne
@@ -2542,16 +2542,17 @@
    this.
+_
 renderPe

Clean up people react container