# components/Logbook/LogbookPager.js

## Maintainability

71.72

## Lines of code

59

## Difficulty

19.21

## Estimated Errors

0.30

## Function weight

### By Complexity

### By SLOC

import React from "react"; import PropTypes from 'prop-types'; import UI from '../../config/ui/config'; import ReactPaginate from 'react-paginate'; /* This class handles the display of pages for the logbook */ class LogbookPager extends React.Component { constructor(props) { super(props); this.getTotalPageNumber = this.getTotalPageNumber.bind(this); } render() { if (this.getTotalPageNumber() <= 1) { return null; }; if (this.props.eventCount === 0) { return null; }; return <ReactPaginate forcePage={this.props.activePage -1 } pageCount={this.getTotalPageNumber()} pageRangeDisplayed={1} previousLabel='<' nextLabel='>' marginPagesDisplayed={1} containerClassName={'pagination pagination-sm margin-top-bottom-0'} subContainerClassName={'pages pagination pagination-sm'} activeClassName={'active'} onPageChange={this.props.onPageClicked} /> } /** * Get the number of pages requested to display the data */ getTotalPageNumber() { if (UI.logbook.EVENTS_PER_PAGE) { if (this.props.eventCount < UI.logbook.EVENTS_PER_PAGE) { return 1; } else { return (Math.ceil(this.props.eventCount / UI.logbook.EVENTS_PER_PAGE)); } } // if in case of error, displays all items on the same page console.log("[ERROR] Could not get the number of events per page. CHeck the config file.") return 1; } } LogbookPager.proptypes = { /* Set the current page */ activePage: PropTypes.number, /* the total number of events found by the server for a given search */ eventCount: PropTypes.number.isRequired, /* Function triggered when the user clicks on a page */ onPageClicked: PropTypes.func } export default LogbookPager;