content: import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as actions from '../actions';
  import { Link } from 'react-router';
  
  class Paginator extends Component{
    constructor(props){
      super(props);
      this.mapList = mapList.bind(this);
      this.reIndex = reIndex.bind(this);
      this.state = {
        start: 0,
        end: 5
      }
    }
    render(){ return renderPaginator.call(this) }
  }
  
  Paginator.defaultProps = {
    questions: {parsed: null, totalRows: null}
  }
  
  function renderPaginator(){
    const numOfPages = Math.ceil(parseInt(this.props.questions.totalRows, 10) / 10);
    let list = this.mapList(this.state.start,this.state.end,numOfPages);
    return (
      <div className="paginator">
        <ul>
          <li><a onClick={ (event) => {this.reIndex(event, 0, 5)}} href="1">&laquo;&laquo;</a></li>
          <li><a onClick={ (event) => {this.reIndex(event, this.state.start - 5, this.state.end - 5)}} href={numOfPages}>&laquo;</a></li>
          {list}
          <li><a onClick={ (event) => {this.reIndex(event, this.state.start + 5, this.state.end + 5)}} href={numOfPages}>&raquo;</a></li>
          <li><a onClick={ (event) => {this.reIndex(event, numOfPages - 5, numOfPages)}} href={numOfPages}>&raquo;&raquo;</a></li>
        </ul>
        <div className="totalPages">
          {numOfPages} Total Pages
        </div>
      </div>
    );
  }
  
  function calculatePagesArray(pages){
    const elementCount = pages;
    const pagesArray = [];
    for(let i = 1; i <= elementCount; i++){
      pagesArray.push(i);
    }
    return pagesArray;
  }
  function mapList(start,end, numOfPages){
    const pagesArray = calculatePagesArray(numOfPages);
    const currentPages = pagesArray.slice(start, end);
  
    const elementList = currentPages.map((element) => {
      return (
        <li key={element}><Link activeClassName="active" onClick={()=>{this.props.filterQuestions({term: this.props.options.term, order: this.props.options.order, offset: (element * 10) - 10})}} to={{query: {term: this.props.options.term, order: 'question ' + this.props.options.order, offset: (element * 10) - 10}}} >
          {element}
        </Link></li>
      );
    });
  
    return elementList;
  }
  
  function reIndex(event, start, end){
    if(event) event.preventDefault();
    this.setState({start, end});
  }
  
  function mapStateToProps(state){
    return {
      questions: state.questions.questions.data,
      options: state.options.options
    };
  }
  
  export default connect(mapStateToProps, actions)(Paginator);