Pagination.js

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import PaginationItem from './PaginationItem';

import s from './Pagination.css';

const PAGINATION_LENGTH = 7;
const HellipseElement = ({ key }) => (<span key={key}>...</span>);

class Pagination extends React.Component {
  static propTypes = {
    currentPage: PropTypes.number,
    total: PropTypes.number,
    pageSize: PropTypes.number,
    paginationChange: PropTypes.func,
  };

  state = {
    pagesCount: Math.ceil(this.props.total / this.props.pageSize),
  };

  componentWillUpdate(newProps) {
    if (newProps.total !== this.props.total) {
      this.setState({
        pagesCount: Math.ceil(newProps.total / newProps.pageSize),
      });
    }
  }

  handleClick = (count) => {
    this.props.paginationChange(count);
  }

  clickLeft = () => {
    if (this.props.currentPage === 1) {
      return;
    }

    this.props.paginationChange(this.props.currentPage - 1);
  }

  clickRight = () => {
    if (this.props.currentPage === this.state.pagesCount) {
      return;
    }

    this.props.paginationChange(this.props.currentPage + 1);
  }

  renderButton = (counter) => (
    <PaginationItem
      key={`${Date.now()}-${counter}`}
      page={counter}
      isCurrentPage={counter === this.props.currentPage}
      handleClick={this.handleClick}
    />
  );

  renderPagination = () => {
    const arrayBtn = [];
    const count = this.state.pagesCount;

    if (count <= PAGINATION_LENGTH) {
      for (let i = 1; i <= count; i += 1) {
        arrayBtn.push(this.renderButton(i));
      }
    } else {
      arrayBtn.push(this.renderButton(1));

      if (this.props.currentPage <= 4) {
        for (let i = 2; i <= 5; i += 1) {
          arrayBtn.push(this.renderButton(i));
        }

        arrayBtn.push(<HellipseElement key="one" />);
      } else if (this.props.currentPage >= count - 3) {
        arrayBtn.push(<HellipseElement key="two" />);

        for (let i = count - 3; i <= count - 1; i += 1) {
          arrayBtn.push(this.renderButton(i));
        }
      } else {
        arrayBtn.push(<HellipseElement key="three" />);

        for (let i = this.props.currentPage - 1; i <= this.props.currentPage + 1; i += 1) {
          arrayBtn.push(this.renderButton(i));
        }

        arrayBtn.push(<HellipseElement key="four" />);
      }

      arrayBtn.push(this.renderButton(count));
    }

    return arrayBtn;
  }

  render() {
    return (
      <div className={s.root}>
        <div className={s.paginationWrapper}>
          <button
            className={classNames(s.btn, s.btnWithArrow)}
            onClick={this.clickLeft}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="13px" height="13px"
              viewBox="0 0 26 26"
            >
              <path
                className={s.btnArrow}
                fillRule="evenodd"
                d="M24.334,11.338 L5.527,11.338 L13.558,2.818 C14.156,2.186 14.128,1.086 13.497,0.466 C13.186,0.160 12.770,-0.000 12.322,0.006 C11.870,0.015 11.438,0.206 11.136,0.528 L0.481,11.850 C0.071,12.251 0.010,12.656 0.005,12.999 L0.005,13.005 C0.005,13.430 0.245,13.913 0.471,14.150 L11.139,25.486 C11.473,25.831 11.904,26.005 12.340,26.005 C12.745,26.005 13.152,25.855 13.486,25.554 C13.792,25.278 13.978,24.864 13.996,24.417 C14.015,23.953 13.855,23.506 13.558,23.193 L5.527,14.671 L24.334,14.671 C25.253,14.671 26.000,13.924 26.000,13.005 C26.000,12.086 25.253,11.338 24.334,11.338 Z"
              />
            </svg>
          </button>

          <div className={s.paginationBox}>
            {this.renderPagination()}
          </div>

          <button
            className={classNames(s.btn, s.btnWithArrow)}
            onClick={this.clickRight}
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="13px" height="13px"
              viewBox="0 0 26 26"
            >
              <path
                className={s.btnArrow}
                fillRule="evenodd"
                d="M1.666,14.662 L20.473,14.662 L12.442,23.182 C11.844,23.814 11.872,24.914 12.503,25.534 C12.814,25.840 13.230,26.000 13.678,25.994 C14.130,25.985 14.562,25.794 14.864,25.473 L25.519,14.150 C25.929,13.749 25.990,13.344 25.995,13.001 L25.995,12.995 C25.995,12.570 25.755,12.087 25.529,11.850 L14.861,0.514 C14.527,0.169 14.096,-0.005 13.660,-0.005 C13.256,-0.005 12.848,0.145 12.514,0.446 C12.207,0.722 12.022,1.136 12.004,1.583 C11.985,2.047 12.145,2.494 12.442,2.807 L20.473,11.329 L1.666,11.329 C0.747,11.329 0.000,12.076 0.000,12.995 C0.000,13.914 0.747,14.662 1.666,14.662 Z"
              />
            </svg>
          </button>
        </div>

        <p className={s.description}>
          Pages 1 to {this.state.pagesCount} - {this.props.total} businesses
        </p>
      </div>
    );
  }
}

export default withStyles(s)(Pagination);