trampa-frontend/src/components/Paging/Paging.js

import React from "react";
import PropTypes from "prop-types";
import {
  Arrow,
  ArrowIcon,
  PageNumber,
  PagingContainer,
  ThreeDots,
} from "./Paging.styled";

const Paging = (props) => {
  const pages = props.pages
    ? props.pages
    : props.totalElements
    ? Math.ceil(props.totalElements / props.elementsPerPage)
    : 1;
  let moving = 0;
  const pagesAsArray = Array.apply(null, Array(5)).map(() => {});
  const threeDotsBefore = props.current - 2 > 1;
  const threeDotsAfter = props.current + 2 < pages;
  return (
    <PagingContainer>
      <Arrow
        onClick={() => props.changePage(props.current - 1)}
        disabled={props.current - 1 < 1}
      >
        <ArrowIcon side="left" />
      </Arrow>
      {threeDotsBefore && (
        <React.Fragment>
          <PageNumber onClick={() => props.changePage(1)}>1</PageNumber>
          {props.current - 3 !== 1 && <ThreeDots>...</ThreeDots>}
        </React.Fragment>
      )}
      {pagesAsArray.map((item, index) => {
        const pageNum = props.current - 2 + moving++;
        if (pageNum > pages ) return;
        if (pageNum < 1) return;
        return (
          <PageNumber
            current={pageNum === props.current}
            key={index}
            onClick={() => props.changePage(pageNum)}
          >
            {pageNum}
          </PageNumber>
        );
      })}
      {threeDotsAfter && (
        <React.Fragment>
          {props.current + 3 !== pages && <ThreeDots>...</ThreeDots>}
          <PageNumber onClick={() => props.changePage(pages)}>
            {pages}
          </PageNumber>
        </React.Fragment>
      )}
      <Arrow
        onClick={() => props.changePage(props.current + 1)}
        disabled={props.current + 1 > pages}
      >
        <ArrowIcon side="right" />
      </Arrow>
    </PagingContainer>
  );
};

Paging.propTypes = {
  children: PropTypes.any,
  totalElements: PropTypes.number,
  elementsPerPage: PropTypes.number,
  pages: PropTypes.number,
  current: PropTypes.number,
  changePage: PropTypes.func,
};

export default Paging;