<commit_before>/* eslint no-console:0 */
import React from 'react';
import Fork from 'react-ghfork';
import range from 'lodash/range';
import cumberbatch from 'cumberbatch-name';
import segmentize from 'segmentize';

import Paginator from '../src/index.jsx';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    const amount = 10000;

    this.state = {
      data: generateNames(amount),
      pagination: {
        page: 1,
        perPage: 10,
      },
    };

    this.onSelect = this.onSelect.bind(this);
    this.onPerPage = this.onPerPage.bind(this);
  }
  render() {
    const data = this.state.data || [];
    const pagination = this.state.pagination || {};
    const paginated = paginate(data, pagination);
    const pages = Math.ceil(data.length / pagination.perPage);

    return (
      <div>
        <Fork className='right' project='bebraw/react-pagify' />

        <div className='per-page-container'>
          Per page <input type='text' defaultValue={pagination.perPage} onChange={this.onPerPage}></input>
        </div>

        <Paginator.Context className="pagify-pagination"
          segments={segmentize({
            page: pagination.page,
            pages: pages,
            beginPages: 3,
            endPages: 3,
            sidePages: 2
          })} onSelect={this.onSelect}>
          <span onClick={this.onSelect.bind(null, pagination.page - 1)}>Previous</span>

          <Paginator.Segment field="beginPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="beginPages" nextField="previousPages" />

          <Paginator.Segment field="previousPages" />
          <Paginator.Segment field="centerPage" className="selected" />
          <Paginator.Segment field="nextPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="nextPages" nextField="endPages" />

          <Paginator.Segment field="endPages" />

          <span onClick={this.onSelect.bind(null, pagination.page + 1)}>Next</span>
        </Paginator.Context>

        <div className='data'>
          <h3>Comics</h3>

          <ul>{paginated.data.map((comic, i) =>
              <li key={'comic-' + i}>{comic.name}</li>
          )}</ul>
        </div>

        <Paginator.Context className="pagify-pagination"
          segments={segmentize({
            page: pagination.page,
            pages: pages,
            beginPages: 1,
            endPages: 1,
            sidePages: 2
          })} onSelect={this.onSelect} ellipsis={'…'}>
          <span onClick={this.onSelect.bind(null, pagination.page - 1)}>Previous one</span>

          <Paginator.Segment field="beginPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="beginPages" nextField="previousPages">
            ***
          </Paginator.Ellipsis>

          <Paginator.Segment field="previousPages" />
          <Paginator.Segment field="centerPage" className="selected" />
          <Paginator.Segment field="nextPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="nextPages" nextField="endPages">
            ***
          </Paginator.Ellipsis>

          <Paginator.Segment field="endPages" />

          <span onClick={this.onSelect.bind(null, pagination.page + 1)}>Next one</span>
        </Paginator.Context>
      </div>
    );
  }
  onSelect(page) {
    const state = this.state;
    const pagination = state.pagination || {};
    const pages = Math.ceil(state.data.length / pagination.perPage);

    pagination.page = Math.min(Math.max(page, 1), pages);

    this.setState({
      pagination: pagination
    });
  }
  onPerPage() {
    var pagination = this.state.pagination || {};

    pagination.perPage = parseInt(event.target.value, 10);

    this.setState({
      pagination: pagination
    });
  }
}

// TODO: push to a package?
function paginate(data, o) {
  data = data || [];

  // adapt to zero indexed logic
  var page = o.page - 1 || 0;
  var perPage = o.perPage;

  var amountOfPages = Math.ceil(data.length / perPage);
  var startPage = page < amountOfPages? page: 0;
<commit_msg>Debug "per page" input<commit_after>/* eslint no-console:0 */
import React from 'react';
import Fork from 'react-ghfork';
import range from 'lodash/range';
import cumberbatch from 'cumberbatch-name';
import segmentize from 'segmentize';

import Paginator from '../src/index.jsx';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    const amount = 10000;

    this.state = {
      data: generateNames(amount),
      pagination: {
        page: 1,
        perPage: 10,
      },
    };

    this.onSelect = this.onSelect.bind(this);
    this.onPerPage = this.onPerPage.bind(this);
  }
  render() {
    const data = this.state.data || [];
    const pagination = this.state.pagination || {};
    const paginated = paginate(data, pagination);
    const pages = Math.ceil(data.length / Math.max(
      isNaN(pagination.perPage) ? 1 : pagination.perPage, 1)
    );

    return (
      <div>
        <Fork className='right' project='bebraw/react-pagify' />

        <div className='per-page-container'>
          Per page <input type='number' min='1' defaultValue={pagination.perPage} onChange={this.onPerPage}></input>
        </div>

        <Paginator.Context className="pagify-pagination"
          segments={segmentize({
            page: pagination.page,
            pages: pages,
            beginPages: 3,
            endPages: 3,
            sidePages: 2
          })} onSelect={this.onSelect}>
          <span onClick={this.onSelect.bind(null, pagination.page - 1)}>Previous</span>

          <Paginator.Segment field="beginPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="beginPages" nextField="previousPages" />

          <Paginator.Segment field="previousPages" />
          <Paginator.Segment field="centerPage" className="selected" />
          <Paginator.Segment field="nextPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="nextPages" nextField="endPages" />

          <Paginator.Segment field="endPages" />

          <span onClick={this.onSelect.bind(null, pagination.page + 1)}>Next</span>
        </Paginator.Context>

        <div className='data'>
          <h3>Comics</h3>

          <ul>{paginated.data.map((comic, i) =>
              <li key={'comic-' + i}>{comic.name}</li>
          )}</ul>
        </div>

        <Paginator.Context className="pagify-pagination"
          segments={segmentize({
            page: pagination.page,
            pages: pages,
            beginPages: 1,
            endPages: 1,
            sidePages: 2
          })} onSelect={this.onSelect} ellipsis={'…'}>
          <span onClick={this.onSelect.bind(null, pagination.page - 1)}>Previous one</span>

          <Paginator.Segment field="beginPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="beginPages" nextField="previousPages">
            ***
          </Paginator.Ellipsis>

          <Paginator.Segment field="previousPages" />
          <Paginator.Segment field="centerPage" className="selected" />
          <Paginator.Segment field="nextPages" />

          <Paginator.Ellipsis className="ellipsis"
            previousField="nextPages" nextField="endPages">
            ***
          </Paginator.Ellipsis>

          <Paginator.Segment field="endPages" />

          <span onClick={this.onSelect.bind(null, pagination.page + 1)}>Next one</span>
        </Paginator.Context>
      </div>
    );
  }
  onSelect(page) {
    const state = this.state;
    const pagination = state.pagination || {};
    const pages = Math.ceil(state.data.length / pagination.perPage);

    pagination.page = Math.min(Math.max(page, 1), pages);

    this.setState({
      pagination: pagination
    });
  }
  onPerPage(event) {
    var pagination = this.state.pagination || {};

    pagination.perPage = parseInt(event.target.value, 10);

    this.setState({
      pagination: pagination
    });
  }
}

// TODO: push to a package?
function paginate(data, o) {
  data = data || [];

  // adapt to zero indexed logic
  var page = o.page - 1 || 0;
  var perPage = o.perPage;

  var amountOfPages = Math.ceil(data.length / perPage);
  var startPage = page < amountOfPages? page: 0;

{'fraction_non_alphanumeric': 0.13888557451378117, 'fraction_numerical': 0.006801097721035676, 'mean_word_length': 2.4184339314845023, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1114396', 'n_tokens_mistral': 2577, 'n_tokens_neox': 2502, 'n_words': 488}