{"size": 2598, "ext": "js", "max_stars_repo_path": "src/components/Pagination/index.js", "max_stars_repo_name": "joaaoeu/lets-find-the-cat", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Pagination/index.js", "max_issues_repo_name": "joaaoeu/lets-find-the-cat", "max_issues_repo_issues_event_min_datetime": "2020-09-06T20:59:29.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-18T07:24:08.000Z", "max_forks_repo_path": "src/components/Pagination/index.js", "max_forks_repo_name": "joaaoeu/lets-find-the-cat", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 23.8348623853, "max_line_length": 101, "alphanum_fraction": 0.6139337952}
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import queryString from 'query-string';
import { HelperService } from '../../services';
import { useMetrics } from '../../hooks';
import {
  Container, PageNumber, CurrentPage, MorePages,
} from './styles';

function Pagination({
  totalPages, currentPage, history, location,
}) {
  const metrics = useMetrics();
  const [offset, setOffset] = useState(4);

  useEffect(() => {
    if (metrics.isXS) {
      setOffset(3);
    } else {
      setOffset(4);
    }
  }, [metrics, setOffset]);

  const goToPage = (pageNumber) => {
    HelperService.scrollToTop(false);

    const params = queryString.parse(location.search);
    params.page = pageNumber;

    history.push({
      ...location,
      search: queryString.stringify(params),
    });
  };

  const renderPageNumber = pageNumber => (
    <PageNumber
      key={pageNumber}
      type="button"
      onClick={() => goToPage(pageNumber)}
    >
      {pageNumber}
    </PageNumber>
  );

  const renderPrevious = () => {
    const previous = [];

    for (
      let pageNumber = currentPage - 1;
      pageNumber >= currentPage - (offset - 1) && pageNumber > 1;
      pageNumber -= 1
    ) {
      previous.push(renderPageNumber(pageNumber));
    }

    if (currentPage - offset > 1) previous.push(<MorePages key="morePreviousPages">...</MorePages>);
    if (currentPage > 1) previous.push(renderPageNumber(1));

    return previous.reverse();
  };

  const renderNext = () => {
    const next = [];

    for (
      let pageNumber = currentPage + 1;
      pageNumber <= currentPage + (offset - 1) && pageNumber < totalPages;
      pageNumber += 1
    ) {
      next.push(renderPageNumber(pageNumber));
    }

    if (currentPage + offset < totalPages) next.push(<MorePages key="moreNextPages">...</MorePages>);
    if (currentPage < totalPages) next.push(renderPageNumber(totalPages));

    return next;
  };

  return (
    <>
      {
        totalPages > 1 && currentPage > 0
        && (
          <Container>
            {renderPrevious()}
            <CurrentPage>{currentPage}</CurrentPage>
            {renderNext()}
          </Container>
        )
      }
    </>
  );
}

Pagination.propTypes = {
  totalPages: PropTypes.number.isRequired,
  currentPage: PropTypes.number.isRequired,
  history: PropTypes.shape({
    push: PropTypes.func.isRequired,
  }).isRequired,
  location: PropTypes.shape({
    search: PropTypes.string.isRequired,
  }).isRequired,
};

export default withRouter(Pagination);
