pagination.js

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {clientsFindServer, changePage} from './actions';
import {NUMBER_RECORDS} from './constants';

class Pagination extends Component{

  _handlePaginar(page){
    console.log('paginaaaaaa',page);
    const {clientsFindServer} = this.props;
    const {clientR} = this.props;
    var limInf = (page - 1) * NUMBER_RECORDS;
    clientsFindServer(clientR.get('keyword'), limInf, NUMBER_RECORDS);
    changePage(page);
  }

  render(){
    const {clientR} = this.props;
    console.log("clientR.get('page');", clientR.get('page'));
    var page = clientR.get('page');
    var firstPage = 1;
    if(page > 7){
      firstPage = page - 6;
    }
    var countClients = clientR.get('countClients');
    return (
      <div>
        {countClients > 20 ?
          <div style={{borderTop:"2px solid #D9DEDF", width:"100%", marginTop:"15px", paddingTop: "15px", paddingBottom:"15px"}}>
            <div style={{textAlign:"center"}} >
              <ul className="pagination">
                <li><a>«</a></li>
                <li><a className={page === firstPage ? "active" :"" } onClick={() => {this._handlePaginar(firstPage)}}>{firstPage}</a></li>
                <li><a className={page === firstPage + 1 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 1)}}>{firstPage + 1}</a></li>
                <li><a className={page === firstPage + 2 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 2 )}}>{firstPage + 2}</a></li>
                <li><a className={page === firstPage + 3 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 3)}}>{firstPage + 3}</a></li>
                <li><a className={page === firstPage + 4 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 4)}}>{firstPage + 4}</a></li>
                <li><a className={page === firstPage + 5 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 5)}}>{firstPage + 5}</a></li>
                <li><a className={page === firstPage + 6 ? "active" :"" } onClick={() => {this._handlePaginar(firstPage + 5)}}>{firstPage + 6}</a></li>
                <li><a>»</a></li>
              </ul>
            </div>
          </div>
      : <div></div>}
      </div>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({
    clientsFindServer
  }, dispatch);
}

function mapStateToProps({clientR}, ownerProps){
  return {
    clientR
  };
}

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